帮我生成飞机大战斗的网页代码 - 科学教育

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简单飞机大战</title>
<style>
body {
margin: 0;
background: #000;
overflow: hidden;
}
canvas {
display: block;
margin: 0 auto;
background: #111;
border: 2px solid #444;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 飞机对象
const player = {
x: canvas.width / 2 - 20,
y: canvas.height - 60,
width: 40,
height: 60,
speed: 5,
movingLeft: false,
movingRight: false,
bullets: []
};
// 敌机列表
const enemies = [];
let enemySpawnTimer = 0;
const enemySpawnInterval = 100; // 每100帧产生一个敌机
// 子弹类
class Bullet {
constructor(x, y) {
this.x = x;
this.y = y;
this.width = 5;
this.height = 10;
this.speed = 7;
this.alive = true;
}
update() {
this.y -= this.speed;
if (this.y < 0) this.alive = false;
}
draw() {
ctx.fillStyle = 'yellow';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
// 敌机类
class Enemy {
constructor(x, y) {
this.x = x;
this.y = y;
this.width = 40;
this.height = 40;
this.speed = 2;
this.alive = true;
}
update() {
this.y += this.speed;
if (this.y > canvas.height) this.alive = false;
}
draw() {
ctx.fillStyle = 'red';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
// 监听键盘按下
window.addEventListener('keydown', e => {
if (e.code === 'ArrowLeft') player.movingLeft = true;
if (e.code === 'ArrowRight') player.movingRight = true;
if (e.code === 'Space') shootBullet();
});
// 监听键盘松开
window.addEventListener('keyup', e => {
if (e.code === 'ArrowLeft') player.movingLeft = false;
if (e.code === 'ArrowRight') player.movingRight = false;
});
// 发射子弹
function shootBullet() {
const bulletX = player.x + player.width / 2 - 2.5;
const bulletY = player.y;
player.bullets.push(new Bullet(bulletX, bulletY));
}
// 检测碰撞的函数
function isColliding(a, b) {
return !(
a.x + a.width < b.x ||
a.x > b.x + b.width ||
a.y + a.height < b.y ||
a.y > b.y + b.height
);
}
// 游戏主循环
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 控制飞机移动
if (player.movingLeft && player.x > 0) player.x -= player.speed;
if (player.movingRight && player.x + player.width < canvas.width) player.x += player.speed;
// 画飞机（用蓝色矩形代替简单的飞机）
ctx.fillStyle = 'deepskyblue';
ctx.fillRect(player.x, player.y, player.width, player.height);
// 更新和画子弹
player.bullets.forEach((bullet, index) => {
bullet.update();
if (!bullet.alive) {
player.bullets.splice(index, 1);
} else {
bullet.draw();
}
});
// 产生敌机
enemySpawnTimer++;
if (enemySpawnTimer >= enemySpawnInterval) {
enemySpawnTimer = 0;
const x = Math.random() * (canvas.width - 40);
enemies.push(new Enemy(x, -40));
}
// 更新和画敌机
enemies.forEach((enemy, index) => {
enemy.update();
if (!enemy.alive) {
enemies.splice(index, 1);
} else {
enemy.draw();
}
});
// 检测子弹和敌机碰撞
player.bullets.forEach((bullet, bIndex) => {
enemies.forEach((enemy, eIndex) => {
if (isColliding(bullet, enemy)) {
bullet.alive = false;
enemy.alive = false;
}
});
});
// 检测敌机和飞机碰撞，游戏结束
for (let enemy of enemies) {
if (isColliding(enemy, player)) {
alert('游戏结束！你被敌机撞到了！');
window.location.reload();
return;
}
}
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>

复制代码