html吃豆人游戏代码
时间: 2023-06-30 14:16:15 浏览: 82
以下是一个简单的 HTML 吃豆人游戏代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Pacman Game</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000;
}
canvas {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="480" height="320"></canvas>
<script>
// 获取画布元素
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 定义吃豆人和豆子的位置
var pacman = {
x: canvas.width / 2,
y: canvas.height / 2,
size: 32,
speed: 5
};
var dots = [
{x: 50, y: 50},
{x: 100, y: 50},
{x: 150, y: 50},
{x: 200, y: 50},
{x: 250, y: 50},
{x: 300, y: 50},
{x: 350, y: 50},
{x: 400, y: 50},
{x: 50, y: 100},
{x: 100, y: 100},
{x: 150, y: 100},
{x: 200, y: 100},
{x: 250, y: 100},
{x: 300, y: 100},
{x: 350, y: 100},
{x: 400, y: 100},
{x: 50, y: 150},
{x: 100, y: 150},
{x: 150, y: 150},
{x: 200, y: 150},
{x: 250, y: 150},
{x: 300, y: 150},
{x: 350, y: 150},
{x: 400, y: 150}
];
// 绘制吃豆人和豆子
function draw() {
// 绘制背景
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制吃豆人
ctx.beginPath();
ctx.arc(pacman.x, pacman.y, pacman.size, 0.25 * Math.PI, 1.25 * Math.PI);
ctx.lineTo(pacman.x, pacman.y);
ctx.closePath();
ctx.fillStyle = "#FF0";
ctx.fill();
// 绘制豆子
for (var i = 0; i < dots.length; i++) {
ctx.beginPath();
ctx.arc(dots[i].x, dots[i].y, 5, 0, 2 * Math.PI);
ctx.closePath();
ctx.fillStyle = "#FFF";
ctx.fill();
}
}
// 更新吃豆人的位置
function update() {
// 根据按键更新吃豆人的位置
if (keys[37]) { // 左箭头键
pacman.x -= pacman.speed;
}
if (keys[38]) { // 上箭头键
pacman.y -= pacman.speed;
}
if (keys[39]) { // 右箭头键
pacman.x += pacman.speed;
}
if (keys[40]) { // 下箭头键
pacman.y += pacman.speed;
}
// 检查吃豆人是否碰到豆子
for (var i = 0; i < dots.length; i++) {
var dot = dots[i];
if (Math.sqrt(Math.pow(dot.x - pacman.x, 2) + Math.pow(dot.y - pacman.y, 2)) < pacman.size) {
// 如果吃豆人碰到了豆子,就将豆子从 dots 数组中删除
dots.splice(i, 1);
}
}
}
// 定义按键事件处理函数
var keys = {};
document.addEventListener("keydown", function(event) {
keys[event.keyCode] = true;
});
document.addEventListener("keyup", function(event) {
delete keys[event.keyCode];
});
// 定义游戏循环
function loop() {
update();
draw();
requestAnimationFrame(loop);
}
// 开始游戏循环
requestAnimationFrame(loop);
</script>
</body>
</html>
```
这段代码实现了一个简单的吃豆人游戏,包括绘制吃豆人和豆子、更新吃豆人的位置、检查吃豆人是否碰到豆子、处理按键事件等功能。