原生JavaScript实现五子棋（直接上代码干货点赞收藏拿走）

迈不过友情╰ 2022-10-07 02:58 5阅读 0赞

# 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;
    }

干货拿走 不要复制粘贴 自己敲几遍，明白了其实很简单

## 喜欢我的文章就关注我吧，持续更新中..... ##

> 以上内容希望帮助到大家，很多朋友r在进阶的时候总会遇到一些问题和瓶颈，业务代码写多了没有方向感，不知道该从那里入手去提升，对此我整理了一些资料，多个知识点高级进阶干货需要的可以免费分享给大家，需要的可以去主页或者评论留言。

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关【直接收藏】前端JavaScript面试

1、事件代理事件代理也就是事件委托不是直接给标签添加事件是给标签的父级添加事件通过事件对象判断触发事件的标签对象是谁执行不同的

阳光穿透心脏的1/2处/ 2024年03月24日 19:52/ 0 赞/ 73 阅读

相关 SpringBoot整合Redis实现点赞、收藏功能（一）

前言点赞、收藏功能作为常见的社交功能，是众多Web应用中必不可少的功能之一。而redis作为一个基于内存的高性能key-value存储数据库，可以用来实现这些功能。本文

红太狼/ 2023年10月12日 14:33/ 0 赞/ 44 阅读

相关【Redis实现点赞,收藏小Demo】

目录前言: Java用于实现Redis点赞/收藏接口：代码分析 -------------------- 前言: > 你懂的,笔记而已 Java用于实

以你之姓@/ 2023年10月12日 10:43/ 0 赞/ 24 阅读

相关【Redis】Redis实现点赞、点赞排行榜

目录一、点赞 1、思路 2、代码实现二、点赞排行榜 1、思路 2、代码实现 -------------------- 一、点赞 1、思路在我们

梦里梦外;/ 2023年10月10日 19:13/ 0 赞/ 67 阅读

相关 SpringBoot整合Redis实现点赞、收藏功能

前言点赞、收藏功能作为常见的社交功能，是众多Web应用中必不可少的功能之一。而redis作为一个基于内存的高性能key-value存储数据库，可以用来实现这些功能。

雨点打透心脏的1/2处/ 2023年10月09日 20:41/ 0 赞/ 65 阅读

相关【超多代码细节】Redis实现点赞、取消点赞的？

来源：http://i7q.cn/5fRUfS ![50561f6a45adbf38ecfd706279d908be.png][]![accad2b55313d1ad80fc

Love The Way You Lie/ 2022年10月15日 15:54/ 0 赞/ 220 阅读

相关原生JavaScript实现五子棋（直接上代码干货点赞收藏拿走）

HTML页面注释都很明确了大家好好学习 <!DOCTYPE html> <html lang="en"> <head>

迈不过友情╰/ 2022年10月07日 02:58/ 0 赞/ 6 阅读

相关 JavaScript五子棋小游戏代码

[下载地址][Link 1] 原生js和canvas画布实现的五子棋小游戏1.canvas画布画棋盘2.canvas画布画棋子3.鼠标点击定位棋子位置4.输赢结果判断 ![

Dear 丶/ 2022年09月13日 05:24/ 0 赞/ 346 阅读

相关 JavaScript原生代码实现楼层跳跃

<!doctype html> <html lang=“en”> <head> <meta charset=

忘是亡心i/ 2022年05月17日 08:16/ 0 赞/ 176 阅读

相关简单五子棋代码实现

一代码 finish = False 游戏是否结束 flagNum = 1 当前下棋者标记 flagch = '' 当前下棋者棋子

忘是亡心i/ 2021年09月29日 13:24/ 0 赞/ 462 阅读