在这篇文章中，我们将逐段解析一个简单的“吃豆人”游戏代码，帮助大家理解其中的实现逻辑。这款游戏通过HTML5的<canvas>元素和JavaScript来开发，虽然代码量不大，但它展示了如何实现一个基础的小游戏。本文将逐步介绍游戏的代码构成，带大家一同揭开其背后的秘密。
游戏概述与核心逻辑
“吃豆人”游戏是一款经典的街机游戏。在这个简化版的实现中，玩家控制一个黄色的圆形（吃豆人）在画布上移动，目标是吃掉随机生成的红色豆子。每当吃豆人与豆子发生碰撞，豆子的位置会重新生成，等待玩家再次捕捉。
案例体验地址：https://haiyong.site/moyu/dou.html
游戏案例汇总：https://haiyong.site/moyu/
源码下载
如果大家希望深入研究代码，可以通过以下链接下载完整的源码
百度网盘：https://pan.baidu.com/s/10v7IhG1js4beKnsmQ9vL1Q?pwd=0520夸克网盘：https://pan.quark.cn/s/3c0d205bbdcb1. 设置画布
首先，我们需要在网页上设置一个画布来绘制游戏的所有元素。这部分代码设置了画布的大小，并获取了绘图的上下文。
const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight;
解释：
canvas 获取了HTML中的<canvas>元素，这是游戏的画布。ctx 是获取到的2D绘图上下文，所有的图形绘制都通过它来完成。canvas.width 和 canvas.height 将画布的宽度和高度设置为窗口的大小，以确保游戏在不同设备上能够全屏显示。2. 定义玩家和豆子
接下来，我们定义玩家（吃豆人）和豆子在游戏中的属性。这包括它们的初始位置、尺寸、速度等等。
let player = { x: canvas.width / 2, y: canvas.height / 2, radius: 20, speed: 5, dx: 0, dy: 0 }; let bean = { x: Math.random() * canvas.width, y: Math.random() * canvas.height, radius: 10 };
解释：
player 对象代表吃豆人，包含了位置（x和y）、半径（大小）、速度（speed），以及当前的移动方向（dx和dy）。bean 对象代表游戏中的豆子，它的初始位置是随机的，通过 Math.random() 来设置在画布上的随机位置。3. 绘制玩家和豆子
现在我们需要在画布上绘制玩家和豆子。通过以下函数，每次更新时我们都绘制这些元素。
function drawPlayer() { ctx.beginPath(); ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2); ctx.fillStyle = 'yellow'; ctx.fill(); ctx.closePath(); } function drawBean() { ctx.beginPath(); ctx.arc(bean.x, bean.y, bean.radius, 0, Math.PI * 2); ctx.fillStyle = 'red'; ctx.fill(); ctx.closePath(); }
解释：
drawPlayer() 函数使用 ctx.arc 在画布上绘制一个圆形，代表吃豆人，并设置其颜色为黄色。drawBean() 函数同样使用 ctx.arc 绘制一个圆形，代表豆子，颜色为红色。4. 更新游戏状态
为了让游戏动起来，我们需要在每一帧更新玩家的位置，并重新绘制画布。这通过一个循环来实现。
function update() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawPlayer(); drawBean(); player.x += player.dx; player.y += player.dy; requestAnimationFrame(update); }
解释：
ctx.clearRect 用于清除上一帧的画布内容，避免残影。player.x += player.dx 和 player.y += player.dy 更新玩家的位置，使得玩家可以根据当前的方向和速度移动。requestAnimationFrame(update) 实现一个动画循环，不断调用 update() 以重绘画布。5. 处理键盘输入
为了控制玩家的移动，我们需要监听键盘事件，当按下或释放方向键时，更新玩家的移动方向。
function moveRight() { player.dx = player.speed; } function moveLeft() { player.dx = -player.speed; } function moveUp() { player.dy = -player.speed; } function moveDown() { player.dy = player.speed; } function keyDown(e) { if (e.key === 'Right' || e.key === 'ArrowRight') { moveRight(); } else if (e.key === 'Left' || e.key === 'ArrowLeft') { moveLeft(); } else if (e.key === 'Up' || e.key === 'ArrowUp') { moveUp(); } else if (e.key === 'Down' || e.key === 'ArrowDown') { moveDown(); } } function keyUp(e) { if ( e.key === 'Right' || e.key === 'ArrowRight' || e.key === 'Left' || e.key === 'ArrowLeft' ) { player.dx = 0; } else if ( e.key === 'Up' || e.key === 'ArrowUp' || e.key === 'Down' || e.key === 'ArrowDown' ) { player.dy = 0; } } document.addEventListener('keydown', keyDown); document.addEventListener('keyup', keyUp);
解释：
moveRight()、moveLeft()、moveUp() 和 moveDown() 控制玩家的移动方向，通过改变 dx 和 dy 的值来实现。keyDown(e) 监听键盘按下事件，根据按键的不同，调用不同的移动函数。keyUp(e) 监听键盘释放事件，当玩家松开方向键时，停止移动。6. 检测碰撞
最后，我们需要检测吃豆人与豆子的碰撞，当碰撞发生时，游戏应该执行相应的逻辑，比如重新生成一个豆子。
function detectCollision() { const dist = Math.hypot(player.x - bean.x, player.y - bean.y); if (dist < player.radius + bean.radius) { bean.x = Math.random() * canvas.width; bean.y = Math.random() * canvas.height; } }
解释：
detectCollision() 使用了 Math.hypot() 来计算吃豆人和豆子之间的距离。如果这个距离小于两个圆的半径之和，说明发生了碰撞。一旦发生碰撞，豆子的位置将重新随机生成。7. 启动游戏
现在我们把所有的功能整合在一起，通过调用 update() 和 detectCollision() 来启动游戏。
function gameLoop() { update(); detectCollision(); requestAnimationFrame(gameLoop); } gameLoop();
解释：
gameLoop() 是游戏的主循环，负责不断更新画面并检测碰撞。requestAnimationFrame(gameLoop) 保持循环运行，使得游戏持续进行。通过以上步骤，我们完整地实现了一个简单的“吃豆人”游戏。这个游戏虽然简单，但涵盖了HTML5游戏开发的基本要素，如绘图、动画、输入处理和碰撞检测。希望通过这篇文章，你能够理解这些基本概念，并在此基础上开发出更复杂、更有趣的游戏！
欢迎在评论区交流讨论！
