zhangwanyu张婉玗18

张婉玗18 · 发表于 2025-12-2 09:44:46

帮我生成飞机大战的网页代码html

kaia · 发表于 2025-12-2 09:45:17

你好！我来帮你做一个简单的“飞机大战”小游戏网页代码哦。这个游戏里你可以用键盘左右箭头控制飞机移动，用空格键发射子弹，打中敌机会得分。下面是完整的代码，你可以复制到一个叫`index.html`的文件里，然后用浏览器打开就能玩了：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简单飞机大战游戏</title>
<style>
body {
margin: 0;
overflow: hidden;
background: black;
}
canvas {
display: block;
margin: 0 auto;
background: #111;
border: 2px solid white;
}
</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: 180,
y: 520,
width: 40,
height: 40,
speed: 5,
color: 'cyan',
};
// 子弹数组
let bullets = [];
// 敌机数组
let enemies = [];
// 分数
let score = 0;
// 监听按键状态
const keys = {
left: false,
right: false,
space: false,
};
// 绑定键盘事件
window.addEventListener('keydown', function(e) {
if (e.code === 'ArrowLeft') keys.left = true;
else if (e.code === 'ArrowRight') keys.right = true;
else if (e.code === 'Space') keys.space = true;
});
window.addEventListener('keyup', function(e) {
if (e.code === 'ArrowLeft') keys.left = false;
else if (e.code === 'ArrowRight') keys.right = false;
else if (e.code === 'Space') keys.space = false;
});
// 生成敌机
function createEnemy() {
const x = Math.random() * (canvas.width - 40);
enemies.push({x, y: -40, width: 40, height: 40, speed: 2 + Math.random() * 2, color: 'red'});
}
// 画飞机
function drawPlane() {
ctx.fillStyle = plane.color;
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 = 'yellow';
bullets.forEach(bullet => {
ctx.fillRect(bullet.x, bullet.y, 4, 10);
});
}
// 画敌机
function drawEnemies() {
enemies.forEach(enemy => {
ctx.fillStyle = enemy.color;
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
});
}
// 更新飞机位置
function updatePlane() {
if (keys.left && plane.x > 0) {
plane.x -= plane.speed;
}
if (keys.right && plane.x < canvas.width - plane.width) {
plane.x += plane.speed;
}
}
// 更新子弹位置
function updateBullets() {
bullets.forEach((bullet, index) => {
bullet.y -= 7;
if (bullet.y < 0) {
bullets.splice(index, 1); // 删除飞出屏幕的子弹
}
});
}
// 更新敌机位置
function updateEnemies() {
enemies.forEach((enemy, index) => {
enemy.y += enemy.speed;
if (enemy.y > canvas.height) {
enemies.splice(index, 1); // 删除飞出屏幕底部的敌机
}
});
}
// 发射子弹
let canShoot = true;
function shootBullet() {
if (keys.space && canShoot) {
bullets.push({x: plane.x + plane.width/2 - 2, y: plane.y, width:4, height:10});
canShoot = false;
setTimeout(() => { canShoot = true; }, 300); // 每300毫秒才能射击一次
}
}
// 碰撞检测
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 checkCollisions() {
bullets.forEach((bullet, bIndex) => {
enemies.forEach((enemy, eIndex) => {
if (isColliding(bullet, enemy)) {
bullets.splice(bIndex, 1);
enemies.splice(eIndex, 1);
score += 10;
}
});
});
}
// 检测敌机和飞机碰撞
function checkGameOver() {
for (let enemy of enemies) {
if (isColliding(enemy, plane)) {
alert('游戏结束！你的得分: ' + score);
document.location.reload();
break;
}
}
}
let enemyTimer = 0;
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
updatePlane();
shootBullet();
updateBullets();
updateEnemies();
checkCollisions();
checkGameOver();
drawPlane();
drawBullets();
drawEnemies();
// 定时生成敌机，差不多每秒两个
enemyTimer++;
if (enemyTimer > 30) {
createEnemy();
enemyTimer = 0;
}
// 显示分数
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText('得分: ' + score, 10, 30);
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>

复制代码

### 怎么玩的：
- 用键盘左右箭头键让飞机左右移动
- 按空格键发射子弹
- 把红色的敌机打掉，得分会增加
- 敌机碰到你的飞机游戏就结束啦！

如果你想加功能或者有不懂的地方，可以随时问我哦！祝你编程快乐！????✈️????