以下是一个简单的HTML5游戏开发示例，使用了Canvas和JavaScript来创建一个简单的飞机大战游戏：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Game Development Example</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById('gameCanvas');
var ctx = canvas.getContext('2d');
var player = {
x: 195,
y: 370,
width: 30,
height: 30,
speed: 5
};
var enemy = {
x: 195,
y: 50,
width: 30,
height: 30,
speed: 3
};
function drawPlayer() {
ctx.fillStyle = 'blue';
ctx.fillRect(player.x, player.y, player.width, player.height);
}
function drawEnemy() {
ctx.fillStyle = 'red';
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
}
function movePlayer(e) {
if (e.keyCode === 37) { // Left
player.x -= player.speed;
} else if (e.keyCode === 39) { // Right
player.x += player.speed;
}
}
function moveEnemy() {
enemy.y += enemy.speed;
if (enemy.y > 370) {
enemy.y = 50;
}
}
function detectCollision() {
if (player.x < enemy.x + enemy.width &&
player.x + player.width > enemy.x &&
player.y < enemy.y + enemy.height &&
player.height + player.y > enemy.y) {
alert('Game Over!');
}
}
document.addEventListener('keydown', movePlayer);
setInterval(function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
moveEnemy();
drawPlayer();
drawEnemy();
detectCollision();
}, 20);
</script>
</body>
</html>
这段代码创建了一个简单的飞机大战游戏，玩家通过使用左右箭头键控制飞机的左右移动，飞机与敌机会在屏幕上移动，并检测碰撞。如果玩家的飞机与敌机相撞，则游戏结束。这个示例提供了如何使用JavaScript和HTML5 Canvas API进行游戏开发的基本框架。