纯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 相关文章推荐
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
Google 地图事件实例讲解
Aug 06 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
angularjs $http调用接口的方式详解
Aug 13 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
vue - vue.config.js中devServer配置方式
Oct 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一些十分严重的缺陷详解
2013/06/03 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
python简单文本处理的方法
2015/07/10 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
Python os库常用操作代码汇总
2020/11/03 Python
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
房地产销售计划书
2014/01/10 职场文书
大学生秋游活动方案
2014/02/17 职场文书
食品安全工作实施方案
2014/03/26 职场文书
企业标语口号
2014/06/10 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书