摘要：五子棋游戏.container {text-align: center;margin: 20
重新开始const canvas = document.getElementById('chessboard');const ctx = canvas.getContext('2d');const statusDiv = document.getElementById('status');const GRID_SIZE = 40; // 格子大小const BOARD_SIZE = 15; // 15x15的棋盘const PIECE_RADIUS = 18; // 棋子半径let currentPlayer = 1; // 1为黑棋，2为白棋let gameOver = false;let board = Array(BOARD_SIZE).fill.map( => Array(BOARD_SIZE).fill(0));// 初始化棋盘function initBoard {// 绘制棋盘背景ctx.fillStyle = '#DEB887';ctx.fillRect(0, 0, canvas.width, canvas.height);// 绘制棋盘线ctx.strokeStyle = '#000';ctx.lineWidth = 1;// 绘制横线for (let i = 0; i {ctx.beginPath;ctx.arc(GRID_SIZE + x * GRID_SIZE, GRID_SIZE + y * GRID_SIZE, 5, 0, Math.PI * 2);ctx.fillStyle = '#000';ctx.fill;});}// 绘制棋子function drawPiece(row, col, player) {const x = GRID_SIZE + col * GRID_SIZE;const y = GRID_SIZE + row * GRID_SIZE;ctx.beginPath;ctx.arc(x, y, PIECE_RADIUS, 0, Math.PI * 2);// 创建渐变const gradient = ctx.createRadialGradient(x - 5, y - 5, 1,x, y, PIECE_RADIUS);if (player === 1) { // 黑棋gradient.addColorStop(0, '#666');gradient.addColorStop(1, '#000');} else { // 白棋gradient.addColorStop(0, '#fff');gradient.addColorStop(1, '#ccc');}ctx.fillStyle = gradient;ctx.fill;ctx.strokeStyle = player === 1 ? '#000' : '#ccc';ctx.stroke;}// 检查是否获胜function checkWin(row, col) {const directions = [[[0, 1], [0, -1]], // 水平[[1, 0], [-1, 0]], // 垂直[[1, 1], [-1, -1]], // 主对角线[[1, -1], [-1, 1]] // 副对角线];for (let [dir1, dir2] of directions) {let count = 1;// 向一个方向查找for (let i = 1; i = BOARD_SIZE || newCol = BOARD_SIZE) break;if (board[newRow][newCol] !== currentPlayer) break;count++;}// 向相反方向查找for (let i = 1; i = BOARD_SIZE || newCol = BOARD_SIZE) break;if (board[newRow][newCol] !== currentPlayer) break;count++;}if (count >= 5) return true;}return false;}// 处理点击事件canvas.addEventListener('click', (e) => {if (gameOver) return;const rect = canvas.getBoundingClientRect;const x = e.clientX - rect.left;const y = e.clientY - rect.top;// 计算落子的行列const col = Math.round((x - GRID_SIZE) / GRID_SIZE);const row = Math.round((y - GRID_SIZE) / GRID_SIZE);// 检查是否在有效范围内if (row = BOARD_SIZE || col = BOARD_SIZE) return;// 检查该位置是否已有棋子if (board[row][col] !== 0) return;// 放置棋子board[row][col] = currentPlayer;drawPiece(row, col, currentPlayer);// 检查是否获胜if (checkWin(row, col)) {statusDiv.textContent = (currentPlayer === 1 ? '黑方' : '白方') + '获胜！';gameOver = true;return;}// 切换玩家currentPlayer = currentPlayer === 1 ? 2 : 1;statusDiv.textContent = (currentPlayer === 1 ? '黑方' : '白方') + '回合';});// 重新开始游戏function restartGame {board = Array(BOARD_SIZE).fill.map( => Array(BOARD_SIZE).fill(0));currentPlayer = 1;gameOver = false;statusDiv.textContent = '黑方回合';initBoard;}// 初始化游戏initBoard;
来源：档案启示录2021
免责声明：本站系转载，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与本站联系，我们将在第一时间删除内容!
