行业资讯

JS+HTML怎么实现经典吃豆人游戏

发布时间：2022-04-16 15:37:42 作者：iii
来源：亿速云 阅读：189

JS+HTML怎么实现经典吃豆人游戏

目录

  1. 引言
  2. 项目结构
  3. HTML结构
  4. CSS样式
  5. JavaScript逻辑
  6. 完整代码
  7. 总结

引言

吃豆人（Pac-Man）是一款经典的街机游戏，最早由南梦宫（Namco）在1980年发布。游戏的目标是控制吃豆人在迷宫中吃掉所有豆子，同时躲避幽灵的追捕。本文将详细介绍如何使用JavaScript和HTML来实现一个简化版的吃豆人游戏。

项目结构

在开始编写代码之前，我们需要规划一下项目的结构。一个典型的吃豆人游戏包含以下几个部分：

我们将创建一个简单的文件夹结构：

pacman-game/
│
├── index.html
├── style.css
└── script.js

HTML结构

首先，我们创建一个简单的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用于显示当前得分。

CSS样式

接下来，我们为游戏添加一些基本的样式。

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文件中，我们定义了游戏的基本样式，包括游戏板的布局、墙壁、豆子、吃豆人和幽灵的样式。

JavaScript逻辑

5.1 游戏初始化

首先，我们需要初始化游戏的基本参数，包括游戏地图、吃豆人和幽灵的位置。

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]
];

5.2 游戏地图

接下来，我们需要根据地图数组来生成游戏地图。

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();

5.3 吃豆人

接下来，我们需要实现吃豆人的移动逻辑。

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);
});

5.4 幽灵

接下来，我们需要实现幽灵的移动逻辑。

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);

5.5 碰撞检测

我们需要检测吃豆人是否与幽灵或豆子发生碰撞。

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}`;
    }
}

5.6 游戏循环

我们需要一个游戏循环来不断更新游戏状态。

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');
            }
        });
    });
}

5.7 得分与游戏结束

最后，我们需要处理得分和游戏结束的逻辑。

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.css

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;
}

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,

推荐阅读：
  1. 基于js的吃方块小游戏
  2. python如何实现吃苹果小游戏

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

js html

上一篇：Air怎么实现Go程序实时热重载使用

下一篇：Go怎么编写Makefile规则文件

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号