HTML5吃豆人游戲是一款非常經典的游戲，現在我們來看看如何用HTML5來編寫一個簡單的吃豆人游戲。
<!DOCTYPE html>
<html>
<head>
<title> HTML5吃豆人游戲 </title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1> HTML5吃豆人游戲 </h1>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
function drawPacMan() {
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI * 2);
ctx.fillStyle = "#ffff00";
ctx.fill();
ctx.closePath();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPacMan();
x += dx;
y += dy;
if (x + dx >canvas.width - 10 || x + dx< 10) {
dx = -dx;
}
if (y + dy >canvas.height - 10 || y + dy< 10) {
dy = -dy;
}
}
setInterval(draw, 10);
</script>
</body>
</html>我們可以看到，這個代碼包括了HTML和JavaScript的內容。在HTML中，我們首先創建了一個canvas元素，用于繪制我們的吃豆人游戲。在JavaScript中，我們定義了一個繪制圓形吃豆人的函數和一個物體運動的函數，使用setInterval函數讓畫面每10毫秒更新一次，從而形成動畫效果。
嘗試運行這個代碼，你會看到一個簡單的吃豆人游戲界面，你可以嘗試添加更多的功能，比如吃豆人的移動，豆子的生成，吃豆等等，以創造一個更完整的游戲！