html飞机大战游戏代码
时间: 2023-11-05 15:52:07 浏览: 97
以下是一个简单的 HTML 飞机大战游戏代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>飞机大战</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
// 获取画布和上下文
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
// 定义飞机属性
var plane = {
x: canvas.width / 2,
y: canvas.height - 50,
width: 50,
height: 50,
speed: 5
};
// 监听键盘事件
document.addEventListener("keydown", function(event) {
if (event.keyCode === 37) { // 左箭头
plane.x -= plane.speed;
}
else if (event.keyCode === 39) { // 右箭头
plane.x += plane.speed;
}
});
// 定义子弹属性
var bullets = [];
var bulletSpeed = 10;
function createBullet() {
bullets.push({
x: plane.x + plane.width / 2,
y: plane.y,
width: 5,
height: 10,
speed: bulletSpeed
});
}
// 定义敌机属性
var enemies = [];
var enemySpeed = 3;
function createEnemy() {
enemies.push({
x: Math.random() * (canvas.width - 50),
y: 0,
width: 50,
height: 50,
speed: enemySpeed
});
}
// 游戏循环
var score = 0;
setInterval(function() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制飞机
ctx.fillStyle = "blue";
ctx.fillRect(plane.x, plane.y, plane.width, plane.height);
// 绘制子弹
ctx.fillStyle = "red";
bullets.forEach(function(bullet) {
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
bullet.y -= bullet.speed;
});
// 绘制敌机
ctx.fillStyle = "green";
enemies.forEach(function(enemy) {
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
enemy.y += enemy.speed;
});
// 检测子弹和敌机是否碰撞
bullets.forEach(function(bullet) {
enemies.forEach(function(enemy, i) {
if (bullet.x < enemy.x + enemy.width &&
bullet.x + bullet.width > enemy.x &&
bullet.y < enemy.y + enemy.height &&
bullet.y + bullet.height > enemy.y) {
bullets.splice(bullets.indexOf(bullet), 1);
enemies.splice(i, 1);
score++;
}
});
});
// 检测敌机是否撞到飞机
enemies.forEach(function(enemy) {
if (enemy.x < plane.x + plane.width &&
enemy.x + enemy.width > plane.x &&
enemy.y < plane.y + plane.height &&
enemy.y + enemy.height > plane.y) {
alert("游戏结束!得分:" + score);
location.reload();
}
});
// 创建子弹和敌机
createBullet();
if (score >= 10) {
createEnemy();
}
}, 30);
</script>
</body>
</html>
```
这只是一个简单的示例,你可以根据自己的需求和技能来进行改进和扩展,比如添加更多的敌机、增加游戏难度等等。
阅读全文