首页
所有分类
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 相关文章推荐
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
Nov 10 Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
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
网页解析(1) 分块(1) 查找算法(1) 装饰器(1) translation(2) 循环(3) 嵌套(1) decorator(1) 安卓(1) 二维数组(2)
You might like
PHP开发中常见的安全问题详解和解决方法（如Sql注入、CSRF、Xss、CC等）
2014/04/21 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
Js 本页面传值实现代码
2009/05/17 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
微信小程序 密码输入（源码下载）
2017/06/27 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
python发腾讯微博代码分享
2014/01/10 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
python中Apriori算法实现讲解
2017/12/10 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
10款最好的Python开发编辑器
2019/07/03 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
国庆节促销广告语2014
2014/09/19 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
毕业实习计划书
2015/01/16 职场文书
迟到检讨书范文
2015/01/27 职场文书
安全主题班会教案
2015/08/12 职场文书
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js