网页五子棋小游戏
- 互联网
- 2025-09-22 09:54:02
以下是一个使用 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 文件，在浏览器中打开该文件，即可开始玩五子棋游戏。点击棋盘上的空位即可落子，黑棋先下，交替进行，当有一方形成五子连珠时，游戏结束并弹出获胜提示，点击确定后游戏重置。
