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

纯前端js完成游戏吃豆人

article 2024/11/24 12:53:27

纯前端代码html,css,JavaScript,jquery实现的吃豆人游戏，代码下载到本地，双击index.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>

主要逻辑

  1. 游戏初始化
$(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);
});
  1. 豆子生成逻辑
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);
        }
    }
}
  1. 玩家控制逻辑
$(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();
});
  1. 鬼魂追踪逻辑
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);
  1. 碰撞检测逻辑
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();
    }
}
  1. 游戏结束逻辑
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();
}

总结

主要游戏机制：

  1. 移动系统
  • 使用方向键控制吃豆人移动
  • 每次移动30像素
  • 限制在游戏边界内移动
  1. 计分系统
  • 吃到一个豆子得10分
  • 实时更新显示分数
  1. 鬼魂
  • 每200毫秒更新一次位置
  • 朝着吃豆人的方向移动
  • 移动速度固定为10像素
  1. 胜负判定
  • 胜利条件：吃掉所有豆子
  • 失败条件：被鬼魂碰到
  1. 游戏状态管理
  • 使用isGameOver标志控制游戏状态
  • 游戏结束时停止所有移动和交互
  • 提供重新开始功能

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


http://www.kler.cn/a/407190.html

相关文章：

  • C语言的文件函数
  • map和redis关系
  • 工具学习_Docker
  • 内外网交换过程中可能遇到的安全风险有哪些？
  • 自制游戏：监狱逃亡
  • Kafka 分区分配及再平衡策略深度解析与消费者事务和数据积压的简单介绍
  • Rust 力扣 - 746. 使用最小花费爬楼梯
  • redis的大key和热key问题解决方案
  • 数据结构--B树
  • 电机绕组短路故障如何维修？
  • 常见面试题----深入源码理解MQ长轮询优化机制
  • 电脑系统重装小白教程
  • 开源宝藏：Smart-Admin 重复提交防护的 AOP 切面实现详解
  • 编程之路，从0开始：文件操作（1）
  • 如何在Python中进行数学建模？
  • python c++ opencv打开图片路径写法
  • RK356x-10：串口(uart)配置与调试
  • 多算法模型（BI-LSTM GRU Mamba ekan xgboost）实现功率预测
  • ubuntu安装Eclipse
  • 如何在React中服务器操作提交表单后（不）重置表单？
  • Next.js 独立开发教程（三）：CSS 样式的完整指南
  • OpenHands：开源AI编程工具的新贵，让编程更自然
  • Rust学习（七）：智能指针
  • Vue前端进阶面试题目（二）
  • .NET9 - 新功能体验（二）
  • （udp）网络编程套接字Linux（整理）