编程 Javascript

js实现双人五子棋小游戏

Posted in Javascript onMay 28, 2020

本文实例为大家分享了js实现双人五子棋小游戏的具体代码，供大家参考，具体内容如下

这是自己自学js的时候，在网上找的js源码，由于是自学，花了数小时才把这个源码大致弄明白。
大致算法自定义棋盘规格，直接在棋盘建新div就可以，长度宽度用计算就可以了。下棋，在div里再建class，这里要给每个class标一个site值，由site值写出该棋子竖直方向和横向的坐标，由坐标可以写出棋子胜利的条件。而棋子的黑白走是用标识符，偶的标识符则是白棋子的class。奇的标识符则是黑棋子的class。

ps 我遇到的一些问题在代码中有注释

<!DOCTYPE html>
<html>
<head>
 <title>五子棋</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
 <style>
 /* 简单初始化 */
 html,body,section,div,p{
 padding: 0;
 margin: 0;
 font-size: 12px;
 }
 body{
 width: 100%;
 height: 100%;
 position: fixed;
 }
 /* 棋盘 */
 #chessboard{
 width: 90vmin;
 min-height: 89vmin;
 margin: calc(50vh - 46vmin + 2px) auto;
 background: #f5ca69;
 border: 2px solid #000;
 border-radius: 7px;
 -webkit-box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5), 
       -.1rem -.1rem .05rem rgba(0,0,0,.5) ; 
  box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5), 
       -.1rem -.1rem .05rem rgba(0,0,0,.5) ; 
 }
 /* after伪元素,载入chessboard后发生 */
 #chessboard::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
 }
 #chessboard div{
 width: calc(9vmin - 2px);
 height: calc(9vmin - 2px);
 float: left;
 border: 1px solid #000;
 border-radius: 5px;
 }
 #chessboard div p{
  width: 97%;
  height: 97%;
  margin: 1.5% auto;
 border-radius: 100%;
 }
 /* 白棋子 */
 .white{
 background: -webkit-radial-gradient(at 35% 35%,#FFF,#CCC,#FFF);
  background: -o-radial-gradient(at 35% 35%,#FFF,#CCC,#FFF); 
  background: -moz-radial-gradient(at 35% 35%,#FFF,#CCC,#FFF); 
  background: radial-gradient(at 35% 35%,#FFF,#CCC,#FFF); 
 box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5);
 }
 /* 黑棋子 */
 .black{
 background: -webkit-radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%);
  background: -o-radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%); 
  background: -moz-radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%); 
  background: radial-gradient(at 30% 30%,#999 -13%,#000 35%,#999 200%); 
 box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5);
 }
 #mask{
 width: 100%;
 height: 100vh;
 position: fixed;
 top: 0;
 left: 0;
 background-color: rgba(0,0,0,.7);
 }
 .conBox{
 display: block;
 width: 300px;
 height: 200px;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
 background-color: #fff;
 border-radius: 3px;
 box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5);
 }
 .conBox h1{
 width: 100%;
 float: left;
 margin: 0;
 line-height: 45px;
 text-align: center;
 }
 .conBox p{
 display: block;
 width: 40px;
 height: 40px;
 float: left;
 margin-top: 40px;
 font-size: 32px;
 text-align: center;
 line-height: 40px;
 cursor: pointer;
 }
 .conBox p:nth-child(2){
 margin-left: 60px;
 }
 .conBox p:nth-child(3){
 width: 100px;
 font-size: 20px;
 cursor: initial;
 }
 .conBox button{
 width: 80px;
 float: left;
 margin-top: 30px;
 margin-left: 110px;
 color: #fff;
 font-size: 14px;
 text-align: center;
 line-height: 28px;
 background-color: #f60;
 border: none;
 outline: none;
 }
 .clear::after{
 content: "";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
 }
 .border,
 .borderTop,
 .borderBot
 {
 position: relative;
 }
 .border:after{
 content: " ";
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  box-sizing: border-box;
 }
 .borderBot:after{
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
 }
 .borderTop:before{
 content: " ";
  position: absolute;
  left: 0; 
  top: 0;
  right: 0; 
  height: 1px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
 }
 </style>
 <script>
 // onload为浏览器对象中的事件,页面载入时触发
 window.function(){
 var grid;
 var chessArr = [];
 var timer = 0;
 var lineNum = parseInt(gridNum.innerHTML);
 // 获取元素
 var box = document.getElementById('chessboard');
 var chessBox = box.getElementsByTagName('div');
 var submitBtn = document.getElementById('submitBtn');
 // 减去规格
 subBtn.onclick = function(){
 if ( lineNum > 8 ) {
  lineNum--;
 }
 // innerHTML为gridNum的全元素
 gridNum.innerHTML = lineNum;
 }
 // 加上规格
 addBtn.onclick = function(){
 if ( lineNum < 14 ) {
  lineNum++;
 }
 gridNum.innerHTML = lineNum;
 }

 //棋盘初始化
 submitBtn.onclick = function(){
 var chessMaxNum = lineNum * lineNum;
 var chessWH = 90/lineNum;
 for (var i = 0; i < chessMaxNum; i++) {
  // 设置棋盘里小格子div元素
  grid = document.createElement('div');
  grid.style.width = 'calc(' + chessWH + 'vmin - 2px)';
  grid.style.height = 'calc(' + chessWH + 'vmin - 2px)';
  grid.id=i;
  
  
  box.appendChild(grid);
  chessArr[i] = 0;

  grid.onclick = function(x){
  // target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
  var index = x.target.id||x.target.parentNode.id;
  return playChess(index);
  };
  
 };
 mask.style.display = 'none';
 }

 //棋子对象
 function Chess(){
 this.color = 'white';
 this.site = 0;
 // 创建一个class
 this.chessDom = function(){
  // 创造新节点
  var dom = document.createElement('p');
  // 将这个名字给class
  dom.setAttribute('class',this.color);
  return dom;
 }
 
 this.ligature = function(arr){
  // map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
  //是就返回这个site
  
  // 给白棋一个标识号,方便在下列judge中判断
  var whiteChess = arr.map(function(s){
  // parseInt() 函数可解析一个字符串，并返回一个整数。
  return (s.color == 'white')?parseInt(s.site):0;
  });
  
  var blackChess = arr.map(function(s){
  return (s.color == 'black')?parseInt(s.site):0;
  });

  judge(whiteChess,'白子');
  judge(blackChess,'黑子');

  function judge(che,color){
  // length 属性可返回字符串中的字符数目
  for (var i = 0;i < che.length;i++) {
  // 棋子横坐标
  var x = che[i]%lineNum;
  // 棋子竖坐标
  var y = parseInt(che[i]/lineNum);
  // \这样的倾斜判断
  if ( x <= lineNum - 5 && y <= lineNum - 5 && che[i] != 0 ) {
  if( che[i+1*lineNum+1] != 0 && che[i+2*lineNum+2] != 0 && che[i+3*lineNum+3] != 0 && che[i+4*lineNum+4] != 0 ){
   alert(color+'获胜!');
   // 胜利后刷新页面
   location.replace(location);
   return true;
  }
  };
  // |这样的竖直判断
  if ( y <= lineNum - 5 && che[i] != 0 ) {
  if( che[i+1*lineNum] != 0 && che[i+2*lineNum] != 0 && che[i+3*lineNum] != 0 && che[i+4*lineNum] != 0 ){
   alert(color+'获胜!');
   // Location 对象方法replace() 用新的文档替换当前文档
   location.replace(location);
   return true;
  }
  };
  // /这样的倾斜判断
  if ( x >= 4 && y <= lineNum - 5 && che[i] != 0 ) {
  if( che[i+1*lineNum-1] != 0 && che[i+2*lineNum-2] != 0 && che[i+3*lineNum-3] != 0 && che[i+4*lineNum-4] != 0 ){
   alert(color+'获胜!');
   location.replace(location);
   return true;
  }
  };
  // ——这样的平行判断
  if ( x <= lineNum - 5 && che[i] != 0 ) {
  if( che[i+1] != 0 && che[i+2] != 0 && che[i+3] != 0 && che[i+4] != 0 ){
   alert(color+'获胜!');
   location.replace(location);
   return true;
  }
  };
  };
  }
 }
 } 

 function playChess(i){
 if(chessArr[i] == 0){
  // 标识符
  timer++;
  // 用new创建新的对象
  chessArr[i] = new Chess();
  timer%2==0?chessArr[i].color = 'black':chessArr[i].color = 'white';
  // 给每个小格子设置一个site值
  chessArr[i].site = i;
  // appendChild() 方法向节点添加最后一个子节点
  // 意思就是在小格子div里加上棋子的class
  chessBox[i].appendChild(chessArr[i].chessDom());
  // 给这个class的棋子赋予site值
  chessArr[i].ligature(chessArr);
 }else{
  alert('此处有子!');
 }
 }
 
 };
 </script>
</head>
<body>
 <section id="chessboard" class="clear">
 </section>
 <section id="mask">
 <aside class="conBox">
 <h1 class="borderBot">小依，选择棋盘规格哇。</h1>
 <p id="subBtn" class="border">-</p>
 <p id="gridNum" value="10" class="borderTop borderBot">10</p>
 <p id="addBtn" class="border">+</p>
 <button id="submitBtn">确认</button>
 </aside>
 </section>
 <div style="text-align:center;">
</div>
</body>
</html>

更多有趣的经典小游戏实现专题，分享给大家：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js实现双人五子棋小游戏

- Author -

原映雪

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 自动填写表单的实现方法

Apr 09 Javascript

有关JavaScript的10个怪癖和秘密分享

Aug 28 Javascript

Jquery中val()表单取值赋值的实例代码

Aug 15 Javascript

JavaScript中的eval()函数详解

Aug 22 Javascript

js获取当前路径的简单示例代码

Jan 08 Javascript

jQuery实现3D文字特效的方法

Mar 10 Javascript

JavaScript中停止执行setInterval和setTimeout事件的方法

May 14 Javascript

郁闷!ionic中获取ng-model绑定的值为undefined如何解决

Aug 27 Javascript

使用开源工具制作网页验证码的方法

Oct 17 Javascript

[js高手之路]原型式继承与寄生式继承详解

Aug 28 Javascript

JS实现静态页面搜索并高亮显示功能完整示例

Sep 19 Javascript

详解.vue文件中style标签的几个标识符

Jul 17 Javascript

vue实现五子棋游戏

May 28 #Javascript

用vue 实现手机触屏滑动功能

May 28 #Javascript

Jquery高级应用Deferred对象原理及使用实例

May 28 #jQuery

JQuery插件tablesorter表格排序实现过程解析

May 28 #jQuery

JS替换字符串中指定位置的字符(多种方法)

May 28 #Javascript

js实现九宫格布局效果

May 28 #Javascript

微信小程序实现电子签名并导出图片

May 27 #Javascript