原生JavaScript实现简单五子棋游戏


Posted in Javascript onJune 28, 2021

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

HTML页面

注释都很明确了,大家好好学习。

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
  <title>五子棋</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
 
    .box {
      border-spacing: 0px;
      border: 1px solid #3c3c3c;
      background-color: #e1e1e2;
      margin: auto;
    }
    
    .piece {
      border-spacing: 0px;
      border: 1px solid;    
    }
  </style>
 
</head>
 
<body>
  <script type="text/javascript" src="./Gobang.js"></script>
</body>
 
</html>

Javascript

var ScreenWidth = {
  documentWidth: 500,
  containerWidth: 400, // 容器默认宽度
  cellWidth: 20 // 单元格宽度
}
if (document.documentElement.clientWidth < 500) {
  ScreenWidth.documentWidth = document.documentElement.clientWidth;
  ScreenWidth.containerWidth = ScreenWidth.documentWidth * 0.8;
  ScreenWidth.cellWidth = ScreenWidth.containerWidth * 0.05;
}
//常量
var reg = /\d{1,2}/g;
var white = []; // 放白子
var black = []; // 放黑子
var tempKey = false; // 判断是走黑子还是白子
var notOver = true; // 判断游戏是否结束
var tips = "白棋走"; // 提示走棋
var count = 0;//相连的个数
var bv = false; // 黑棋胜利
var wv = false; // 白棋胜利 
var yCanWin = [];// 同一竖元素存放的数组
var xCanWin = [];// 同一横元素存放的数组
var xyCanWin = [];// 同一正斜存放的数组
var yxCanWin = [];// 同一反斜存放的数组
// 用计时器监听是否胜利
var time = setInterval(function () {
  if (bv) {
    tips = "黑棋胜利";
    document.getElementsByTagName("span")[0].innerText = tips;
    for (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) {
      document.getElementsByClassName("pieceBox")[i].onclick = null;
    }
    clearInterval(time);
  }
  if (wv) {
    tips = "白棋胜利";
    document.getElementsByTagName("span")[0].innerText = tips;
    for (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) {
      document.getElementsByClassName("pieceBox")[i].onclick = null;
    }
    clearInterval(time);
  }
}, 100);
newGame();// 开始游戏
function newGame() {
  if (document.getElementsByTagName("table").length) {
    for (var i = 0; i < document.getElementsByTagName("table").length; i++) {
      document.getElementsByTagName("table")[i].remove();
    }
  }
  // 初始化以下内容
  bgInit();
  pieceInit();
  spanFn();
  white = [];
  black = [];
  tempKey = false;
  notOver = true;
  tips = "白棋走";
  count = 0;
  bv = false;
  xCanWin = [];
  yCanWin = [];
  xyCanWin = [];
  yxCanWin = [];
}
 
function spanFn() {
  var span = document.createElement("span");
  document.body.insertBefore(span, document.getElementsByTagName("script")[0]);
  span.innerText = tips;
}
// 棋盘初始化
function bgInit() {
  var table = document.createElement("table");
  table.className = "box"
  for (var y = 0; y < 20; y++) {
    var tr = document.createElement("tr");
    for (var x = 0; x < 20; x++) {
      var td = "<td class='box-" + y + "-" + x + "' style='width: " + ScreenWidth.cellWidth + "px; height: " + ScreenWidth.cellWidth + "px;border:1px solid #9c9c9c'></td>";
      tr.innerHTML += td;
    }
    table.appendChild(tr);
  }
  document.body.insertBefore(table, document.getElementsByTagName("script")[0]);
}
 
// 棋子初始化
function pieceInit() {
  var table = document.createElement("table");
  table.className = "piece"
  table.style = "position: absolute; top: 0; left:50%; margin-left:-" + (ScreenWidth.containerWidth + 42) / 2 + "px";
  for (var y = 0; y < 20; y++) {
    var tr = document.createElement("tr");
    for (var x = 0; x < 20; x++) {
      var td = "<td class='piece-" + y + "-" + x + " pieceBox' style='width: " + ScreenWidth.cellWidth + "px; height: " + ScreenWidth.cellWidth + "px;border:1px solid transparent;border-radius: 50%;'></td>";
      tr.innerHTML += td;
    }
    table.appendChild(tr);
  }
  document.body.insertBefore(table, document.getElementsByTagName("script")[0]);
}
 
// 走棋
for (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) {
  document.getElementsByClassName("pieceBox")[i].onclick = function () {
    if (tempKey) {
      this.style.backgroundColor = "#000";// 黑子
      tempKey = false;
      black.push(this.className.match(reg));
      victory(black, 0);//判断黑棋胜利与否
      if (notOver) {
        tips = tipsGo(tempKey);
        document.getElementsByTagName("span")[0].innerText = tips;
      }
    } else {
      this.style.backgroundColor = "#fff";// 白子
      tempKey = true;
      white.push(this.className.match(reg));
      victory(white, 1);//判断白棋胜利与否
      if (notOver) {
        tips = tipsGo(tempKey);
        document.getElementsByTagName("span")[0].innerText = tips;
      }
    }
    this.onclick = null;// 点击之后取消点击事件
  }
}
 
// 提示走黑还是走白
function tipsGo(tempKey) {
  if (tempKey) {
    return "黑棋走";
  } else {
    return "白棋走";
  }
}
 
/**
 *判断各种赢的方式
 *x代表很坐标,y代表纵坐标
 *1.竖赢,就是x值相同,取y值排序后比较
 *2.横赢,就是y值相同,取x值排序后比较
 *3.正斜赢,x+y相同的值,取x或y排序后比较
 *4.反斜赢,x-y相同的值,取x或y排序后比较
 */
function victory(target, c) {
  if (target.length >= 5) {
    // 1.竖赢yCanWin
    for (var i = 0; i < target.length; i++) {
      for (var j = 0; j < target.length; j++) {
        if (target[j][1] == target[i][1]) {
          yCanWin.push(target[j]);//把x相同的值放入数组yCanWin
        }
      }
      yWin(yCanWin, c);
      yCanWin = [];
    }
    // 2.横赢xCanWin
    for (var m = 0; m < target.length; m++) {
      for (var n = 0; n < target.length; n++) {
        if (target[n][0] == target[m][0]) {
          xCanWin.push(target[n]);//把y相同的值放入数组xCanWin
        }
      }
      xWin(xCanWin, c);
      xCanWin = [];
    }
    // 3.正斜赢xyCanWin(左下到右上)
    for (var a = 0; a < target.length; a++) {
      for (var b = 0; b < target.length; b++) {
        if (parseInt(target[b][0]) + parseInt(target[b][1]) == parseInt(target[a][0]) + parseInt(target[a][1])) {
          xyCanWin.push(target[b])
        }
      }
      yWin(xyCanWin, c);
      xyCanWin = [];
    }
    // 4.反斜赢yxCanWin(左上到右下)
    for (var v = 0; v < target.length; v++) {
      for (var w = 0; w < target.length; w++) {
        if (parseInt(target[w][0]) - parseInt(target[w][1]) == parseInt(target[v][0]) - parseInt(target[v][1])) {
          yxCanWin.push(target[w])
        }
      }
      xWin(yxCanWin, c);
      yxCanWin = [];
    }
  }
}
// 棋的竖赢条件(棋的正斜赢条件)
function yWin(yCanWin, c) { // c = 0代表黑子 c = 1代表白子
  var sortArray = [];//排序数组  
  for (var i = 0; i < yCanWin.length; i++) {
    sortArray.push(yCanWin[i][0]);
  }
  sortArray.sort(function (x, y) {
    return x - y;
  });
  // 数组排序后,前数和后数加一相比(注意数值类型的转换)
  for (var j = 0; j < sortArray.length; j++) {
    if (sortArray[j + 1]) {
      if (parseInt(sortArray[j]) + 1 == parseInt(sortArray[j + 1])) {
        count++; // 每有一个连续则加一,一次不连续就清零
        if (count == 4 && c == 0) {
          bv = true;
          notOver = false;// 游戏结束
          return;
        } else if (count == 4 && c == 1) {
          wv = true;
          notOver = false;
          return;
        }
      } else {
        count = 0;
      }
    }
  }
  count = 0;
}
// 棋的横赢条件(棋的反斜赢条件)
function xWin(xCanWin, c) {
  var sortArray = [];
  for (var i = 0; i < xCanWin.length; i++) {
    sortArray.push(xCanWin[i][1]);
  }
  sortArray.sort(function (x, y) {
    return x - y;
  });
  for (var j = 0; j < sortArray.length; j++) {
    if (sortArray[j + 1]) {
      if (parseInt(sortArray[j]) + 1 == parseInt(sortArray[j + 1])) {
        count++;
        if (count == 4 && c == 0) {
          bv = true;
          notOver = false;
          return;
        } else if (count == 4 && c == 1) {
          wv = true;
          notOver = false;
          return;
        }
      } else {
        count = 0;
      }
    }
  }
  count = 0;
}

javascript经典小游戏汇总的全部文章,请参考专题进行学习。

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

Javascript 相关文章推荐
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
AngularJs 常用的过滤器
May 15 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 Javascript
javascript拖曳互换div的位置实现示例
Node实现搜索框进行模糊查询
React + Threejs + Swiper 实现全景图效果的完整代码
Vue实现tab导航栏并支持左右滑动功能
React列表栏及购物车组件使用详解
React如何创建组件
Jun 27 #Javascript
Vue3.0写自定义指令的简单步骤记录
You might like
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
PHP文件操作实例总结
2016/09/27 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
javascript css styleFloat和cssFloat
2010/03/15 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
优质服务演讲稿
2014/05/14 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
民政工作个人总结
2015/02/28 职场文书
Python开发简易五子棋小游戏
2022/05/02 Python