一个简单的五子棋的JavaScript代码示例

wangluo • • 教程技巧 • 151 阅读

一个简单的五子棋的JavaScript代码示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>五子棋游戏</title>
    <style>
      #board {
        width: 500px;
        height: 500px;
        margin: auto;
        border: 1px solid #000;
      }
      .cell {
        width: 50px;
        height: 50px;
        float: left;
        border: 1px solid #000;
      }
    body {
    background-color: #898989;
}
    </style>
  </head>
  <body>
    <div id="board"></div>
    <script>
      // 创建棋盘
      var board = document.getElementById("board");
      for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
          var cell = document.createElement("div");
          cell.className = "cell";
          cell.setAttribute("data-x", i);
          cell.setAttribute("data-y", j);
          board.appendChild(cell);
        }
      }

      // 初始化游戏状态
      var gameState = [];
      for (var i = 0; i < 10; i++) {
        var row = [];
        for (var j = 0; j < 10; j++) {
          row.push(0);
        }
        gameState.push(row);
      }

      // 玩家落子
      board.addEventListener("click", function(event) {
        var cell = event.target;
        if (!cell.classList.contains("cell")) return;

        var x = parseInt(cell.getAttribute("data-x"));
        var y = parseInt(cell.getAttribute("data-y"));

        if (gameState[x][y] !== 0) return;

        if (isBlackTurn) {
          cell.style.backgroundColor = "black";
          gameState[x][y] = 1;
        } else {
          cell.style.backgroundColor = "white";
          gameState[x][y] = -1;
        }

        isBlackTurn = !isBlackTurn;
      });

      // 判断胜利条件
      function checkWin(x, y, color) {
        var directions = [
          [1, 0],
          [0, 1],
          [1, 1],
          [-1, 1]
        ];

        for (var i = 0; i < directions.length; i++) {
          var dx = directions[i][0];
          var dy = directions[i][1];

          var count = 1;
          for (var j = 1; j <= 4; j++) {
            var nx = x + dx * j;
            var ny = y + dy * j;
            if (nx < 0 || nx >= gameState.length ||
                ny < 0 || ny >= gameState[0].length ||
                gameState[nx][ny] !== color) break;

            count++;
            if (count === 5) return true;
          }
        }

        return false;
      }

      // 游戏结束
      function gameOver(winner) {
        alert(winner === "black" ? "黑方胜利！" : "白方胜利！");
        board.removeEventListener("click", arguments.callee);
      }

      // 监听落子事件
      var isBlackTurn = true;
      board.addEventListener("click", function(event) {
        var cell = event.target;
        if (!cell.classList.contains("cell")) return;

        var x = parseInt(cell.getAttribute("data-x"));
        var y = parseInt(cell.getAttribute("data-y"));

        if (gameState[x][y] !== 0) return;

        if (isBlackTurn) {
          cell.style.backgroundColor = "black";
          gameState[x][y] = 1;
          if (checkWin(x, y, 1)) gameOver("black");
        } else {
          cell.style.backgroundColor = "white";
          gameState[x][y] = -1;
          if (checkWin(x, y, -1)) gameOver("white");
        }

        isBlackTurn = !isBlackTurn;
      });
    </script>
  </body>
</html>

 

以上代码实现了一个基本的五子棋游戏，包括落子、判断胜利条件和游戏结束等功能。你可以根据需要自行修改或扩展。

版权声明：
作者：wangluo
链接：http://codeftp.com/?p=203
来源：源码分享网
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>