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


Posted in Javascript onJuly 08, 2019

本文实例讲述了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'?'bbbbb':'wwwww';
      //判断是否五子连珠
      for(var i=0;i<line.length;i++){
        if(line[i].indexOf(color) >=0){
          alert('你赢了');
          g.isWin = true;
          break;
        }
      }
    }
    //页面加载完成
    window.onload = function(){
      var g = new Game();
      document.getElementsByTagName('table')[0].onclick = function(ev){
        //判断是否已经赢得游戏
        if(g.isWin){
          alert('此局已结束,请重新开始');
          return;
        }
        Game.xiaQi.call(ev.srcElement,g);//下棋
      }
    }
  </script>
</head>
<style>
  table{
  border-collapse:collapse;
  width:540px;
  height:540px;
  border:solid 1px blue;
  margin:auto;
  background-image: url('./images/background.gif');
}
</style>
<body>
<table>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>

今天不知道怎么搞的,写博客的时候上传不了图片,还好我机智,把图片存到GitHub上,好了,来讲代码。首先,我必须先说明一下,我觉得代码还有很大的优化空间,感兴趣的同学可以继续研究。

实现思路:首先创建一个表格,共15行,15列,把背景改成棋盘的图片,给这个table添加onclick事件,这里使用到了事件委托,事件委托我在之前的文章有介绍过,感兴趣的同学可以去看看。去调用xiaQi函数,在下棋函数中,先判断选择的位置是否已经下过棋了,使用闭包获取下一个棋子的颜色,然后调用judge函数,在函数中先获取当前棋子所下的位置,遍历255个棋格,看看是否能赢,判断是否五子连珠,如果有则游戏结束。

Javascript 相关文章推荐
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
Javascript中的async awai的用法
May 17 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 #Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 #Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 #Javascript
Vue中util的工具函数实例详解
Jul 08 #Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 #Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 #Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 #Javascript
You might like
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
PHP递归创建多级目录
2015/11/05 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
JS input 数字验证代码
2009/07/30 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
Python列表切片常用操作实例解析
2020/03/10 Python
关于Django Models CharField 参数说明
2020/03/31 Python
深入浅析Python代码规范性检测
2020/07/31 Python
python创建文本文件的简单方法
2020/08/30 Python
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
我们是伦敦女孩:WalG
2018/01/08 全球购物
怎样拟定创业计划书
2014/05/01 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
小学教师年度个人总结
2015/02/05 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python
python 中的@运算符使用
2021/05/26 Python
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技