用HTML5写一个雷霆战机小游戏
时间: 2023-12-07 15:43:11 浏览: 45
好的,我可以提供一个基于HTML5和JavaScript的雷霆战机小游戏的实现思路和示例代码。请注意,这只是一个简单的示例,你可以根据自己的需求和喜好进行修改和优化。
首先,需要在HTML文件中添加一个画布元素,用于绘制游戏画面:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>雷霆战机小游戏</title>
</head>
<body>
<canvas id="canvas" width="480" height="600"></canvas>
<script src="game.js"></script>
</body>
</html>
```
然后,在JavaScript文件中编写游戏逻辑和绘制代码:
```javascript
// 获取画布元素
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 加载游戏资源
var bgImg = new Image();
bgImg.src = "background.jpg";
var playerImg = new Image();
playerImg.src = "player.png";
var enemyImg = new Image();
enemyImg.src = "enemy.png";
// 定义游戏对象
var player = {
x: canvas.width / 2,
y: canvas.height - 50,
speed: 5,
width: 50,
height: 50
};
var enemies = [];
var score = 0;
// 处理键盘事件
document.addEventListener("keydown", function(e) {
if (e.keyCode == 37) { // 左箭头键
player.x -= player.speed;
} else if (e.keyCode == 39) { // 右箭头键
player.x += player.speed;
}
});
// 创建敌机对象
function createEnemy() {
var enemy = {
x: Math.random() * (canvas.width - 50),
y: -50,
speed: Math.random() * 5 + 2,
width: 50,
height: 50
};
enemies.push(enemy);
}
// 绘制游戏画面
function draw() {
// 绘制背景
ctx.drawImage(bgImg, 0, 0);
// 绘制玩家飞机
ctx.drawImage(playerImg, player.x, player.y, player.width, player.height);
// 绘制敌机
for (var i = 0; i < enemies.length; i++) {
var enemy = enemies[i];
ctx.drawImage(enemyImg, enemy.x, enemy.y, enemy.width, enemy.height);
enemy.y += enemy.speed;
// 判断敌机是否与玩家飞机碰撞
if (enemy.x < player.x + player.width &&
enemy.x + enemy.width > player.x &&
enemy.y < player.y + player.height &&
enemy.y + enemy.height > player.y) {
// 游戏结束
alert("游戏结束!得分:" + score);
location.reload();
}
// 判断敌机是否超出屏幕
if (enemy.y > canvas.height) {
enemies.splice(i, 1);
i--;
}
}
// 绘制分数
ctx.font = "24px Arial";
ctx.fillStyle = "white";
ctx.fillText("分数:" + score, 10, 30);
// 更新分数和敌机
score++;
if (score % 50 == 0) { // 每50分创建一个敌机
createEnemy();
}
// 更新画面
requestAnimationFrame(draw);
}
// 启动游戏
draw();
```
这是一个简单的雷霆战机小游戏,玩家可以通过左右箭头键控制飞机移动,避免与敌机碰撞,同时获得分数。你可以根据自己的需求和喜好进行修改和优化,例如增加音效、增加不同类型的敌机、增加玩家武器等。