张嫣然 - 科学教育 - Powered by Discuz!

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>飞机大战小游戏</title>
<style>
body {
margin: 0;
background: #000;
overflow: hidden;
}
canvas {
display: block;
background: #111;
margin: 0 auto;
border: 2px solid #555;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 飞机图形大小
const planeWidth = 40;
const planeHeight = 40;
// 游戏状态
let keys = {};
let bullets = [];
let enemies = [];
let score = 0;
let gameOver = false;
// 玩家飞机对象
const player = {
x: canvas.width / 2 - planeWidth / 2,
y: canvas.height - planeHeight - 10,
width: planeWidth,
height: planeHeight,
speed: 5,
draw() {
// 画飞机（蓝色三角形）
ctx.fillStyle = 'deepskyblue';
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 (keys['ArrowLeft'] && this.x > 0) this.x -= this.speed;
if (keys['ArrowRight'] && this.x + this.width < canvas.width) this.x += this.speed;
if (keys['ArrowUp'] && this.y > 0) this.y -= this.speed;
if (keys['ArrowDown'] && this.y + this.height < canvas.height) this.y += this.speed;
}
};
// 子弹类
class Bullet {
constructor(x, y) {
this.x = x;
this.y = y;
this.width = 5;
this.height = 10;
this.speed = 7;
}
draw() {
ctx.fillStyle = 'yellow';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
update() {
this.y -= this.speed;
}
}
// 敌机类
class Enemy {
constructor(x, y, speed) {
this.x = x;
this.y = y;
this.width = planeWidth;
this.height = planeHeight;
this.speed = speed;
}
draw() {
// 画敌机（红色三角形）
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.moveTo(this.x + this.width / 2, this.y + this.height);
ctx.lineTo(this.x, this.y);
ctx.lineTo(this.x + this.width, this.y);
ctx.closePath();
ctx.fill();
}
update() {
this.y += this.speed;
}
}
// 产生敌机
function spawnEnemy() {
const x = Math.random() * (canvas.width - planeWidth);
const speed = 2 + Math.random() * 1.5;
enemies.push(new Enemy(x, -planeHeight, speed));
}
// 检测碰撞函数
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 drawInfo() {
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText(`得分: ${score}`, 10, 30);
if (gameOver) {
ctx.fillStyle = 'red';
ctx.font = '48px Arial';
ctx.fillText('游戏结束', canvas.width / 2 - 100, canvas.height / 2);
ctx.font = '24px Arial';
ctx.fillText('刷新页面重新开始', canvas.width / 2 - 100, canvas.height / 2 + 40);
}
}
// 游戏主循环
let enemyTimer = 0;
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (!gameOver) {
player.move();
player.draw();
// 发射子弹
if (keys[' ']) {
if (!player.canShoot) {
const bulletX = player.x + player.width / 2 - 2.5;
const bulletY = player.y;
bullets.push(new Bullet(bulletX, bulletY));
player.canShoot = true;
setTimeout(() => {
player.canShoot = false;
}, 300); // 限制射击间隔
}
}
// 更新子弹
for (let i = bullets.length - 1; i >= 0; i--) {
const b = bullets[i];
b.update();
if (b.y + b.height < 0) {
bullets.splice(i, 1);
continue;
}
b.draw();
}
// 产生敌机
enemyTimer += 1;
if (enemyTimer > 50) {
spawnEnemy();
enemyTimer = 0;
}
// 更新敌机
for (let i = enemies.length - 1; i >= 0; i--) {
const e = enemies[i];
e.update();
if (e.y > canvas.height) {
enemies.splice(i, 1);
continue;
}
e.draw();
// 检测敌机和玩家碰撞
if (isColliding(e, player)) {
gameOver = true;
}
// 检测敌机和子弹碰撞
for (let j = bullets.length - 1; j >= 0; j--) {
if (isColliding(e, bullets[j])) {
enemies.splice(i, 1);
bullets.splice(j, 1);
score += 10;
break;
}
}
}
} else {
player.draw();
}
drawInfo();
requestAnimationFrame(gameLoop);
}
// 键盘按下监听
window.addEventListener('keydown', (e) => {
keys[e.key] = true;
});
// 键盘松开监听
window.addEventListener('keyup', (e) => {
keys[e.key] = false;
if (e.key === ' ') {
player.canShoot = false;
}
});
// 初始化
player.canShoot = false;
gameLoop();
</script>
</body>
</html>

复制代码