纯前端js完成游戏吃豆人

纯前端代码html,css,JavaScript,jquery实现的吃豆人游戏，代码下载到本地，双击index.html文件即可运行。

项目展示

代码展示

代码文件

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>吃豆人游戏</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: #1a1a1a;
            font-family: Arial, sans-serif;
        }

        .game-container {
            background: #000;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }

        .game-header {
            text-align: center;
            margin-bottom: 20px;
            color: #FFD700;
        }

        .game-title {
            font-size: 24px;
            margin: 0 0 10px 0;
        }

        .score {
            font-size: 20px;
            color: #FFD700;
            margin-bottom: 10px;
        }

        #gameBoard {
            width: 600px;
            height: 600px;
            border: 2px solid #333;
            position: relative;
            background: #000;
            border-radius: 5px;
        }

        .pacman {
            width: 30px;
            height: 30px;
            background: #FFD700;
            border-radius: 50%;
            position: absolute;
            transition: all 0.1s;
        }

        .dot {
            width: 10px;
            height: 10px;
            background: white;
            border-radius: 50%;
            position: absolute;
            box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
        }

        .ghost {
            width: 30px;
            height: 30px;
            background: #FF0000;
            position: absolute;
            border-radius: 15px 15px 0 0;
            transition: all 0.1s;
        }

        #gameOver {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .gameOverContent {
            background: #fff;
            padding: 30px 50px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }

        .gameOverContent h2 {
            color: #333;
            margin: 0 0 20px 0;
            font-size: 28px;
        }

        #restartBtn {
            padding: 12px 30px;
            font-size: 18px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            margin-top: 20px;
            transition: background 0.3s;
        }

        #restartBtn:hover {
            background: #45a049;
        }

        .game-instructions {
            color: #888;
            margin-top: 20px;
            text-align: center;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div class="game-header">
            <h1 class="game-title">吃豆人游戏</h1>
            <div class="score">分数: <span id="scoreValue">0</span></div>
        </div>
        <div id="gameBoard"></div>
        <div class="game-instructions">
            使用方向键 ↑ ↓ ← → 控制吃豆人移动
        </div>
    </div>

    <div id="gameOver" style="display: none;">
        <div class="gameOverContent">
            <h2>游戏结束</h2>
            <p>最终得分：<span id="finalScore">0</span></p>
            <button id="restartBtn">重新开始</button>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            let score = 0;
            let pacmanX = 30;
            let pacmanY = 30;
            let ghostX = 270;
            let ghostY = 270;
            // 添加游戏状态标志
            let isGameOver = false;
            // 添加鬼魂移动定时器变量
            let ghostInterval;
            
            // 创建吃豆人
            const pacman = $('<div class="pacman"></div>');
            $('#gameBoard').append(pacman);
            
            // 创建鬼魂
            const ghost = $('<div class="ghost"></div>');
            $('#gameBoard').append(ghost);
            
            // 创建豆子
            function createDots() {
                for(let i = 0; i < 10; i++) {
                    for(let j = 0; j < 10; j++) {
                        const dot = $('<div class="dot"></div>');
                        dot.css({
                            left: i * 60 + 15,
                            top: j * 60 + 15
                        });
                        $('#gameBoard').append(dot);
                    }
                }
            }
            
            createDots();
            
            // 修改键盘控制，添加游戏状态检查
            $(document).keydown(function(e) {
                // 如果游戏结束，不再响应键盘操作
                if (isGameOver) return;
                
                switch(e.keyCode) {
                    case 37: // 左
                        pacmanX = Math.max(0, pacmanX - 30);
                        break;
                    case 38: // 上
                        pacmanY = Math.max(0, pacmanY - 30);
                        break;
                    case 39: // 右
                        pacmanX = Math.min(570, pacmanX + 30);
                        break;
                    case 40: // 下
                        pacmanY = Math.min(570, pacmanY + 30);
                        break;
                }
                
                pacman.css({left: pacmanX, top: pacmanY});
                checkCollision();
            });
            
            // 修改碰撞检测函数
            function checkCollision() {
                if (isGameOver) return;
                
                // 检测与豆子的碰撞
                $('.dot').each(function() {
                    const dotX = $(this).position().left;
                    const dotY = $(this).position().top;
                    
                    if (Math.abs(pacmanX - dotX) < 20 && Math.abs(pacmanY - dotY) < 20) {
                        $(this).remove();
                        score += 10;
                        $('#scoreValue').text(score);
                        
                        // 检查是否所有豆子都被吃完
                        if ($('.dot').length === 0) {
                            gameWin();
                        }
                    }
                });
                
                // 检测与鬼魂的碰撞
                if (Math.abs(pacmanX - ghostX) < 30 && Math.abs(pacmanY - ghostY) < 30) {
                    gameOver();
                }
            }
            
            // 添加游戏胜利函数
            function gameWin() {
                isGameOver = true;
                clearInterval(ghostInterval);
                $('#gameOver .gameOverContent h2').text('恭喜胜利！');
                $('#finalScore').text(score);
                $('#gameOver').show();
            }
            
            // 修改游戏结束函数
            function gameOver() {
                isGameOver = true;
                clearInterval(ghostInterval);
                $('#gameOver .gameOverContent h2').text('游戏结束');
                $('#finalScore').text(score);
                $('#gameOver').show();
            }
            
            // 修改重新开始按钮事件
            $('#restartBtn').click(function() {
                isGameOver = false;
                location.reload();
            });
            
            // 修改鬼魂移动，使用变量存储定时器
            ghostInterval = setInterval(function() {
                // 如果游戏结束，不再移动鬼魂
                if (isGameOver) return;
                
                if (ghostX < pacmanX) ghostX += 10;
                if (ghostX > pacmanX) ghostX -= 10;
                if (ghostY < pacmanY) ghostY += 10;
                if (ghostY > pacmanY) ghostY -= 10;
                
                ghost.css({left: ghostX, top: ghostY});
                checkCollision();
            }, 200);
        });
    </script>
</body>
</html>

主要逻辑

游戏初始化

javascript 复制代码

$(document).ready(function() {
    // 初始化变量
    let score = 0;                    // 游戏分数
    let pacmanX = 30, pacmanY = 30;   // 吃豆人初始位置
    let ghostX = 270, ghostY = 270;   // 鬼魂初始位置
    let isGameOver = false;           // 游戏状态
    let ghostInterval;                // 鬼魂移动定时器
    
    // 创建游戏元素
    const pacman = $('<div class="pacman"></div>');
    const ghost = $('<div class="ghost"></div>');
    $('#gameBoard').append(pacman, ghost);
});

豆子生成逻辑

javascript 复制代码

function createDots() {
    // 在10x10的网格上生成豆子
    for(let i = 0; i < 10; i++) {
        for(let j = 0; j < 10; j++) {
            const dot = $('<div class="dot"></div>');
            dot.css({
                left: i * 60 + 15,
                top: j * 60 + 15
            });
            $('#gameBoard').append(dot);
        }
    }
}

玩家控制逻辑

javascript 复制代码

$(document).keydown(function(e) {
    if (isGameOver) return;
    
    switch(e.keyCode) {
        case 37: // 左
            pacmanX = Math.max(0, pacmanX - 30);
            break;
        case 38: // 上
            pacmanY = Math.max(0, pacmanY - 30);
            break;
        case 39: // 右
            pacmanX = Math.min(570, pacmanX + 30);
            break;
        case 40: // 下
            pacmanY = Math.min(570, pacmanY + 30);
            break;
    }
    
    // 更新吃豆人位置
    pacman.css({left: pacmanX, top: pacmanY});
    // 检查碰撞
    checkCollision();
});

鬼魂追踪逻辑

javascript 复制代码

ghostInterval = setInterval(function() {
    if (isGameOver) return;
    
    // 简单的追踪算法
    if (ghostX < pacmanX) ghostX += 10;
    if (ghostX > pacmanX) ghostX -= 10;
    if (ghostY < pacmanY) ghostY += 10;
    if (ghostY > pacmanY) ghostY -= 10;
    
    // 更新鬼魂位置
    ghost.css({left: ghostX, top: ghostY});
    checkCollision();
}, 200);

碰撞检测逻辑

javascript 复制代码

function checkCollision() {
    if (isGameOver) return;
    
    // 检测与豆子的碰撞
    $('.dot').each(function() {
        const dotX = $(this).position().left;
        const dotY = $(this).position().top;
        
        if (Math.abs(pacmanX - dotX) < 20 && Math.abs(pacmanY - dotY) < 20) {
            $(this).remove();         // 移除被吃掉的豆子
            score += 10;              // 增加分数
            $('#scoreValue').text(score);
            
            // 检查胜利条件
            if ($('.dot').length === 0) {
                gameWin();
            }
        }
    });
    
    // 检测与鬼魂的碰撞
    if (Math.abs(pacmanX - ghostX) < 30 && Math.abs(pacmanY - ghostY) < 30) {
        gameOver();
    }
}

游戏结束逻辑

javascript 复制代码

function gameOver() {
    isGameOver = true;
    clearInterval(ghostInterval);     // 停止鬼魂移动
    $('#gameOver .gameOverContent h2').text('游戏结束');
    $('#finalScore').text(score);
    $('#gameOver').show();
}

function gameWin() {
    isGameOver = true;
    clearInterval(ghostInterval);
    $('#gameOver .gameOverContent h2').text('恭喜胜利！');
    $('#finalScore').text(score);
    $('#gameOver').show();
}

总结

主要游戏机制：

移动系统

使用方向键控制吃豆人移动
每次移动30像素
限制在游戏边界内移动

计分系统

吃到一个豆子得10分
实时更新显示分数

鬼魂

每200毫秒更新一次位置
朝着吃豆人的方向移动
移动速度固定为10像素

胜负判定

胜利条件：吃掉所有豆子
失败条件：被鬼魂碰到

游戏状态管理

使用isGameOver标志控制游戏状态
游戏结束时停止所有移动和交互
提供重新开始功能

这个游戏的核心是通过不断的位置更新和碰撞检测来实现游戏逻辑，使用jQuery简化了DOM操作和事件处理。