首页
所有分类
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 相关文章推荐
改进：论坛UBB代码自动插入方式
Dec 22 Javascript
自己动手开发jQuery插件教程
Aug 25 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
JavaScript获取某一天所在的星期
Sep 05 Javascript
Javascript Worker子线程代码实例
Feb 20 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 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
ResNet50(1) 内存泄露(1) 微信(2) Xception(1) tensorflow(2) Spring(9) Seaborn(1) Lifecycle(1) PostMapping(1) Inception(2)
You might like
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
php操作MongoDB基础教程（连接、新增、修改、删除、查询）
2014/03/25 PHP
PHP网页游戏学习之Xnova(ogame)源码解读（十三）
2014/06/26 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
详解vee-validate的使用个人小结
2017/06/07 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
浅谈Python处理PDF的方法
2017/11/10 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
Diptyque英国官方网站：源自法国的知名香氛品牌
2019/08/28 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站：HolidayCheck
2019/11/14 全球购物
应届生护士求职信
2013/11/01 职场文书
广告设计专业自荐信范文
2013/11/14 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
毕业大学生自荐信
2014/06/17 职场文书
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript