帮我生成飞机大战的网页代码 - 科学教育

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>飞机大战小游戏</title>
<style>
body {
margin: 0;
background: black;
overflow: hidden;
user-select: none;
}
#gameCanvas {
background: #000;
display: block;
margin: 0 auto;
border: 2px solid white;
}
#score {
color: white;
font-size: 20px;
text-align: center;
margin-top: 10px;
font-family: "微软雅黑", sans-serif;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<div id="score">得分：0</div>
<script>
const canvas = document.getElementById("gameCanvas");
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,
};
// 子弹数组
const bullets = [];
const bulletSpeed = 7;
// 敌机数组
const enemies = [];
const enemySpeed = 2;
let score = 0;
let gameOver = false;
// 监听键盘事件
window.addEventListener("keydown", (e) => {
if (e.code === "ArrowLeft") {
plane.movingLeft = true;
} else if (e.code === "ArrowRight") {
plane.movingRight = true;
} else if (e.code === "Space") {
shootBullet();
}
});
window.addEventListener("keyup", (e) => {
if (e.code === "ArrowLeft") {
plane.movingLeft = false;
} else if (e.code === "ArrowRight") {
plane.movingRight = false;
}
});
function shootBullet() {
bullets.push({
x: plane.x + plane.width / 2 - 3,
y: plane.y,
width: 6,
height: 12,
});
}
// 生成敌机
function createEnemy() {
const x = Math.random() * (canvas.width - 40);
enemies.push({
x: x,
y: -40,
width: 40,
height: 40,
});
}
// 画飞机
function drawPlane() {
ctx.fillStyle = "deepskyblue";
ctx.beginPath();
// 画出飞机的身体
ctx.moveTo(plane.x + plane.width / 2, plane.y);
ctx.lineTo(plane.x + plane.width, plane.y + plane.height);
ctx.lineTo(plane.x, plane.y + plane.height);
ctx.closePath();
ctx.fill();
}
// 画子弹
function drawBullets() {
ctx.fillStyle = "yellow";
bullets.forEach((bullet) => {
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
});
}
// 画敌机
function drawEnemies() {
ctx.fillStyle = "red";
enemies.forEach((enemy) => {
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
});
}
// 更新位置
function update() {
if (gameOver) return;
// 移动飞机
if (plane.movingLeft) {
plane.x -= plane.speed;
if (plane.x < 0) plane.x = 0;
}
if (plane.movingRight) {
plane.x += plane.speed;
if (plane.x + plane.width > canvas.width) plane.x = canvas.width - plane.width;
}
// 移动子弹
for (let i = bullets.length - 1; i >= 0; i--) {
bullets[i].y -= bulletSpeed;
if (bullets[i].y + bullets[i].height < 0) {
bullets.splice(i, 1);
}
}
// 移动敌机
for (let i = enemies.length - 1; i >= 0; i--) {
enemies[i].y += enemySpeed;
// 判断敌机和飞机是否碰撞
if (isColliding(enemies[i], plane)) {
gameOver = true;
}
// 如果敌机飞出屏幕，就移除
if (enemies[i].y > canvas.height) {
enemies.splice(i, 1);
}
}
// 判断子弹和敌机碰撞
for (let i = enemies.length - 1; i >= 0; i--) {
for (let j = bullets.length - 1; j >= 0; j--) {
if (isColliding(enemies[i], bullets[j])) {
enemies.splice(i, 1);
bullets.splice(j, 1);
score += 10;
break;
}
}
}
}
// 碰撞检测函数
function isColliding(rect1, rect2) {
return !(
rect1.x > rect2.x + rect2.width ||
rect1.x + rect1.width < rect2.x ||
rect1.y > rect2.y + rect2.height ||
rect1.y + rect1.height < rect2.y
);
}
// 游戏主循环
let enemySpawnTimer = 0;
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
update();
drawPlane();
drawBullets();
drawEnemies();
document.getElementById("score").textContent = "得分：" + score;
if (gameOver) {
ctx.fillStyle = "white";
ctx.font = "48px 微软雅黑";
ctx.textAlign = "center";
ctx.fillText("游戏结束", canvas.width / 2, canvas.height / 2);
ctx.font = "24px 微软雅黑";
ctx.fillText("刷新页面重新开始", canvas.width / 2, canvas.height / 2 + 40);
return;
}
// 每隔一定时间生成一个敌机
enemySpawnTimer++;
if (enemySpawnTimer > 50) {
createEnemy();
enemySpawnTimer = 0;
}
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>

复制代码