编程 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 相关文章推荐

通过Unicode转义序列来加密,按你说的可以算是混淆吧

May 06 Javascript

WEB 浏览器兼容推荐收藏

May 14 Javascript

jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态

Oct 29 Javascript

动态的绑定事件addEventListener方法的使用

Jan 24 Javascript

微信小程序实现图片自适应(支持多图)

Jan 25 Javascript

使用JavaScript判断用户输入的是否为正整数(两种方法)

Feb 05 Javascript

浅谈react.js 之批量添加与删除功能

Apr 17 Javascript

node文件上传功能简易实现代码

Jun 16 Javascript

webpack构建的详细流程探底

Jan 08 Javascript

高性能的javascript之加载顺序与执行原理篇

Jan 14 Javascript

vue打包相关细节整理(小结)

Sep 28 Javascript

基于javascript实现日历功能原理及代码实例

May 07 Javascript

javascript拖曳互换div的位置实现示例

Node实现搜索框进行模糊查询

React + Threejs + Swiper 实现全景图效果的完整代码

Vue实现tab导航栏并支持左右滑动功能

React列表栏及购物车组件使用详解

React如何创建组件

Jun 27 #Javascript

Vue3.0写自定义指令的简单步骤记录