吃豆人（Pac-Man）是一款经典的街机游戏，最早由南梦宫（Namco）在1980年发布。游戏的目标是控制吃豆人在迷宫中吃掉所有豆子，同时躲避幽灵的追捕。本文将详细介绍如何使用JavaScript和HTML来实现一个简化版的吃豆人游戏。
在开始编写代码之前，我们需要规划一下项目的结构。一个典型的吃豆人游戏包含以下几个部分：
我们将创建一个简单的文件夹结构：
pacman-game/ │ ├── index.html ├── style.css └── script.js 首先，我们创建一个简单的HTML文件，用于定义游戏的基本结构。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pac-Man Game</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="game-container"> <div id="game-board"></div> <div id="score">Score: 0</div> </div> <script src="script.js"></script> </body> </html> 在这个HTML文件中，我们定义了一个game-container，其中包含一个game-board用于显示游戏地图，以及一个score用于显示当前得分。
接下来，我们为游戏添加一些基本的样式。
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #000; color: #fff; font-family: Arial, sans-serif; } #game-container { text-align: center; } #game-board { display: grid; grid-template-columns: repeat(19, 20px); grid-template-rows: repeat(19, 20px); gap: 1px; background-color: #000; border: 2px solid #fff; } .cell { width: 20px; height: 20px; background-color: #000; } .wall { background-color: #0000ff; } .dot { background-color: #fff; border-radius: 50%; } .pacman { background-color: #ff0; border-radius: 50%; } .ghost { background-color: #f00; border-radius: 50%; } #score { margin-top: 20px; font-size: 24px; } 在这个CSS文件中，我们定义了游戏的基本样式，包括游戏板的布局、墙壁、豆子、吃豆人和幽灵的样式。
首先，我们需要初始化游戏的基本参数，包括游戏地图、吃豆人和幽灵的位置。
const gameBoard = document.getElementById('game-board'); const scoreDisplay = document.getElementById('score'); let score = 0; let pacman = { x: 9, y: 9 }; let ghosts = [ { x: 8, y: 8 }, { x: 10, y: 8 }, { x: 8, y: 10 }, { x: 10, y: 10 } ]; const map = [ [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1], [1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1], [1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1], [1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1], [1, 1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1], [1, 0, 1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0, 1], [1, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0, 1], [1, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 1], [1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1] ]; 接下来，我们需要根据地图数组来生成游戏地图。
function createGameBoard() { for (let y = 0; y < map.length; y++) { for (let x = 0; x < map[y].length; x++) { const cell = document.createElement('div'); cell.classList.add('cell'); if (map[y][x] === 1) { cell.classList.add('wall'); } else if (map[y][x] === 0) { cell.classList.add('dot'); } gameBoard.appendChild(cell); } } } createGameBoard(); 接下来，我们需要实现吃豆人的移动逻辑。
function movePacman(direction) { let newX = pacman.x; let newY = pacman.y; if (direction === 'ArrowUp') { newY--; } else if (direction === 'ArrowDown') { newY++; } else if (direction === 'ArrowLeft') { newX--; } else if (direction === 'ArrowRight') { newX++; } if (map[newY][newX] !== 1) { pacman.x = newX; pacman.y = newY; checkCollision(); updateGameBoard(); } } document.addEventListener('keydown', (event) => { movePacman(event.key); }); 接下来，我们需要实现幽灵的移动逻辑。
function moveGhosts() { ghosts.forEach(ghost => { const directions = [ { x: ghost.x - 1, y: ghost.y }, { x: ghost.x + 1, y: ghost.y }, { x: ghost.x, y: ghost.y - 1 }, { x: ghost.x, y: ghost.y + 1 } ]; const validDirections = directions.filter(dir => map[dir.y][dir.x] !== 1); const randomDirection = validDirections[Math.floor(Math.random() * validDirections.length)]; ghost.x = randomDirection.x; ghost.y = randomDirection.y; }); checkCollision(); updateGameBoard(); } setInterval(moveGhosts, 500); 我们需要检测吃豆人是否与幽灵或豆子发生碰撞。
function checkCollision() { // Check collision with ghosts ghosts.forEach(ghost => { if (pacman.x === ghost.x && pacman.y === ghost.y) { gameOver(); } }); // Check collision with dots if (map[pacman.y][pacman.x] === 0) { map[pacman.y][pacman.x] = 2; score += 10; scoreDisplay.textContent = `Score: ${score}`; } } 我们需要一个游戏循环来不断更新游戏状态。
function updateGameBoard() { const cells = document.querySelectorAll('.cell'); cells.forEach((cell, index) => { const x = index % 19; const y = Math.floor(index / 19); cell.className = 'cell'; if (map[y][x] === 1) { cell.classList.add('wall'); } else if (map[y][x] === 0) { cell.classList.add('dot'); } if (pacman.x === x && pacman.y === y) { cell.classList.add('pacman'); } ghosts.forEach(ghost => { if (ghost.x === x && ghost.y === y) { cell.classList.add('ghost'); } }); }); } 最后，我们需要处理得分和游戏结束的逻辑。
function gameOver() { alert(`Game Over! Your score is ${score}`); resetGame(); } function resetGame() { score = 0; scoreDisplay.textContent = `Score: ${score}`; pacman = { x: 9, y: 9 }; ghosts = [ { x: 8, y: 8 }, { x: 10, y: 8 }, { x: 8, y: 10 }, { x: 10, y: 10 } ]; map.forEach((row, y) => { row.forEach((cell, x) => { if (cell === 2) { map[y][x] = 0; } }); }); updateGameBoard(); } 以下是完整的代码：
index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pac-Man Game</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="game-container"> <div id="game-board"></div> <div id="score">Score: 0</div> </div> <script src="script.js"></script> </body> </html> style.cssbody { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #000; color: #fff; font-family: Arial, sans-serif; } #game-container { text-align: center; } #game-board { display: grid; grid-template-columns: repeat(19, 20px); grid-template-rows: repeat(19, 20px); gap: 1px; background-color: #000; border: 2px solid #fff; } .cell { width: 20px; height: 20px; background-color: #000; } .wall { background-color: #0000ff; } .dot { background-color: #fff; border-radius: 50%; } .pacman { background-color: #ff0; border-radius: 50%; } .ghost { background-color: #f00; border-radius: 50%; } #score { margin-top: 20px; font-size: 24px; } script.js”`javascript const gameBoard = document.getElementById(‘game-board’); const scoreDisplay = document.getElementById(‘score’); let score = 0; let pacman = { x: 9, y: 9 }; let ghosts = [ { x: 8, y: 8 }, { x: 10, y: 8 }, { x: 8, y: 10 }, { x: 10, y: 10 } ]; const map = [ [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1], [1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1], [1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1], [1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1], [1, 1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1], [1, 0, 1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0, 1], [1, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0, 1], [1, 0, 1, 1, 0, 1,
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
