html五子棋代码思维

HTML五子棋代码思维除了需要具备编程基础外，更需要一种从细节中看到整体的眼光与思路。代码应该清晰简洁，便于阅读和维护，也需要考虑到使用体验和交互性。

<html>
  <head>
    <title>五子棋小游戏</title>
    <Meta charset="UTF-8">
    <style type="text/css">
      #board {
        width: 590px;
        height: 590px;
        margin: 0 auto;
        background-color: #FFE4B5;
        border: 1px solid #8B4513;
      }
      .cell {
        float: left;
        width: 40px;
        height: 40px;
        border: 1px solid #8B4513;
      }
    </style>
    <script type="text/javascript">
      var board = new Array(); //棋盘数组
      var player = 1; //当前玩家
      var isGameOver = false; //游戏是否结束
      var count = 0; //落子数

      function init() { //初始化棋盘
        var container = document.getElementById("board");
        var fragment = document.createDocumentFragment(); //性能优化，避免多次操作DOM
        for (var i = 0; i < 15; i++) { //行
          board[i] = new Array(); //列
          for (var j = 0; j < 15; j++) { //列
            board[i][j] = 0; //初始化为0代表未落子
            var cell = document.createElement("div");
            cell.setAttribute("id","cell_" + i + "_" + j);
            cell.setAttribute("class","cell");
            cell.onclick = function() {
              if (isGameOver) { //游戏结束则不能落子
                return;
              }
              var coords = this.id.split("_"); //获取坐标
              var row = parseInt(coords[1]); //转化为整数
              var col = parseInt(coords[2]);
              if (board[row][col] != 0) { //此处已有棋子
                return;
              }
              var pieceColor = (player % 2 === 1) ? "black" : "white";
              this.style.backgroundColor = pieceColor;
              board[row][col] = (player % 2 === 1) ? 1 : 2;
              count++;
              checkWin(row,col,board[row][col]); //判断胜负
              player++;
            }
            fragment.appendChild(cell);
          }
        }
        container.appendChild(fragment);
      }

      function checkWin(row,player) { //判断胜负
        var directions = [
          [1,0],//水平方向
          [0,1],//竖直方向
          [1,//右下斜方向
          [-1,1] //左下斜方向
        ];
        for (var i = 0; i < directions.length; i++) {
          var count = 1; //连续棋子数量
          var dir = directions[i];
          var r = row + dir[0];
          var c = col + dir[1];
          while (r >= 0 && r < 15 && c >= 0 && c < 15 && board[r][c] === player) {
            count++;
            r += dir[0];
            c += dir[1];
          }
          r = row - dir[0];
          c = col - dir[1];
          while (r >= 0 && r < 15 && c >= 0 && c < 15 && board[r][c] === player) {
            count++;
            r -= dir[0];
            c -= dir[1];
          }
          if (count >= 5) {
            alert((player === 1) ? "黑方胜利！" : "白方胜利！");
            isGameOver = true;
            return;
          }
        }
        if (count === 225) { //平局
          alert("平局！");
          isGameOver = true;
          return;
        }
      }
    </script>
  </head>
  <body onload="init()">
    <div id="board"></div>
  </body>
</html>

html五子棋代码思维

代码中，我们将棋盘用二维数组来表示，并通过innerHTML和DOM操作来渲染到网页中。在落子时，需要判断此处是否已经有棋子，如果有，则不能再次落子。落子后，需要检查是否有五个棋子连成一条线，若是则本方胜利，否则轮到对方落子。当落子数达到225时，判定为平局结束游戏。

html五子棋代码思维

相关推荐