纯JS实现五子棋游戏


Posted in Javascript onMay 28, 2020

本文实例为大家分享了JS实现五子棋游戏的具体代码,供大家参考,具体内容如下

基本实现方式是表格,当时想用黑白圆棋代替的,但是尺寸没调好,就先上黑白底色了

纯JS实现五子棋游戏

说一下实现思路,刚开始是想每次落子的时候都把整个棋盘上的子遍历一遍,然后判断四个方向(横,竖,左斜,右斜)上的点数是不是想加等于5,做到一半的时候感觉这种效率太低了,也没必要,,然后就在每次落子之后判断它四个方向相加是不是等于5(不算落子本身),这是各个方向的最终效果

横向:

纯JS实现五子棋游戏

竖向:

纯JS实现五子棋游戏

左斜:

纯JS实现五子棋游戏

右斜:

纯JS实现五子棋游戏

横向和竖向的图是我修改过后的,加了一个定时器,所以先上色再弹窗
左斜和右斜的图,不知道为什么先弹窗再上色,这个待会研究一下

不多说,直接上代码:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <link rel="stylesheet" href="../bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="external nofollow" />
 <script type="text/javascript" src="../js/jquery.min.js"></script>
 <body>
 <table id="tab" class="table table-bordered table-hover" style="width: 50%;">
  <tbody id="tb">
  </tbody>
 </table>
 <button id="reloadTb" class="btn btn-primary btn-block" style="width: 20%;">重置棋盘 </button>
 </body>
 <script type="text/javascript">
 var k = 1;
 var countRow = 14;

 $(function() {
  createTable();
 })
 
 $("#reloadTb").click(function() {
  $("#tb").empty();
  createTable();
 })

 var createTable = function() {
  for(let i = 0; i < countRow; i++) {
  let tr = $("<tr></tr>");
  for(var j = 0; j < countRow; j++) {
   let td = $("<td style='background-color: #FDF5E6;'></td>");
   td.css("height", "40px");
   td.css("width", "40px");
   tr.append(td);
   td.appendTo(tr).bind('click', tdClick);
  }
  $("#tb").append(tr);
  }
 }

 function tdClick() {
  var hang = $(this).parent("tr").prevAll().length;
  var lie = $(this).prevAll().length;
  hang = Number(hang); //字符串变为数字
  lie = Number(lie);
  //console.log("第" + hang + "行" + "第" + lie + "列");
  if(k == 1) {
  $(this).css("background-color", "black");
  $(this).css("color", "black");
  $(this).html(1);
  $(this).unbind("click");
  checksuc(hang, lie, 1);
  k++;
  } else {
  $(this).css("background-color", "white");
  $(this).css("color", "white");
  $(this).html(2);
  $(this).unbind("click");
  checksuc(hang, lie, 2);
  k--;
  }
 }

 function checksuc(hang, lie, flag) {
  let trArr = $("#tb").children();
  var leftNum = 0,rightNum = 0,i;
  /**
  * 左右判断
  */
  i = lie - 1;
  leftNum = caculate(i, hang, lie, flag, leftNum, trArr, 1, 1);
  i = lie + 1;
  rightNum = caculate(i, hang, lie, flag, rightNum, trArr, 2, 1);
  if(alert2((leftNum + rightNum), flag) != -1){
  return false;
  }
  /**
  * 上下判断
  */
  leftNum = 0;
  rightNum = 0;
  i = hang - 1;
  leftNum = caculate(i, hang, lie, flag, leftNum, trArr, 1, 2);
  i = hang + 1;
  rightNum = caculate(i, hang, lie, flag, rightNum, trArr, 2, 2);
  if(alert2((leftNum + rightNum), flag) != -1){
  return false;
  }

  leftNum = 0;
  rightNum = 0;//初始化数值
  let hang2,lie2;
  /**
  * 左斜判断
  */
  hang2 = hang;
  lie2 = lie;
  leftNum = obliqueCheck(hang2, lie2, trArr, flag, leftNum, 1, 1);
  hang2 = hang;
  lie2 = lie;
  rightNum = obliqueCheck(hang2, lie2, trArr, flag, rightNum, 2, 2);
  if(alert2((leftNum + rightNum), flag) != -1){
  return false;
  }
  
  leftNum = 0;
  rightNum = 0;//初始化数值
  hang2 = hang;
  lie2 = lie;
  /**
  * 右斜判断
  */
  leftNum = obliqueCheck(hang2, lie2, trArr, flag, leftNum, 2, 1);
  hang2 = hang;
  lie2 = lie; //初始化数值
  rightNum = obliqueCheck(hang2, lie2, trArr, flag, rightNum, 1, 2);
  alert2((leftNum + rightNum), flag);
 }

 function obliqueCheck(hang2, lie2, trArr, flag, num, subtractHang, subtractLie) {
  while(hang2 >= 0 && lie2 >= 0) {//左斜右斜判断的时候行和列的左边都必须大于0
  hang2 = subtractHang == 1 ? (hang2 - 1) : (hang2 + 1);
  lie2 = subtractLie == 1 ? (lie2 - 1) : (lie2 + 1);
  var val = trArr.eq(hang2).find("td").eq(lie2).html();
  if(flag == val) {
   num++;
  } else {
   break;
  }
  }
  return num;
 }
 
 function caculate(i, hang, lie, flag, num, trArr, ff, dd) {
  //ff用来判断while里的条件,dd判断列使用的哪个参数
  var result;
  result = (ff == 1) ? (i >= 0) : (i < countRow);
  while(result) {
  var val = trArr.eq(dd == 1 ? hang : i).find("td").eq(dd == 2 ? lie : i).html();
  if(flag == val) {
   num++;
  } else {
   break;
  }
  i = ff == 1 ? (i - 1) : (i + 1);
  result = (ff == 1) ? (i >= 0) : (i < countRow);
  }
  return num;
 }

 function alert2(count, flag) {
  if(count == 4) {//左边相同棋子加右边棋子为4则符合
  if(flag == 1) {
   alert("黑棋胜");
  } else {
   alert("白棋胜");
  }
  return 1;
  }
  return -1;
 }
 /*while(i >= 0) { //1
  var val = trArr.eq(hang).find("td").eq(i).html(); //1
  if(flag == val) {
   leftNum++;
  } else {
   break;
  }
  i--;
  }*/
 /*while(i < countRow) { //2
  var val = trArr.eq(hang).find("td").eq(i).html(); //1
  if(flag == val) {
  rightNum++;
  } else {
  break;
  }
  i++;
 }*/
 /*while(i >= 0) {
  var val = trArr.eq(i).find("td").eq(lie).html();
  if(flag == val) {
  leftNum++;
  } else {
  break;
  }
  i--;
 }
 i = hang + 1;
 while(i < countRow) {
  var val = trArr.eq(i).find("td").eq(lie).html();
  if(flag == val) {
  rightNum++;
  } else {
  break;
  }
  i++;
 }*/
 </script>
</html>

刚开始实现的时候直接写了8个for循环,两百多行,最后优化了一下,把相同的合并到一个while里了,自己随便写着玩的,之前用的while没删直接注释在最后边了,有的命名不太规范请见谅!

更多有趣的经典小游戏实现专题,分享给大家:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript与flash交互通信基础教程
Aug 07 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
js实现简单五子棋游戏
May 28 #Javascript
js实现双人五子棋小游戏
May 28 #Javascript
vue实现五子棋游戏
May 28 #Javascript
用vue 实现手机触屏滑动功能
May 28 #Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 #jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 #jQuery
JS替换字符串中指定位置的字符(多种方法)
May 28 #Javascript
You might like
php下连接mssql2005的代码
2011/01/17 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
token 机制和实现方式
2020/12/15 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
对Python中的@classmethod用法详解
2018/04/21 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
中学教师管理制度
2014/01/14 职场文书
十佳班主任事迹材料
2014/01/18 职场文书
工程招投标邀请书
2014/01/26 职场文书
音乐教学反思
2014/02/02 职场文书
《搭石》教学反思
2014/04/07 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书