飞机

张葉彬 · 发表于 2025-12-2 09:37:04

帮我生成一个飞机大战的网络代码，html,css,js

kaia · 发表于 2025-12-2 09:38:12

好哒！我来帮你写一个简单的“飞机大战”小游戏代码，用HTML、CSS和JS来做。我们会做一个可以用键盘左右移动的小飞机，能够发射子弹，打掉敌机。

下面是一份完整的代码，你可以把它复制到一个新的`.html`文件里，然后用浏览器打开玩玩看！

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简单飞机大战</title>
<style>
body {
margin: 0;
background: #000;
overflow: hidden;
user-select: none;
}
#game {
position: relative;
width: 400px;
height: 600px;
margin: 20px auto;
background: url('https://i.ibb.co/Y3x1R1k/bg-star.jpg') repeat-y;
background-size: cover;
border: 2px solid #fff;
overflow: hidden;
}
/* 我们的飞机 */
#player {
position: absolute;
bottom: 20px;
left: 180px;
width: 40px;
height: 60px;
background: url('https://i.ibb.co/4VMnPBX/player-plane.png') no-repeat center;
background-size: contain;
}
/* 子弹样式 */
.bullet {
position: absolute;
width: 6px;
height: 14px;
background: yellow;
border-radius: 3px;
}
/* 敌机样式 */
.enemy {
position: absolute;
width: 40px;
height: 40px;
background: url('https://i.ibb.co/gT86hw1/enemy-plane.png') no-repeat center;
background-size: contain;
}
/* 分数显示 */
#scoreBoard {
position: absolute;
top: 5px;
left: 10px;
color: white;
font-weight: bold;
font-size: 20px;
z-index: 1000;
font-family: "微软雅黑", Arial, sans-serif;
}
</style>
</head>
<body>
<div id="game">
<div id="scoreBoard">得分: 0</div>
<div id="player"></div>
</div>
<script>
const game = document.getElementById('game');
const player = document.getElementById('player');
const scoreBoard = document.getElementById('scoreBoard');
const gameWidth = game.clientWidth;
const gameHeight = game.clientHeight;
let playerX = 180; // 飞机的水平位置
let speed = 5; // 飞机移动速度
let bullets = [];
let enemies = [];
let score = 0;
// 监听键盘事件
const keys = {};
window.addEventListener('keydown', e => {
keys[e.code] = true;
});
window.addEventListener('keyup', e => {
keys[e.code] = false;
});
// 发射子弹
function shoot() {
const bullet = document.createElement('div');
bullet.classList.add('bullet');
bullet.style.left = (playerX + 17) + 'px'; // 子弹在飞机正中稍偏上
bullet.style.top = (gameHeight - 80) + 'px';
game.appendChild(bullet);
bullets.push(bullet);
}
// 每隔一段时间自动射击
setInterval(() => {
shoot();
}, 300);
// 创建敌人
function createEnemy() {
const enemy = document.createElement('div');
enemy.classList.add('enemy');
enemy.style.left = Math.random() * (gameWidth - 40) + 'px';
enemy.style.top = '-40px';
game.appendChild(enemy);
enemies.push(enemy);
}
// 每一秒产生一个敌人
setInterval(() => {
createEnemy();
}, 1000);
// 游戏主循环，更新游戏状态
function gameLoop() {
// 控制飞机左右移动
if (keys['ArrowLeft']) {
playerX = Math.max(0, playerX - speed);
}
if (keys['ArrowRight']) {
playerX = Math.min(gameWidth - 40, playerX + speed);
}
player.style.left = playerX + 'px';
// 更新子弹位置
for (let i = bullets.length -1; i >= 0; i--) {
const bullet = bullets[i];
let top = parseInt(bullet.style.top);
top -= 10; // 子弹移动速度
if (top < -14) {
bullet.remove();
bullets.splice(i, 1);
} else {
bullet.style.top = top + 'px';
}
}
// 更新敌机位置
for (let i = enemies.length -1; i >= 0; i--) {
const enemy = enemies[i];
let top = parseInt(enemy.style.top);
top += 2; // 敌机移动速度
if (top > gameHeight) {
// 敌机飞出屏幕，删除它
enemy.remove();
enemies.splice(i, 1);
continue;
} else {
enemy.style.top = top + 'px';
}
// 检测敌机和飞机碰撞
if (isCollide(player, enemy)) {
alert('游戏结束！你的得分是: ' + score);
window.location.reload();
}
// 检测敌机和子弹碰撞
for (let j = bullets.length -1; j >= 0; j--) {
const bullet = bullets[j];
if (isCollide(bullet, enemy)) {
// 击中过敌机，删除敌机和子弹，加分
enemy.remove();
enemies.splice(i, 1);
bullet.remove();
bullets.splice(j, 1);
score += 10;
scoreBoard.textContent = '得分: ' + score;
break;
}
}
}
requestAnimationFrame(gameLoop);
}
// 碰撞检测函数，两个元素是否相撞
function isCollide(a, b) {
const aRect = a.getBoundingClientRect();
const bRect = b.getBoundingClientRect();
return !(
aRect.top > bRect.bottom ||
aRect.bottom < bRect.top ||
aRect.right < bRect.left ||
aRect.left > bRect.right
);
}
gameLoop();
</script>
</body>
</html>

复制代码

---

### 讲解：

- **HTML**部分定义了游戏区域`#game`，里面有我们的飞机`#player`和分数显示。
- **CSS**给飞机、敌机、子弹和背景设置了样式，让它们看起来更像游戏里真实的角色。
- **JavaScript**是游戏的核心：
  - 用键盘左右键控制飞机左右移动。
  - 飞机每隔300毫秒自动射击（发射黄色小子弹）。
  - 每隔1秒生成一个敌机，从上方往下飞。
  - 不断更新子弹和敌机的位置，判断子弹有没有击中敌机。
  - 如果敌机撞到了飞机，游戏结束并弹出分数。

---

### 怎么玩？

- 把上面的代码保存成`plane-game.html`文件。
- 用浏览器打开它。
- 用键盘左箭头和右箭头控制飞机移动。
- 飞机会自动射击，打掉飞过来的敌机。
- 射爆的敌机会加10分，敌机撞到你游戏就结束啦！

如果你想改进这个游戏，可以告诉我，我帮你再加功能，比如音效、更多敌机类型或者更炫酷的特效哦！

祝你玩得开心！????✈️????