朱语汐 - 科学教育 - Powered by Discuz!

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>飞机大战小游戏</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #000;
}
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 plane = {
x: canvas.width / 2 - 20,
y: canvas.height - 80,
width: 40,
height: 60,
speed: 5,
movingLeft: false,
movingRight: false,
movingUp: false,
movingDown: false,
};
// 子弹数组
const bullets = [];
// 敌机数组
const enemies = [];
let enemySpawnTimer = 0; // 生成敌机计时
// 分数
let score = 0;
let gameOver = false;
// 监听键盘
document.addEventListener('keydown', (e) => {
if (e.code === 'ArrowLeft') plane.movingLeft = true;
else if (e.code === 'ArrowRight') plane.movingRight = true;
else if (e.code === 'ArrowUp') plane.movingUp = true;
else if (e.code === 'ArrowDown') plane.movingDown = true;
else if (e.code === 'Space') shootBullet();
});
document.addEventListener('keyup', (e) => {
if (e.code === 'ArrowLeft') plane.movingLeft = false;
else if (e.code === 'ArrowRight') plane.movingRight = false;
else if (e.code === 'ArrowUp') plane.movingUp = false;
else if (e.code === 'ArrowDown') plane.movingDown = false;
});
// 发射子弹
function shootBullet() {
if (gameOver) return;
bullets.push({
x: plane.x + plane.width / 2 - 3,
y: plane.y,
width: 6,
height: 12,
speed: 7,
});
}
// 生成敌机
function spawnEnemy() {
const size = 40;
enemies.push({
x: Math.random() * (canvas.width - size),
y: -size,
width: size,
height: size,
speed: 2 + Math.random() * 1.5,
});
}
// 碰撞检测
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 update() {
if (gameOver) return;
// 移动飞机
if (plane.movingLeft && plane.x > 0) plane.x -= plane.speed;
if (plane.movingRight && plane.x < canvas.width - plane.width) plane.x += plane.speed;
if (plane.movingUp && plane.y > 0) plane.y -= plane.speed;
if (plane.movingDown && plane.y < canvas.height - plane.height) plane.y += plane.speed;
// 移动子弹
bullets.forEach((b, i) => {
b.y -= b.speed;
if (b.y + b.height < 0) {
bullets.splice(i, 1);
}
});
// 生成敌机
enemySpawnTimer++;
if (enemySpawnTimer > 50) { // 每50帧生成一个敌机
spawnEnemy();
enemySpawnTimer = 0;
}
// 移动敌机
enemies.forEach((e, i) => {
e.y += e.speed;
if (e.y > canvas.height) {
enemies.splice(i, 1);
// 敌机到底部，游戏结束
gameOver = true;
}
});
// 子弹和敌机碰撞检测
bullets.forEach((b, bi) => {
enemies.forEach((e, ei) => {
if (isColliding(b, e)) {
bullets.splice(bi, 1);
enemies.splice(ei, 1);
score += 10;
}
});
});
// 敌机和飞机碰撞检测
enemies.forEach((e) => {
if (isColliding(e, plane)) {
gameOver = true;
}
});
}
// 画飞机（用三角形表示）
function drawPlane() {
ctx.fillStyle = '#00f';
ctx.beginPath();
ctx.moveTo(plane.x + plane.width/2, plane.y);
ctx.lineTo(plane.x, plane.y + plane.height);
ctx.lineTo(plane.x + plane.width, plane.y + plane.height);
ctx.closePath();
ctx.fill();
}
// 画子弹
function drawBullets() {
ctx.fillStyle = '#ff0';
bullets.forEach(b => {
ctx.fillRect(b.x, b.y, b.width, b.height);
});
}
// 画敌机（用红色矩形表示）
function drawEnemies() {
ctx.fillStyle = '#f00';
enemies.forEach(e => {
ctx.fillRect(e.x, e.y, e.width, e.height);
});
}
// 画分数和游戏结束提示
function drawUI() {
ctx.fillStyle = '#fff';
ctx.font = '20px Arial';
ctx.fillText('分数: ' + score, 10, 30);
if (gameOver) {
ctx.fillStyle = 'rgba(0,0,0,0.7)';
ctx.fillRect(0, canvas.height/2 - 40, canvas.width, 80);
ctx.fillStyle = '#fff';
ctx.font = '36px Arial';
ctx.textAlign = 'center';
ctx.fillText('游戏结束', canvas.width/2, canvas.height/2);
ctx.font = '20px Arial';
ctx.fillText('刷新页面重新开始', canvas.width/2, canvas.height/2 + 30);
}
}
// 游戏主循环
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
update();
drawPlane();
drawBullets();
drawEnemies();
drawUI();
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>

复制代码