首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生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实现简单五子棋游戏

- Author -

程序员_Halo

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery中this的使用说明
Sep 06 Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
如何编写高质量JS代码
Dec 28 Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
javascript拖曳互换div的位置实现示例
Node实现搜索框进行模糊查询
React + Threejs + Swiper 实现全景图效果的完整代码
Vue实现tab导航栏并支持左右滑动功能
React列表栏及购物车组件使用详解
React如何创建组件
Jun 27 #Javascript
Vue3.0写自定义指令的简单步骤记录
夸克(1) 天问一号(1) 塑料(1) 酶(1) 界面设计(1) 国际空间站(1) 对撞机(1) 粒子对撞机(1) 人造肉(1) 太空(1)
You might like
php生成EXCEL的东东
2006/10/09 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
JS如何实现在页面上快速定位（锚点跳转问题）
2017/08/14 Javascript
微信小程序媒体组件详解（视频，音乐，图片）
2017/09/19 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
js 实现 list转换成tree的方法示例（数组到树）
2019/08/18 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
python3 爬取图片的实例代码
2018/11/06 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
英国派对礼服和连衣裙购物网站：TFNC London
2018/07/07 全球购物
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
2014年应届大学生自我评价
2014/01/09 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
golang http使用踩过的坑与填坑指南
2021/04/27 Golang