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

程序员文章站 2022-03-17 19:41:29

本文实例为大家分享了javascript实现简单五子棋游戏的具体代码，供大家参考，具体内容如下html页面注释都很明确了，大家好好学习。

本文实例为大家分享了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高仿热血传奇游戏实现代码

H5+C3+JS实现五子棋游戏（AI篇）

H5+C3+JS实现双人对战五子棋游戏（UI篇）

javascript原生和jquery库实现iframe自适应高度和宽度

原生js实现的一个随机颜色的简单效果

JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用

JavaScript实现简单的隐藏式侧边栏功能示例

原生js基于canvas实现一个简单的前端截图工具代码实例

利用Javascript裁剪图片并存储的简单实现

javascript 初学教程及五子棋小程序的简单实现