首页
所有分类
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 相关文章推荐
extjs3 combobox取value和text案例详解
Feb 06 Javascript
js实现有过渡渐变效果的图片轮播相册（兼容IE,ff）
Jan 19 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
玩转NODE.JS（四）-搭建简单的聊天室的代码
Nov 11 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 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
sortInts(1) Tkinter(4) agg(1) feDisplacementMap(1) 数据处理(2) apply(1) pandas(7) GUI(2) WebSockets(3) Pool(1)
You might like
php email邮箱正则
2008/10/08 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
Axios学习笔记之使用方法教程
2017/07/21 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
对于Python装饰器使用的一些建议
2015/06/03 Python
Python实现购物车购物小程序
2018/04/18 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
pandas多级分组实现排序的方法
2018/04/20 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
Speedo美国：澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
程序员机试试题汇总
2012/03/07 面试题
总账会计岗位职责
2014/03/13 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
Redis数据同步之redis shake的实现方法
2022/04/21 Redis