用基础前端三件套构建五子棋游戏

2023-10-14 00:03:16

在数字领域重现经典五子棋：HTML、CSS 和 JavaScript 的完美结合

简介

五子棋，一个有着悠久历史的经典棋盘游戏，至今仍受到人们的喜爱。随着科技的发展，我们可以在数字领域重现这一经典，而要实现这一目标，掌握前端开发三件套——HTML、CSS 和 JavaScript——至关重要。

HTML：棋盘的框架

HTML 为五子棋棋盘提供了骨架。它是一个二维表格，由 15×15 个单元格组成。每个单元格代表棋盘上的一个位置，等待着棋子的到来。

代码示例：

<table id="board">
  <tbody>
    <tr>
      <td></td> <td></td> <td></td> <td></td> <td></td>
      <td></td> <td></td> <td></td> <td></td> <td></td>
      <td></td> <td></td> <td></td> <td></td> <td></td>
    </tr>
    <!-- 省略代码 -->
  </tbody>
</table>

CSS：美化棋盘

CSS 为棋盘增添了视觉魅力。它定义了单元格的尺寸、棋子的颜色以及悬停效果等样式。

代码示例：

#board {
  width: 500px;
  height: 500px;
  border: 1px solid black;
}

td {
  width: 33.3px;
  height: 33.3px;
  border: 1px solid black;
}

.black-piece {
  background-color: black;
  border-radius: 50%;
}

.white-piece {
  background-color: white;
  border-radius: 50%;
}

JavaScript：游戏的灵魂

JavaScript 赋予棋盘生命力。它负责棋子的放置、检查胜负条件以及协调玩家交互。

代码示例：

// 玩家轮流放置棋子
let turn = 'black';

// 棋盘数据结构，0表示空，1表示黑棋，-1表示白棋
let boardData = new Array(15).fill(0).map(() => new Array(15).fill(0));

// 玩家放置棋子
function placePiece(row, col) {
  if (boardData[row][col] === 0) {
    if (turn === 'black') {
      boardData[row][col] = 1;
      $('#' + row + '-' + col).addClass('black-piece');
    } else {
      boardData[row][col] = -1;
      $('#' + row + '-' + col).addClass('white-piece');
    }
    turn = turn === 'black' ? 'white' : 'black';
  }
}

// 检查胜负条件
function checkWinner() {
  // 省略代码
}