一文教你用純JS實(shí)現(xiàn)一個(gè)五子棋游戲

更新時(shí)間：2023年12月22日 11:15:14 作者：重陽微噪

實(shí)現(xiàn)一個(gè)五子棋游戲, 簡要分析其原理, 頁面并沒有很花哨, 原理搞懂了, 后面的就是很輕松的事了,本文給大家介紹了如何用純JS實(shí)現(xiàn)一個(gè)五子棋游戲,文中通過代碼示例給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下

效果

前言

實(shí)現(xiàn)一個(gè)五子棋游戲，簡要分析其原理，頁面并沒有很花哨，原理搞懂了，后面的就是很輕松的事了，無非是加一個(gè)棋盤背景，然后每個(gè)棋子改成圓形，然后跟棋盤的十字中心交匯處對好。

分析

首先先分析一下，實(shí)現(xiàn)一個(gè)五子棋需要幾步，首先需要確定用什么樣的數(shù)據(jù)結(jié)構(gòu)，鑒于對數(shù)組的使用更熟悉，我們選用二維數(shù)組，第一層數(shù)組代表行，內(nèi)部代表列

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

這個(gè)就代表兩行兩列了，先寫個(gè)方法實(shí)現(xiàn)根據(jù)傳入數(shù)值計(jì)算行列

 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);

接下來，我們就是渲染到頁面上了，再寫個(gè)渲染的方法

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

我們的頁面結(jié)構(gòu)和css是這樣的

  <style>
    .outer {
      display: flex;
    }
    .inner {
      width: 100px;
      height: 100px;
      background-color: #ff0;
      border: 1px solid #f00;
      cursor: pointer;
    }
  </style>
  <body>
    <h2>實(shí)現(xiàn)一個(gè)五子棋游戲</h2>
    <div id="pieces_box"></div>
  </body>

然后我們的頁面視覺就出來了，然后就是處理點(diǎn)擊了。我們通過事件委托的方式，將最外層的元素進(jìn)行綁定

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

我們通過綁定后，根據(jù)點(diǎn)擊的元素是哪個(gè)，獲取位置坐標(biāo)和顏色背景，和黑白顏色的切換

接下來，我們就要去checkResult中去識別橫縱坐標(biāo)，不同顏色的棋子是否存在5個(gè)連續(xù)的點(diǎn)了，我們先實(shí)現(xiàn)簡單的，橫向或者縱向是不是存在5個(gè)連續(xù)點(diǎn)，我們先寫一個(gè)儲存結(jié)果的集合，用來儲存每個(gè)點(diǎn)擊點(diǎn)，然后我們通過對象key的唯一性，讓x為key， value 為數(shù)組，去判斷橫坐標(biāo)上是不是存在 value 中是否有連續(xù)5個(gè)點(diǎn)，然后同理，在讓y坐標(biāo)為key，檢查value種是否有5個(gè)點(diǎn)連續(xù)

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

如這個(gè)數(shù)據(jù)結(jié)構(gòu)，我們標(biāo)注了黑色白色的落子，標(biāo)注了橫和縱，然后把坐標(biāo)寫入進(jìn)去

    //  最重要的是如何判斷贏， 連成五子，在各個(gè)方向上， 判斷時(shí)機(jī)就是每個(gè)子落下的時(shí)候
    function checkResult(currentPos, currentColor) {
      const color = currentColor === "#fff" ? "white" : "black";
      const [x, y] = currentPos;
      // 思路判斷 橫豎比較簡單， 可以通過橫坐標(biāo)為key， 數(shù)組值為縱坐標(biāo)，檢查是否連續(xù)成五個(gè)
      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");
    }

如圖我們就構(gòu)建了這樣的數(shù)據(jù)結(jié)構(gòu)，然后現(xiàn)在我們要做的就是去檢查 value的數(shù)組中是不是有連續(xù)五個(gè)數(shù)就行

方法如下：

  // 檢查是否存在5個(gè)連續(xù)的數(shù)字存在
    function isConsecutive(arr) {
      // 先對數(shù)組進(jìn)行排序
      arr.sort(function (a, b) {
        return a - b;
      });
      // 檢查數(shù)組中的每個(gè)元素是否 存在依次遞增 5個(gè) 的連續(xù)數(shù)字
      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;
    }

到此，我們的橫向和縱向檢查是否連成五個(gè)棋子的邏輯就完美實(shí)現(xiàn)了。

實(shí)現(xiàn)橫向和縱向的后，接下來就是識別斜對角是否存在連續(xù)連接的五個(gè)了，這個(gè)我們留著下面再繼續(xù)實(shí)現(xiàn)

以上就是一文教你用純JS實(shí)現(xiàn)一個(gè)五子棋游戲的詳細(xì)內(nèi)容，更多關(guān)于JS實(shí)現(xiàn)五子棋游戲的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: