纯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 相关文章推荐
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
JS实现self的resend
Jul 22 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
使用refresh_token实现无感刷新页面
Apr 26 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生成月历代码
2007/06/14 PHP
网友原创的PHP模板类代码
2008/09/07 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
PHP5 字符串处理函数大全
2010/03/23 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
酒店辞职书怎么写
2015/02/26 职场文书
书法社团活动总结
2015/05/07 职场文书
党小组评议意见
2015/06/02 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript