zhr飞坤 - 科学教育 - Powered by Discuz!

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>飞机大战小游戏</title>
<style>
body {
text-align: center;
background-color: #000;
color: white;
font-family: "微软雅黑", sans-serif;
margin: 0;
}
canvas {
background: #111;
display: block;
margin: 20px auto;
border: 2px solid #555;
}
</style>
</head>
<body>
<h1>飞机大战小游戏</h1>
<p>左右方向键控制飞机移动，空格键发射子弹</p>
<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 - 25,
y: canvas.height - 80,
width: 50,
height: 60,
speed: 5,
movingLeft: false,
movingRight: false,
};
// 子弹数组
let bullets = [];
// 敌机数组
let enemies = [];
// 分数
let score = 0;
// 创建敌机函数
function createEnemy() {
const enemyWidth = 40;
const enemyHeight = 40;
const x = Math.random() * (canvas.width - enemyWidth);
enemies.push({
x: x,
y: -enemyHeight,
width: enemyWidth,
height: enemyHeight,
speed: 2 + Math.random() * 2,
});
}
// 键盘事件监听
window.addEventListener('keydown', function(e) {
if (e.code === 'ArrowLeft') plane.movingLeft = true;
if (e.code === 'ArrowRight') plane.movingRight = true;
if (e.code === 'Space') shootBullet();
});
window.addEventListener('keyup', function(e) {
if (e.code === 'ArrowLeft') plane.movingLeft = false;
if (e.code === 'ArrowRight') plane.movingRight = false;
});
// 发射子弹函数
function shootBullet() {
bullets.push({
x: plane.x + plane.width / 2 - 5,
y: plane.y,
width: 10,
height: 20,
speed: 7,
});
}
// 检测碰撞函数（矩形碰撞）
function isColliding(obj1, obj2) {
return !(
obj1.x + obj1.width < obj2.x ||
obj1.x > obj2.x + obj2.width ||
obj1.y + obj1.height < obj2.y ||
obj1.y > obj2.y + obj2.height
);
}
// 游戏主循环
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 移动飞机
if (plane.movingLeft && plane.x > 0) plane.x -= plane.speed;
if (plane.movingRight && plane.x + plane.width < canvas.width) plane.x += plane.speed;
// 画飞机（用三角形表示）
ctx.fillStyle = 'cyan';
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();
// 更新和画子弹
ctx.fillStyle = 'yellow';
for (let i = bullets.length -1; i >= 0; i--) {
bullets[i].y -= bullets[i].speed;
if (bullets[i].y + bullets[i].height < 0) bullets.splice(i, 1);
else {
ctx.fillRect(bullets[i].x, bullets[i].y, bullets[i].width, bullets[i].height);
}
}
// 每隔一段时间生成敌机
if (Math.random() < 0.02) {
createEnemy();
}
// 更新和画敌机
ctx.fillStyle = 'red';
for (let i = enemies.length -1; i >= 0; i--) {
enemies[i].y += enemies[i].speed;
if (enemies[i].y > canvas.height) {
enemies.splice(i, 1);
// 这里可以扣分或者游戏结束，不过为了简单我们忽略
}
else {
ctx.fillRect(enemies[i].x, enemies[i].y, enemies[i].width, enemies[i].height);
}
}
// 检测子弹和敌机的碰撞
for (let b = bullets.length -1; b >= 0; b--) {
for (let e = enemies.length -1; e >= 0; e--) {
if (isColliding(bullets[b], enemies[e])) {
bullets.splice(b, 1);
enemies.splice(e, 1);
score += 10;
break;
}
}
}
// 画分数
ctx.fillStyle = 'white';
ctx.font = '20px 微软雅黑';
ctx.fillText('分数: ' + score, 10, 30);
requestAnimationFrame(gameLoop);
}
// 开始游戏
gameLoop();
</script>
</body>
</html>

复制代码