动态网页案例网站在线优化检测
以下是一个使用 JavaScript 实现的简单五子棋游戏示例，该示例结合 HTML 和 CSS 来构建游戏界面，实现了基本的落子、胜负判断等功能。
代码示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>五子棋游戏</title><style>#board {position: relative;width: 450px;height: 450px;border: 1px solid #000;background-color: #f0d9b5;}.piece {position: absolute;width: 20px;height: 20px;border-radius: 50%;margin: -10px 0 0 -10px;}.black {background-color: #000;}.white {background-color: #fff;border: 1px solid #000;}</style>
</head><body><div id="board"></div><script>// 棋盘大小const BOARD_SIZE = 15;// 每个格子的大小const CELL_SIZE = 30;// 棋盘二维数组，用于记录落子情况const board = Array.from({ length: BOARD_SIZE }, () => Array(BOARD_SIZE).fill(0));// 当前玩家，1 表示黑棋，2 表示白棋let currentPlayer = 1;// 获取棋盘元素const boardElement = document.getElementById('board');// 初始化棋盘function initBoard() {for (let i = 0; i < BOARD_SIZE; i++) {for (let j = 0; j < BOARD_SIZE; j++) {const x = j * CELL_SIZE + CELL_SIZE / 2;const y = i * CELL_SIZE + CELL_SIZE / 2;const piece = document.createElement('div');piece.classList.add('piece');piece.style.left = `${x}px`;piece.style.top = `${y}px`;boardElement.appendChild(piece);}}}// 落子function placePiece(x, y) {if (board[x][y] === 0) {board[x][y] = currentPlayer;const piece = document.createElement('div');piece.classList.add('piece', currentPlayer === 1 ? 'black' : 'white');piece.style.left = `${y * CELL_SIZE + CELL_SIZE / 2}px`;piece.style.top = `${x * CELL_SIZE + CELL_SIZE / 2}px`;boardElement.appendChild(piece);if (checkWin(x, y)) {alert(`${currentPlayer === 1 ? '黑棋' : '白棋'}获胜！`);resetGame();} else {currentPlayer = 3 - currentPlayer; // 切换玩家}}}// 检查是否获胜function checkWin(x, y) {const directions = [[1, 0], [0, 1], [1, 1], [1, -1]];for (const [dx, dy] of directions) {let count = 1;// 正向检查for (let i = 1; i < 5; i++) {const newX = x + i * dx;const newY = y + i * dy;if (newX >= 0 && newX < BOARD_SIZE && newY >= 0 && newY < BOARD_SIZE && board[newX][newY] === currentPlayer) {count++;} else {break;}}// 反向检查for (let i = 1; i < 5; i++) {const newX = x - i * dx;const newY = y - i * dy;if (newX >= 0 && newX < BOARD_SIZE && newY >= 0 && newY < BOARD_SIZE && board[newX][newY] === currentPlayer) {count++;} else {break;}}if (count >= 5) {return true;}}return false;}// 重置游戏function resetGame() {for (let i = 0; i < BOARD_SIZE; i++) {for (let j = 0; j < BOARD_SIZE; j++) {board[i][j] = 0;}}currentPlayer = 1;while (boardElement.firstChild) {boardElement.removeChild(boardElement.firstChild);}initBoard();}// 监听棋盘点击事件boardElement.addEventListener('click', (event) => {const rect = boardElement.getBoundingClientRect();const x = Math.floor((event.clientY - rect.top) / CELL_SIZE);const y = Math.floor((event.clientX - rect.left) / CELL_SIZE);if (x >= 0 && x < BOARD_SIZE && y >= 0 && y < BOARD_SIZE) {placePiece(x, y);}});// 初始化棋盘initBoard();</script>
</body></html>
代码解释
-
HTML 部分：
- 创建一个
div元素作为棋盘，其id为board。 - 引入外部的 CSS 样式，用于设置棋盘和棋子的样式。
- 创建一个
-
CSS 部分：
#board：设置棋盘的大小、边框和背景颜色。.piece：设置棋子的基本样式，包括绝对定位、大小和圆角。.black和.white：分别设置黑棋和白棋的颜色。
-
JavaScript 部分：
BOARD_SIZE和CELL_SIZE：定义棋盘的大小和每个格子的大小。board：二维数组，用于记录棋盘上每个位置的落子情况，0 表示空位，1 表示黑棋，2 表示白棋。currentPlayer：当前玩家，初始为黑棋（1）。initBoard：初始化棋盘，创建所有的格子。placePiece：在指定位置落子，更新棋盘数组和界面，检查是否获胜，如果获胜则弹出提示并重置游戏，否则切换玩家。checkWin：检查当前落子位置是否形成五子连珠，通过检查四个方向（水平、垂直、正斜、反斜）来判断。resetGame：重置游戏，清空棋盘数组和界面，将当前玩家重置为黑棋。- 监听棋盘的点击事件，根据点击位置计算落子坐标，并调用
placePiece函数。
使用方法
将上述代码保存为一个 HTML 文件，在浏览器中打开该文件，即可开始玩五子棋游戏。点击棋盘上的空位即可落子，黑棋先下，交替进行，当有一方形成五子连珠时，游戏结束并弹出获胜提示，点击确定后游戏重置。