飞机

金麟--天下会 · 发表于 2025-12-2 09:42:52

帮我生成一个飞机大战游戏的html

kaia · 发表于 2025-12-2 09:43:18

好的！我来帮你做一个简单的“飞机大战”游戏的网页。这个游戏里，你可以用键盘控制小飞机左右移动，按空格键发射子弹，击中敌机得分哦！

下面是完整的代码，你可以直接复制到一个后缀名是 `.html` 的文件里，用浏览器打开玩：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简单飞机大战游戏</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #000;
color: #fff;
font-family: Arial, sans-serif;
user-select: none;
}
#game {
position: relative;
width: 400px;
height: 600px;
margin: 20px auto;
background: #111;
border: 2px solid #444;
overflow: hidden;
}
#player {
position: absolute;
bottom: 20px;
left: 180px;
width: 40px;
height: 60px;
background: url('https://i.imgur.com/FHHvQyF.png') no-repeat center center / contain;
}
.bullet {
position: absolute;
width: 5px;
height: 15px;
background: yellow;
border-radius: 2px;
}
.enemy {
position: absolute;
width: 40px;
height: 40px;
background: url('https://i.imgur.com/0Mb2rUj.png') no-repeat center center / contain;
}
#score {
text-align: center;
margin-top: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<div id="game">
<div id="player"></div>
</div>
<div id="score">得分: 0</div>
<script>
const game = document.getElementById('game');
const player = document.getElementById('player');
const scoreDisplay = document.getElementById('score');
const gameWidth = game.clientWidth;
const gameHeight = game.clientHeight;
let playerX = 180; // 玩家飞机初始位置
const playerSpeed = 7;
let bullets = [];
let enemies = [];
let score = 0;
// 控制键盘方向
const keys = {
left: false,
right: false,
space: false,
};
// 监听按键按下
window.addEventListener('keydown', (e) => {
if(e.code === 'ArrowLeft') keys.left = true;
if(e.code === 'ArrowRight') keys.right = true;
if(e.code === 'Space') keys.space = true;
});
// 监听按键抬起
window.addEventListener('keyup', (e) => {
if(e.code === 'ArrowLeft') keys.left = false;
if(e.code === 'ArrowRight') keys.right = false;
if(e.code === 'Space') keys.space = false;
});
// 发射子弹
function shoot() {
// 子弹出现在飞机头顶中央
const bulletX = playerX + 17.5; // 减去子弹宽度的一半
const bulletY = gameHeight - 80;
const bullet = document.createElement('div');
bullet.classList.add('bullet');
bullet.style.left = bulletX + 'px';
bullet.style.top = bulletY + 'px';
game.appendChild(bullet);
bullets.push({el: bullet, x: bulletX, y: bulletY});
}
// 创建敌机
function createEnemy() {
const enemyX = Math.floor(Math.random() * (gameWidth - 40));
const enemyY = -40; // 从顶部开始出现
const enemy = document.createElement('div');
enemy.classList.add('enemy');
enemy.style.left = enemyX + 'px';
enemy.style.top = enemyY + 'px';
game.appendChild(enemy);
enemies.push({el: enemy, x: enemyX, y: enemyY});
}
// 更新游戏画面
function update() {
// 移动玩家飞机
if(keys.left) {
playerX -= playerSpeed;
if(playerX < 0) playerX = 0;
}
if(keys.right) {
playerX += playerSpeed;
if(playerX > gameWidth - 40) playerX = gameWidth - 40;
}
player.style.left = playerX + 'px';
// 发射子弹（限制频率防止太快）
if(keys.space && canShoot) {
shoot();
canShoot = false;
setTimeout(() => { canShoot = true; }, 300); // 0.3秒后可再次射击
}
// 移动子弹
bullets.forEach((bullet, index) => {
bullet.y -= 10;
if(bullet.y < -20) {
// 子弹超出游戏界面，移除子弹
game.removeChild(bullet.el);
bullets.splice(index, 1);
return;
}
bullet.el.style.top = bullet.y + 'px';
});
// 敌机下降
enemies.forEach((enemy, eIndex) => {
enemy.y += 3;
if(enemy.y > gameHeight) {
// 敌机到底部，游戏结束
alert('游戏结束！你的得分是：' + score);
document.location.reload();
}
enemy.el.style.top = enemy.y + 'px';
// 检测子弹和敌机碰撞
bullets.forEach((bullet, bIndex) => {
if(collide(bullet, enemy)) {
// 移除敌机和子弹
game.removeChild(enemy.el);
game.removeChild(bullet.el);
enemies.splice(eIndex, 1);
bullets.splice(bIndex, 1);
score += 10;
scoreDisplay.textContent = '得分: ' + score;
}
});
});
requestAnimationFrame(update);
}
// 碰撞检测函数
function collide(obj1, obj2) {
return !(
obj1.x > obj2.x + 40 ||
obj1.x + 5 < obj2.x ||
obj1.y > obj2.y + 40 ||
obj1.y + 15 < obj2.y
);
}
// 初始化定时创建敌机
setInterval(createEnemy, 1500);
// 控制射击冷却
let canShoot = true;
// 开始游戏循环
update();
</script>
</body>
</html>

复制代码

### 说明：
- 你可以用键盘左右箭头控制飞机移动。
- 按空格键射击子弹。
- 敌机会从上方随机位置飞下来，你要击中它。
- 如果敌机飞到底部，游戏就会结束并显示你的得分。

如果想让飞机或敌机换图片，只需要把 `#player` 和 `.enemy` 的 `background` 里面的 URL 替换成你喜欢的图片链接就行啦。

玩得开心！如果你有问题，随时问我！????