五子棋是一种经典的策略性棋类游戏，规则简单但变化丰富。本文将介绍如何使用JavaScript在网页上实现一个简单的五子棋小游戏。我们将从棋盘绘制、棋子落子、胜负判断等方面逐步讲解。
首先，我们需要创建一个简单的HTML页面，用于显示棋盘和棋子。HTML结构如下：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>五子棋小游戏</title> <style> #board { display: grid; grid-template-columns: repeat(15, 40px); grid-template-rows: repeat(15, 40px); gap: 1px; background-color: #f0d9b5; } .cell { width: 40px; height: 40px; background-color: #f0d9b5; border: 1px solid #000; display: flex; justify-content: center; align-items: center; } .black { width: 30px; height: 30px; background-color: black; border-radius: 50%; } .white { width: 30px; height: 30px; background-color: white; border-radius: 50%; } </style> </head> <body> <div id="board"></div> <script src="gobang.js"></script> </body> </html> 在这个HTML结构中，我们使用了一个div元素作为棋盘容器，并通过CSS的grid布局来创建15x15的棋盘。每个格子都是一个div元素，用于放置棋子。
接下来，我们需要在JavaScript中初始化棋盘。我们将创建一个15x15的二维数组来表示棋盘状态，并在页面上绘制棋盘。
const boardSize = 15; const board = []; const boardElement = document.getElementById('board'); // 初始化棋盘 function initBoard() { for (let i = 0; i < boardSize; i++) { board[i] = []; for (let j = 0; j < boardSize; j++) { board[i][j] = 0; // 0表示空位，1表示黑棋，2表示白棋 const cell = document.createElement('div'); cell.classList.add('cell'); cell.dataset.row = i; cell.dataset.col = j; cell.addEventListener('click', handleCellClick); boardElement.appendChild(cell); } } } initBoard(); 在这段代码中，我们创建了一个15x15的二维数组board，用于存储棋盘上每个格子的状态。然后，我们通过循环创建了15x15个div元素，并将它们添加到棋盘容器中。
接下来，我们需要处理玩家点击棋盘时的落子操作。我们将根据当前玩家的回合来决定落子的颜色，并更新棋盘状态。
let currentPlayer = 1; // 1表示黑棋，2表示白棋 function handleCellClick(event) { const row = parseInt(event.target.dataset.row); const col = parseInt(event.target.dataset.col); if (board[row][col] !== 0) { return; // 如果该位置已经有棋子，则不能落子 } board[row][col] = currentPlayer; const piece = document.createElement('div'); piece.classList.add(currentPlayer === 1 ? 'black' : 'white'); event.target.appendChild(piece); if (checkWin(row, col)) { alert(currentPlayer === 1 ? '黑棋胜利！' : '白棋胜利！'); resetBoard(); } else { currentPlayer = currentPlayer === 1 ? 2 : 1; } } 在这段代码中，我们首先获取点击的格子的行和列，然后检查该位置是否已经有棋子。如果没有棋子，则根据当前玩家的回合来落子，并更新棋盘状态。接着，我们检查是否有玩家获胜，如果有则弹出提示并重置棋盘，否则切换到另一个玩家。
五子棋的胜负判断是通过检查当前落子的位置是否在水平、垂直或对角线上形成五子连线。我们可以通过遍历棋盘来实现这一功能。
function checkWin(row, col) { 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 newRow = row + dx * i; const newCol = col + dy * i; if (newRow >= 0 && newRow < boardSize && newCol >= 0 && newCol < boardSize && board[newRow][newCol] === currentPlayer) { count++; } else { break; } } for (let i = 1; i < 5; i++) { const newRow = row - dx * i; const newCol = col - dy * i; if (newRow >= 0 && newRow < boardSize && newCol >= 0 && newCol < boardSize && board[newRow][newCol] === currentPlayer) { count++; } else { break; } } if (count >= 5) { return true; } } return false; } 在这段代码中，我们定义了四个方向（水平、垂直、主对角线、副对角线），然后分别从当前落子的位置向两个方向遍历，检查是否有连续的五子。如果有，则返回true，表示当前玩家获胜。
最后，我们需要实现一个重置棋盘的功能，以便在游戏结束后重新开始。
function resetBoard() { for (let i = 0; i < boardSize; i++) { for (let j = 0; j < boardSize; j++) { board[i][j] = 0; const cell = boardElement.children[i * boardSize + j]; cell.innerHTML = ''; } } currentPlayer = 1; } 在这段代码中，我们遍历棋盘数组和DOM元素，将棋盘状态重置为初始状态，并清空所有棋子。
通过以上步骤，我们实现了一个简单的网页五子棋小游戏。这个游戏包括了棋盘的绘制、棋子的落子、胜负判断以及棋盘重置等功能。虽然这个实现比较简单，但它涵盖了五子棋游戏的核心逻辑。你可以在此基础上进一步扩展，例如添加悔棋功能、计时器、对战等，以提升游戏的趣味性和挑战性。
希望这篇文章对你理解如何使用JavaScript实现网页五子棋小游戏有所帮助！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
