飞机大战 - 科学教育 - Powered by Discuz!

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简易飞机大战</title>
<style>
body {
margin: 0;
background: #000;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
canvas {
background: #111;
display: block;
border: 2px solid #555;
}
</style>
</head>
<body>
<canvas id="game" width="400" height="600"></canvas>
<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
// 飞机对象
const plane = {
x: canvas.width / 2 - 20,
y: canvas.height - 60,
width: 40,
height: 60,
speed: 5,
movingLeft: false,
movingRight: false,
draw() {
ctx.fillStyle = 'cyan';
ctx.beginPath();
ctx.moveTo(this.x + this.width/2, this.y);
ctx.lineTo(this.x, this.y + this.height);
ctx.lineTo(this.x + this.width, this.y + this.height);
ctx.closePath();
ctx.fill();
},
move() {
if (this.movingLeft && this.x > 0) {
this.x -= this.speed;
}
if (this.movingRight && this.x + this.width < canvas.width) {
this.x += this.speed;
}
}
};
// 子弹数组
const bullets = [];
// 敌机数组
const enemies = [];
// 创建敌机
function createEnemy() {
const size = 40;
const x = Math.random() * (canvas.width - size);
enemies.push({
x,
y: -size,
width: size,
height: size,
speed: 2 + Math.random() * 2,
draw() {
ctx.fillStyle = 'red';
ctx.fillRect(this.x, this.y, this.width, this.height);
},
move() {
this.y += this.speed;
}
});
}
// 监听键盘事件
document.addEventListener('keydown', e => {
if (e.key === 'ArrowLeft') plane.movingLeft = true;
else if (e.key === 'ArrowRight') plane.movingRight = true;
else if (e.key === ' ') shootBullet();
});
document.addEventListener('keyup', e => {
if (e.key === 'ArrowLeft') plane.movingLeft = false;
else if (e.key === 'ArrowRight') plane.movingRight = false;
});
// 射击子弹
function shootBullet() {
bullets.push({
x: plane.x + plane.width / 2 - 3,
y: plane.y,
width: 6,
height: 12,
speed: 7,
draw() {
ctx.fillStyle = 'lime';
ctx.fillRect(this.x, this.y, this.width, this.height);
},
move() {
this.y -= this.speed;
}
});
}
let score = 0;
let gameOver = false;
let enemyTimer = 0;
// 碰撞检测函数
function isColliding(a, b) {
return !(
a.x + a.width < b.x ||
b.x + b.width < a.x ||
a.y + a.height < b.y ||
b.y + b.height < a.y
);
}
// 游戏主循环
function gameLoop() {
if (gameOver) {
ctx.fillStyle = 'white';
ctx.font = '36px Arial';
ctx.fillText('游戏结束', canvas.width / 2 - 80, canvas.height / 2);
ctx.font = '24px Arial';
ctx.fillText('得分: ' + score, canvas.width / 2 - 40, canvas.height / 2 + 40);
return;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制分数
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText('得分: ' + score, 10, 30);
// 移动和绘制飞机
plane.move();
plane.draw();
// 创建敌机，间隔时间控制
enemyTimer++;
if (enemyTimer > 60) { // 每秒大约一架敌机
createEnemy();
enemyTimer = 0;
}
// 移动和绘制敌机，检查是否到底部导致游戏结束
for (let i = enemies.length -1; i >= 0; i--) {
const enemy = enemies[i];
enemy.move();
enemy.draw();
if (enemy.y > canvas.height) {
gameOver = true; // 敌机飞到底部，你输了！
}
}
// 移动和绘制子弹，移除飞出画面的子弹
for (let i = bullets.length -1; i >= 0; i--) {
const bullet = bullets[i];
bullet.move();
bullet.draw();
if (bullet.y + bullet.height < 0) {
bullets.splice(i, 1);
continue;
}
// 检测子弹和敌机碰撞
for (let j = enemies.length -1; j >= 0; j--) {
const enemy = enemies[j];
if (isColliding(bullet, enemy)) {
enemies.splice(j, 1);
bullets.splice(i, 1);
score += 10;
break;
}
}
}
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>

复制代码