纯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 相关文章推荐
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
Node.Js生成比特币地址代码解析
Apr 21 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使用base64加密解密图片示例分享
2014/01/20 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
Python运行的17个时新手常见错误小结
2012/08/07 Python
python模拟enum枚举类型的方法小结
2015/04/30 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python中正则表达式的用法总结
2019/02/22 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
公益活动策划方案
2014/01/09 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python