DDR爱好者之家

JavaScript实现五子棋游戏的方法详解
站长资源 2024/11/25 佚名
19 1538
DDR爱好者之家 Design By 杰米

本文实例讲述了JavaScript实现五子棋游戏的方法。分享给大家供大家参考，具体如下：

最近半个月一直在看深入的学习JavaScript，里面有很多重点和难点，比如闭包、词法分析、面向对象等。今天给大家分享一个由JavaScript编写的五子棋游戏，主要用到JavaScript的面向对象、事件委托、闭包等知识，还是挺有分量的，正好可以检测学习的成果。

老规矩，先上图，再说话。

效果图：

JavaScript实现五子棋游戏的方法详解

五子棋素材图：

JavaScript实现五子棋游戏的方法详解

代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>HTML五子棋游戏</title>
  <link rel="stylesheet" href="">
  <script>
    //五子棋的构造函数
    function Game(){
      this.isWin = false;//游戏是否结束标志
    }
    //闭包计棋器
    Game.cnt = (function(){
      var curr = 'black';
      return function(){
        var tmp = curr;
        if(curr == 'black'){
          curr = 'white';
        }else{
          curr = 'black';
        }
        return tmp;
      }
    })();
    //下棋函数
    Game.xiaQi = function(g){
      //判断选择的位置是否已经下过棋了
      if(this.style.backgroundImage.indexOf('gif') >= 0){
        alert('这里已经下过棋了');
        return ;
      }
      var color = Game.cnt();
      this.style.backgroundImage = "url(./images/"+color+".gif)";
      Game.judge.call(this,color,g);//判定函数
    }
    //判定游戏是否结束
    Game.judge = function(color,g){
      var tds = document.getElementsByTagName('td');
      //获取当前棋子所下的位置
      var curr = {x:this.cellIndex,y:this.parentElement.rowIndex,color:color};
      var line = ['','','',''];//表示当前棋子的横、竖、左斜、右斜方向的棋子
      //遍历255个棋格，看看是否能赢
      for(var i=0,tmp={};i<tds.length;i++){
        tmp = {x:tds[i].cellIndex,y:tds[i].parentElement.rowIndex,color:'0'};
        if(tds[i].style.backgroundImage.indexOf('black') >= 0){
          tmp.color = 'b';
        }else if(tds[i].style.backgroundImage.indexOf('white') >= 0){
          tmp.color = 'w';
        }
        //获取当前棋子的横向其他棋子的坐落情况
        if(curr.y == tmp.y){
          line[0] += tmp.color;
        }
        //获取当前棋子的竖向其他棋子的坐落情况
        if(curr.x == tmp.x){
          line[1] += tmp.color;
        }
        //获取当前棋子的左斜方向其他棋子的坐落情况
        if(curr.x+curr.y == tmp.x+tmp.y){
          line[2] += tmp.color;
        }
        //获取当前棋子的右斜方向其他棋子的坐落情况
        if(curr.x-tmp.x == curr.y-tmp.y){
          line[3] += tmp.color;
        }
      }
      color = color == 'black'"color: #800000">PS：这里再为大家推荐另一款本站的js版五子棋游戏供大家参考（其AI相对简单一些）


在线五子棋游戏：

http://tools.jb51.net/games/wuziqi


更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript遍历算法与技巧总结》


希望本文所述对大家JavaScript程序设计有所帮助。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米