首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实现五子棋游戏的方法详解

- Author -

webbc

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

Javascript 相关文章推荐
DOM 基本方法
Jul 18 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 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
RP2100(1) SRF-M100(1) 乐信(1) 德劲1102(1) 低放电路(1) SHARP(1) ICF-SW7600(1) PL450(1) GF515(1) PL550(1)
You might like
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
短信提示使用 特效
2007/01/19 Javascript
jquery each()源代码
2011/02/14 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
jQuery可见性过滤器：hidden和：visibility用法实例
2015/06/24 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
python爬取m3u8连接的视频
2018/02/28 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
python判断正负数方式
2020/06/03 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
美国宠物美容和宠物用品购物网站：Cherrybrook
2018/12/07 全球购物
表扬信格式
2014/01/12 职场文书
党员组织关系介绍信
2014/02/13 职场文书
举起手来观后感
2015/06/09 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python