脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS实现五子棋游戏

一文教你用纯JS实现一个五子棋游戏

 更新时间：2023年12月22日 11:15:14   作者：重阳微噪  
实现一个五子棋游戏, 简要分析其原理, 页面并没有很花哨, 原理搞懂了, 后面的就是很轻松的事了,本文给大家介绍了如何用纯JS实现一个五子棋游戏,文中通过代码示例给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下

效果

前言

实现一个五子棋游戏， 简要分析其原理， 页面并没有很花哨， 原理搞懂了， 后面的就是很轻松的事了，无非是加一个棋盘背景，然后每个棋子改成圆形， 然后跟棋盘的十字中心交汇处对好。

分析

首先先分析一下，实现一个五子棋需要几步， 首先需要确定用什么样的数据结构， 鉴于对数组的使用更熟悉， 我们选用二维数组， 第一层数组代表行，内部代表列

[
  [[],[]],
  [[],[]]
]

这个就代表两行两列了， 先写个方法实现根据传入数值计算行列

 function generator(rlength, clength) {
  let array = [];
  for (let i = 0; i < rlength; i++) {
    array[i] = [];
    for (let j = 0; j < clength; j++) {
      array[i].push([]);
    }
  }
  return array;
}
const piecesArr = generator(8, 8);

接下来， 我们就是渲染到页面上了，再写个渲染的方法

  function renderPieces() {
     const pieces_box = document.querySelector("#pieces_box");
      let renderText = "";
      piecesArr.map((items, rindex) => {
        renderText += '<div class="outer">';
        items.map((item, cindex) => {
          renderText += `<div class="inner" id="${[rindex, cindex]}"></div>`;
        });
        renderText += "</div>";
      });
      pieces_box.innerHTML = renderText;
    }

我们的页面结构和css是这样的

  <style>
    .outer {
      display: flex;
    }
    .inner {
      width: 100px;
      height: 100px;
      background-color: #ff0;
      border: 1px solid #f00;
      cursor: pointer;
    }
  </style>
  <body>
    <h2>实现一个五子棋游戏</h2>
    <div id="pieces_box"></div>
  </body>

然后我们的页面视觉就出来了， 然后就是处理点击了。 我们通过事件委托的方式，将最外层的元素进行绑定

  let currentColor = "#fff";
    pieces_box.addEventListener("click", (e) => {
      if (e.target.closest(".inner") && !e.target.style.background) {
        currentColor = currentColor === "#fff" ? "#000" : "#fff";
        e.target.style.background = currentColor;
        const currentPos = e.target.id.split(",").map(Number);
        checkResult(currentPos, currentColor);
      }
    });

我们通过绑定后， 根据点击的元素是哪个，获取位置坐标和颜色背景， 和黑白颜色的切换

接下来，我们就要去checkResult中去识别横纵坐标，不同颜色的棋子是否存在5个连续的点了， 我们先实现简单的，横向或者纵向是不是存在5个连续点，我们先写一个储存结果的集合，用来储存每个点击点， 然后我们通过对象key的唯一性， 让x为key， value 为数组， 去判断横坐标上是不是存在 value 中是否有连续5个点， 然后同理，在让y坐标为key，检查value种是否有5个点连续

  const savePos = {
      white: {
        row: {},
        col: {},
      },
      black: {
        row: {},
        col: {},
      },
    };

如这个数据结构， 我们标注了黑色白色的落子，标注了横和纵， 然后把坐标写入进去

    //  最重要的是如何判断赢， 连成五子，在各个方向上， 判断时机就是每个子落下的时候
    function checkResult(currentPos, currentColor) {
      const color = currentColor === "#fff" ? "white" : "black";
      const [x, y] = currentPos;
      // 思路判断 横竖比较简单， 可以通过横坐标为key， 数组值为纵坐标，检查是否连续成五个
      Array.isArray(savePos[color].row[x])
        ? savePos[color].row[x].push(y)
        : (savePos[color].row[x] = [y]);
      Array.isArray(savePos[color].col[y])
        ? savePos[color].col[y].push(x)
        : (savePos[color].col[y] = [x]);
      console.log(savePos, "savePos");
      // 检测白子
      checkISLinkSuccess(savePos["white"], "white");
      // 检测黑子
      checkISLinkSuccess(savePos["black"], "black");
    }

如图我们就构建了这样的数据结构， 然后现在我们要做的就是去检查 value的数组中是不是有连续五个数就行

方法如下：

  // 检查是否存在5个连续的数字存在
    function isConsecutive(arr) {
      // 先对数组进行排序
      arr.sort(function (a, b) {
        return a - b;
      });
      // 检查数组中的每个元素是否 存在依次递增 5个 的连续数字
      for (let i = 0; i <= arr.length - 5; i++) {
        if (
          arr[i] + 1 === arr[i + 1] &&
          arr[i + 1] + 1 === arr[i + 2] &&
          arr[i + 2] + 1 === arr[i + 3] &&
          arr[i + 3] + 1 === arr[i + 4]
        ) {
          return true;
        }
      }
      return false;
    }

到此， 我们的横向和纵向检查是否连成五个棋子的逻辑就完美实现了。

实现横向和纵向的后， 接下来就是识别斜对角是否存在连续连接的五个了， 这个我们留着下面再继续实现

以上就是一文教你用纯JS实现一个五子棋游戏的详细内容，更多关于JS实现五子棋游戏的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • p5.js实现斐波那契螺旋的示例代码

    p5.js实现斐波那契螺旋的示例代码

    本篇文章主要介绍了p5.js实现斐波那契螺旋的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • JavaScript navigator.userAgent获取浏览器信息案例讲解

    JavaScript navigator.userAgent获取浏览器信息案例讲解

    这篇文章主要介绍了JavaScript navigator.userAgent获取浏览器信息案例讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • 一篇文章彻底讲清楚前端热更新

    一篇文章彻底讲清楚前端热更新

    这篇文章主要介绍了前端热更新的相关资料,热更新让前端开发更加高效,通过最小代价替换代码并保留页面状态,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-02-02
  • JavaScript时间对象之常用方法的设置实例

    JavaScript时间对象之常用方法的设置实例

    这篇文章主要为大家介绍了JavaScript时间对象常用方法的设置实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • js实现web留言板功能

    js实现web留言板功能

    这篇文章主要为大家详细介绍了js实现web留言板功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • js捆绑TypeScript声明文件的方法教程

    js捆绑TypeScript声明文件的方法教程

    TypeScript 是 JavaScript 的超集，相比 JavaScript，其最关键的功能是静态类型检查 (Type Guard)。下面这篇文章主要给大家介绍了关于js捆绑TypeScript声明文件的相关资料，需要的朋友可以参考下。
    2018-04-04
  • JS中如何实现点击a标签返回页面顶部的问题

    JS中如何实现点击a标签返回页面顶部的问题

    这篇文章主要介绍了JS中实现点击a标签返回页面顶部的问题，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
    2017-01-01
  • JS实现商城秒杀倒计时功能(动态设置秒杀时间)

    JS实现商城秒杀倒计时功能(动态设置秒杀时间)

    这篇文章主要介绍了JS实现商城秒杀倒计时功能（动态设置秒杀时间）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-12-12
  • Javascript实现的StopWatch功能示例

    Javascript实现的StopWatch功能示例

    这篇文章主要介绍了Javascript实现的StopWatch功能,结合具体实例形式分析了javascript自定义StopWatch实现测试运行时间功能的相关操作技巧,需要的朋友可以参考下
    2017-06-06
  • layui 弹出删除确认界面的实例

    layui 弹出删除确认界面的实例

    今天小编就为大家分享一篇layui 弹出删除确认界面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论