马紫萱 - 科学教育 - Powered by Discuz!

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>飞机大战小游戏</title>
<style>
body {
margin: 0;
background: black;
overflow: hidden;
}
canvas {
display: block;
margin: 0 auto;
background: #222;
border: 2px solid white;
}
</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, // 飞机初始x坐标
y: canvas.height - 80, // 飞机初始y坐标
width: 40,
height: 60,
speed: 5
};
// 子弹数组，存放所有发射出的子弹
const bullets = [];
// 敌机数组
const enemies = [];
// 用来控制键盘操作
const keys = {};
// 记录分数
let score = 0;
// 游戏是否结束
let gameOver = false;
// 监听键盘按下和松开事件
window.addEventListener('keydown', function(e){
keys[e.key] = true;
});
window.addEventListener('keyup', function(e){
keys[e.key] = false;
});
// 定义子弹类
class Bullet {
constructor(x, y) {
this.x = x;
this.y = y;
this.width = 5;
this.height = 10;
this.speed = 7;
}
update() {
this.y -= this.speed;
}
draw() {
ctx.fillStyle = 'yellow';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
// 定义敌机类
class Enemy {
constructor(x, y, speed) {
this.x = x;
this.y = y;
this.width = 40;
this.height = 40;
this.speed = speed;
}
update() {
this.y += this.speed;
}
draw() {
ctx.fillStyle = 'red';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
// 每隔一段时间创造敌机
function createEnemy() {
const x = Math.random() * (canvas.width - 40);
const speed = 2 + Math.random() * 2;
enemies.push(new Enemy(x, -40, speed));
}
setInterval(createEnemy, 1500); // 每1.5秒创建一个敌机
// 控制飞机移动和开火
function handlePlane() {
if (keys['ArrowLeft'] && plane.x > 0) {
plane.x -= plane.speed;
}
if (keys['ArrowRight'] && plane.x + plane.width < canvas.width) {
plane.x += plane.speed;
}
if (keys[' ']) { // 空格键开火
if (Date.now() - lastBulletTime > 300) { // 控制发射速度
bullets.push(new Bullet(plane.x + plane.width/2 - 2.5, plane.y));
lastBulletTime = Date.now();
}
}
}
let lastBulletTime = 0;
// 检测碰撞的函数（两个矩形有没有重叠）
function isCollide(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() {
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 - 50, canvas.height/2 + 40);
return;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 画飞机
ctx.fillStyle = 'blue';
ctx.fillRect(plane.x, plane.y, plane.width, plane.height);
// 控制飞机移动和射击
handlePlane();
// 更新并画子弹
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();
}
// 更新并画敌机
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 (isCollide(e, plane)) {
gameOver = true;
}
// 敌机和子弹碰撞检测
for (let j = bullets.length - 1; j >= 0; j--) {
if (isCollide(e, bullets[j])) {
enemies.splice(i, 1);
bullets.splice(j, 1);
score += 10;
break;
}
}
}
// 显示分数
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText('得分: '+score, 10, 30);
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>

复制代码