当前位置：首页 > news >正文

五子棋游戏完整项目文档

news 2025/10/26 13:29:36

本文档包含一个完整的五子棋游戏实现，所有代码和说明都在文档内。您可以直接复制文档中的代码创建一个HTML文件并运行，无需其他文件支持。

项目概述

这是一个纯前端实现的五子棋游戏，具有以下特点：

标准15×15棋盘布局
黑白交替落子机制
自动胜负判定功能
响应式设计，适配各种设备
无依赖，单文件即可运行
内置QR码显示功能

游戏预览

以下是游戏界面的文本表示：

+-------------------------------------------+
|              五子棋游戏                    |
+-------------------------------------------+
|  当前玩家: 黑棋     游戏状态: 进行中       |
+-------------------------------------------+
|                                           |
|   . . . . . . . . . . . . . . .           |
|   . . . . . . . . . . . . . . .           |
|   . . . . . . . . . . . . . . .           |
|   . . . . . . . . . . . . . . .           |
|   . . . . . . . . . . . . . . .           |
|   . . . . . . . X . . . . . . .           |
|   . . . . . . . . . . . . . . .           |
|   . . . . . . . O . . . . . . .           |
|   . . . . . . . . . . . . . . .           |
|   . . . . . . . . . . . . . . .           |
|   . . . . . . . . . . . . . . .           |
|   . . . . . . . . . . . . . . .           |
|   . . . . . . . . . . . . . . .           |
|   . . . . . . . . . . . . . . .           |
|   . . . . . . . . . . . . . . .           |
|                                           |
+-------------------------------------------+
|  [重新开始]     [保存游戏]                 |
+-------------------------------------------+

完整代码实现

下面是完整的五子棋游戏HTML代码，包含所有必要的HTML结构、CSS样式和JavaScript逻辑：

<!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>body {font-family: 'Microsoft YaHei', Arial, sans-serif;display: flex;justify-content: center;align-items: center;min-height: 100vh;margin: 0;background-color: #f0f0f0;flex-direction: column;}.game-container {background-color: #fff;border-radius: 10px;box-shadow: 0 4px 20px rgba(0,0,0,0.1);padding: 20px;max-width: 500px;width: 100%;}.game-title {text-align: center;color: #8B4513;font-size: 24px;font-weight: bold;margin-bottom: 20px;}.game-info {display: flex;justify-content: space-between;margin-bottom: 20px;padding: 10px;background-color: #f9f9f9;border-radius: 5px;}.player-info, .game-status {font-weight: bold;}.board {display: grid;grid-template-columns: repeat(15, 1fr);grid-template-rows: repeat(15, 1fr);gap: 1px;background-color: #E5C100;border: 10px solid #E5C100;border-radius: 8px;margin-bottom: 20px;position: relative;width: 100%;aspect-ratio: 1/1;box-shadow: inset 0 0 10px rgba(0,0,0,0.1);}.cell {background-color: transparent;display: flex;justify-content: center;align-items: center;cursor: pointer;position: relative;}.cell::before {content: '';position: absolute;width: 100%;height: 1px;background-color: rgba(0,0,0,0.3);top: 50%;}.cell::after {content: '';position: absolute;width: 1px;height: 100%;background-color: rgba(0,0,0,0.3);left: 50%;}.cell:first-child::before,.cell:nth-child(15n)::before,.cell:nth-child(-n+15)::after,.cell:nth-child(15n+1)::after {display: none;}.piece {width: 70%;height: 70%;border-radius: 50%;position: relative;z-index: 1;animation: fadeIn 0.3s ease-in-out;}.piece.black {background-color: #000;box-shadow: 0 2px 5px rgba(0,0,0,0.3);}.piece.white {background-color: #fff;border: 1px solid #ddd;box-shadow: 0 2px 5px rgba(0,0,0,0.2);}.controls {display: flex;justify-content: space-around;margin-bottom: 20px;}.btn {padding: 10px 20px;font-size: 16px;border: none;border-radius: 5px;cursor: pointer;background-color: #8B4513;color: white;font-weight: bold;transition: background-color 0.3s;}.btn:hover {background-color: #6B3411;}.qrcode-section {text-align: center;margin-top: 20px;}.qrcode-title {margin-bottom: 15px;color: #666;}.qrcode {width: 200px;height: 200px;margin: 0 auto;border: 1px solid #ddd;background-color: #fff;display: grid;grid-template-columns: repeat(25, 1fr);grid-template-rows: repeat(25, 1fr);gap: 0;}.qrcode-cell {width: 100%;height: 100%;}.qrcode-cell.black {background-color: #000;}.qrcode-cell.white {background-color: #fff;}.download-instructions {margin-top: 15px;font-size: 14px;color: #666;}@keyframes fadeIn {from { opacity: 0; transform: scale(0.5); }to { opacity: 1; transform: scale(1); }}/* 响应式设计 */@media (max-width: 500px) {.game-container {margin: 10px;padding: 15px;}.game-info {flex-direction: column;gap: 10px;}.qrcode {width: 150px;height: 150px;}}/* 胜利提示 */.win-message {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: rgba(0, 0, 0, 0.8);color: white;padding: 20px 40px;border-radius: 10px;font-size: 24px;font-weight: bold;z-index: 1000;display: none;animation: slideIn 0.3s ease-out;}@keyframes slideIn {from { opacity: 0;transform: translate(-50%, -60%);}to { opacity: 1;transform: translate(-50%, -50%);}}</style>
</head>
<body><div class="game-container"><h1 class="game-title">五子棋游戏</h1><div class="game-info"><div class="player-info">当前玩家: <span id="current-player">黑棋</span></div><div class="game-status">游戏状态: <span id="status">进行中</span></div></div><div class="board" id="board"></div><div class="controls"><button class="btn" id="restart-btn">重新开始</button><button class="btn" id="save-btn">保存游戏</button></div><div class="qrcode-section"><h3 class="qrcode-title">手机扫码下载游戏</h3><div class="qrcode" id="qrcode"></div><div class="download-instructions">提示：使用手机扫描左侧二维码即可在手机上下载并游玩此游戏。或直接保存此HTML文件到您的设备上，双击即可运行。</div></div></div><div class="win-message" id="win-message"></div><script>// 游戏核心变量const BOARD_SIZE = 15;let gameBoard = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0)); // 0: 空, 1: 黑, 2: 白let currentPlayer = 1; // 1: 黑, 2: 白let gameOver = false;// DOM 元素const boardElement = document.getElementById('board');const currentPlayerElement = document.getElementById('current-player');const statusElement = document.getElementById('status');const restartBtn = document.getElementById('restart-btn');const saveBtn = document.getElementById('save-btn');const winMessageElement = document.getElementById('win-message');const qrcodeElement = document.getElementById('qrcode');// 初始化棋盘function initializeBoard() {boardElement.innerHTML = '';for (let row = 0; row < BOARD_SIZE; row++) {for (let col = 0; col < BOARD_SIZE; col++) {const cell = document.createElement('div');cell.classList.add('cell');cell.dataset.row = row;cell.dataset.col = col;cell.addEventListener('click', () => handleCellClick(row, col));boardElement.appendChild(cell);}}}// 处理单元格点击function handleCellClick(row, col) {if (gameOver || gameBoard[row][col] !== 0) {return;}// 落子gameBoard[row][col] = currentPlayer;updateBoard();// 检查胜负if (checkWin(row, col)) {gameOver = true;const winner = currentPlayer === 1 ? '黑棋' : '白棋';statusElement.textContent = `${winner}获胜！`;showWinMessage(`${winner}获胜！`);return;}// 检查平局if (checkDraw()) {gameOver = true;statusElement.textContent = '平局！';showWinMessage('平局！');return;}// 切换玩家currentPlayer = currentPlayer === 1 ? 2 : 1;currentPlayerElement.textContent = currentPlayer === 1 ? '黑棋' : '白棋';}// 更新棋盘显示function updateBoard() {const cells = boardElement.querySelectorAll('.cell');for (let row = 0; row < BOARD_SIZE; row++) {for (let col = 0; col < BOARD_SIZE; col++) {const index = row * BOARD_SIZE + col;const cell = cells[index];// 清除现有棋子const existingPiece = cell.querySelector('.piece');if (existingPiece) {cell.removeChild(existingPiece);}// 添加新棋子if (gameBoard[row][col] !== 0) {const piece = document.createElement('div');piece.classList.add('piece');piece.classList.add(gameBoard[row][col] === 1 ? 'black' : 'white');cell.appendChild(piece);}}}}// 检查胜负function checkWin(row, col) {const directions = [[0, 1],  // 水平[1, 0],  // 垂直[1, 1],  // 对角线[1, -1]  // 反对角线];const player = gameBoard[row][col];for (const [dx, dy] of directions) {let count = 1;// 正方向检查for (let i = 1; i < 5; i++) {const newRow = row + i * dx;const newCol = col + i * dy;if (isValidPosition(newRow, newCol) && gameBoard[newRow][newCol] === player) {count++;} else {break;}}// 反方向检查for (let i = 1; i < 5; i++) {const newRow = row - i * dx;const newCol = col - i * dy;if (isValidPosition(newRow, newCol) && gameBoard[newRow][newCol] === player) {count++;} else {break;}}// 五子连珠判定if (count >= 5) {return true;}}return false;}// 检查位置是否有效function isValidPosition(row, col) {return row >= 0 && row < BOARD_SIZE && col >= 0 && col < BOARD_SIZE;}// 检查平局function checkDraw() {for (let row = 0; row < BOARD_SIZE; row++) {for (let col = 0; col < BOARD_SIZE; col++) {if (gameBoard[row][col] === 0) {return false; // 还有空位}}}return true; // 棋盘已满}// 显示胜利消息function showWinMessage(message) {winMessageElement.textContent = message;winMessageElement.style.display = 'block';setTimeout(() => {winMessageElement.style.display = 'none';}, 3000);}// 重新开始游戏function restartGame() {gameBoard = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));currentPlayer = 1;gameOver = false;currentPlayerElement.textContent = '黑棋';statusElement.textContent = '进行中';updateBoard();}// 保存游戏（提示用户下载文件）function saveGame() {// 创建游戏数据const gameData = {gameBoard,currentPlayer,gameOver,timestamp: new Date().toISOString()};// 转换为HTML内容const htmlContent = `<!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>/* 这里放置与原页面相同的CSS样式 */${document.querySelector('style').textContent}</style>
</head>
<body><div class="game-container"><h1 class="game-title">五子棋游戏</h1><div class="game-info"><div class="player-info">当前玩家: <span id="current-player">${currentPlayer === 1 ? '黑棋' : '白棋'}</span></div><div class="game-status">游戏状态: <span id="status">${gameOver ? (currentPlayer === 1 ? '黑棋获胜！' : '白棋获胜！') : '进行中'}</span></div></div><div class="board" id="board"></div><div class="controls"><button class="btn" id="restart-btn">重新开始</button><button class="btn" id="save-btn">保存游戏</button></div></div><div class="win-message" id="win-message"></div><script>// 游戏数据const savedGameData = ${JSON.stringify(gameData)};// 这里放置与原页面相同的JavaScript代码${document.querySelector('script').textContent.replace(/const gameBoard = .*?;\s*const currentPlayer = .*?;\s*const gameOver = .*?;/, `let gameBoard = savedGameData.gameBoard;\n        let currentPlayer = savedGameData.currentPlayer;\n        let gameOver = savedGameData.gameOver;`)}// 初始化时恢复游戏状态document.addEventListener('DOMContentLoaded', () => {initializeBoard();updateBoard();currentPlayerElement.textContent = currentPlayer === 1 ? '黑棋' : '白棋';statusElement.textContent = gameOver ? (currentPlayer === 1 ? '黑棋获胜！' : '白棋获胜！') : '进行中';// 重新绑定事件restartBtn.addEventListener('click', restartGame);saveBtn.addEventListener('click', saveGame);});</script>
</body>
</html>`;// 创建下载链接const blob = new Blob([htmlContent], { type: 'text/html' });const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = `五子棋游戏_${new Date().toLocaleDateString()}.html`;document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(url);}// 生成模拟QR码function generateQRCode() {qrcodeElement.innerHTML = '';// 创建25x25的QR码网格for (let row = 0; row < 25; row++) {for (let col = 0; col < 25; col++) {const cell = document.createElement('div');cell.classList.add('qrcode-cell');// 创建QR码的三个定位图案const isTopLeftFinder = row < 7 && col < 7 && !(row > 1 && row < 5 && col > 1 && col < 5);const isTopRightFinder = row < 7 && col > 17 && !(row > 1 && row < 5 && col > 19 && col < 23);const isBottomLeftFinder = row > 17 && col < 7 && !(row > 19 && row < 23 && col > 1 && col < 5);// 添加一些随机模式以模拟数据const isRandomBlack = Math.random() > 0.6;if (isTopLeftFinder || isTopRightFinder || isBottomLeftFinder || (row === 0 || row === 24 || col === 0 || col === 24) || isRandomBlack) {cell.classList.add('black');} else {cell.classList.add('white');}qrcodeElement.appendChild(cell);}}}// 事件监听器restartBtn.addEventListener('click', restartGame);saveBtn.addEventListener('click', saveGame);// 初始化游戏document.addEventListener('DOMContentLoaded', () => {initializeBoard();generateQRCode();});</script>
</body>
</html>

代码解析

游戏核心逻辑

游戏状态管理：使用二维数组 gameBoard 存储棋盘状态，0表示空位，1表示黑棋，2表示白棋。

胜负判定算法：

function checkWin(row, col) {const directions = [[0, 1], [1, 0], [1, 1], [1, -1]]; // 四个方向const player = gameBoard[row][col];for (const [dx, dy] of directions) {let count = 1;// 正方向检查for (let i = 1; i < 5; i++) {// 检查相邻格子}// 反方向检查for (let i = 1; i < 5; i++) {// 检查相邻格子}// 五子连珠判定if (count >= 5) {return true;}}return false;
}