何星辰飞机大战

何星辰 · 发表于 2025-12-2 14:56:01

帮我生成飞机大战网页代码html,js,css

kaia · 发表于 2025-12-2 14:58:32

好的！我来帮你做一个简单的“飞机大战”网页游戏。我们会用 HTML、CSS 和 JavaScript 来实现它。

这个游戏里，你用键盘左右键控制飞机移动，按空格键发射子弹，击中敌机得分。

---

### 代码讲解：

- **HTML**：放游戏画布（canvas）和显示分数
- **CSS**：设置画布大小和背景颜色
- **JavaScript**：控制飞机、子弹、敌机，监听键盘事件，画图和检测碰撞

---

### 完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>何星辰飞机大战</title>
<style>
body {
margin: 0;
background: #000; /* 黑色背景 */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #fff;
font-family: "微软雅黑", sans-serif;
user-select: none; /* 不让文字被选中 */
}
#gameCanvas {
background: #222; /* 深灰背景当作天空 */
display: block;
border: 2px solid #555;
}
#score {
position: absolute;
top: 10px;
left: 10px;
font-size: 20px;
z-index: 1;
}
</style>
</head>
<body>
<div id="score">得分: 0</div>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreDiv = document.getElementById('score');
// 飞机属性
const planeWidth = 40;
const planeHeight = 60;
let planeX = canvas.width / 2 - planeWidth / 2;
const planeY = canvas.height - planeHeight - 10;
const planeSpeed = 7;
// 子弹数组
let bullets = [];
const bulletWidth = 5;
const bulletHeight = 10;
const bulletSpeed = 10;
// 敌机数组
let enemies = [];
const enemyWidth = 40;
const enemyHeight = 40;
const enemySpeed = 2;
let enemySpawnInterval = 1500; // 毫秒
// 键盘状态
let keys = {};
// 分数
let score = 0;
// 游戏结束标志
let gameOver = false;
// 监听键盘按下
window.addEventListener('keydown', function(e) {
keys[e.code] = true;
// 阻止上下滚动页面
if (['ArrowLeft', 'ArrowRight', 'Space'].includes(e.code)) {
e.preventDefault();
}
});
// 监听键盘松开
window.addEventListener('keyup', function(e) {
keys[e.code] = false;
});
// 飞机子弹类
class Bullet {
constructor(x, y) {
this.x = x;
this.y = y;
this.width = bulletWidth;
this.height = bulletHeight;
}
update() {
this.y -= bulletSpeed;
}
draw() {
ctx.fillStyle = 'yellow';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
// 敌机类
class Enemy {
constructor(x, y) {
this.x = x;
this.y = y;
this.width = enemyWidth;
this.height = enemyHeight;
}
update() {
this.y += enemySpeed;
}
draw() {
ctx.fillStyle = 'red';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
// 产生随机敌机
function spawnEnemy() {
let x = Math.random() * (canvas.width - enemyWidth);
let enemy = new Enemy(x, -enemyHeight);
enemies.push(enemy);
}
// 碰撞检测函数（矩形碰撞）
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 gameLoop() {
if (gameOver) {
ctx.fillStyle = 'white';
ctx.font = '40px 微软雅黑';
ctx.fillText('游戏结束', canvas.width / 2 - 100, canvas.height / 2);
ctx.font = '20px 微软雅黑';
ctx.fillText('得分：' + score, canvas.width / 2 - 50, canvas.height / 2 + 40);
ctx.fillText('刷新页面重新开始', canvas.width / 2 - 90, canvas.height / 2 + 70);
return;
}
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 控制飞机移动
if (keys['ArrowLeft'] && planeX > 0) {
planeX -= planeSpeed;
}
if (keys['ArrowRight'] && planeX < canvas.width - planeWidth) {
planeX += planeSpeed;
}
// 开火（空格键）
if (keys['Space']) {
// 限制射击频率
if (!lastShotTime || Date.now() - lastShotTime > 300) {
bullets.push(new Bullet(planeX + planeWidth / 2 - bulletWidth / 2, planeY));
lastShotTime = Date.now();
}
}
// 更新并绘制子弹
for (let i = bullets.length - 1; i >= 0; i--) {
let b = bullets[i];
b.update();
if (b.y + b.height < 0) {
bullets.splice(i, 1); // 超出屏幕删掉
} else {
b.draw();
}
}
// 更新并绘制敌机
for (let i = enemies.length - 1; i >= 0; i--) {
let e = enemies[i];
e.update();
if (e.y > canvas.height) {
// 敌机到底部，游戏结束
gameOver = true;
}
e.draw();
}
// 检测子弹和敌机碰撞
for (let i = enemies.length - 1; i >= 0; i--) {
for (let j = bullets.length - 1; j >= 0; j--) {
if (isColliding(enemies[i], bullets[j])) {
// 碰撞了，删除敌机和子弹，得分+1
enemies.splice(i, 1);
bullets.splice(j, 1);
score++;
scoreDiv.textContent = '得分: ' + score;
break; // 跳出内层循环
}
}
}
// 画飞机 - 简单用三角形表示
ctx.fillStyle = 'cyan';
ctx.beginPath();
ctx.moveTo(planeX + planeWidth / 2, planeY);
ctx.lineTo(planeX, planeY + planeHeight);
ctx.lineTo(planeX + planeWidth, planeY + planeHeight);
ctx.closePath();
ctx.fill();
requestAnimationFrame(gameLoop);
}
// 定时产生敌机
setInterval(() => {
if (!gameOver) spawnEnemy();
}, enemySpawnInterval);
let lastShotTime = 0;
gameLoop();
</script>
</body>
</html>

复制代码

---

### 怎么玩？

1. 把上面的代码复制到一个叫 `index.html` 的文件里
2. 用浏览器打开它（比如 Chrome）
3. 游戏开始后：
- 按左右方向键控制飞机左右移动
- 按空格键发射子弹
4. 射击红色的敌机，每打中一架得一分
5. 敌机飞到最下面游戏结束

---

如果你想要更漂亮的飞机或者敌机，可以学着用图片代替三角形和矩形，不过这个小游戏先帮你搭好了基础，理解起来比较简单。

玩得开心哦！有什么问题还可以继续问我~

何星辰 · 发表于 2025-12-2 15:00:06

行

kaia · 发表于 2025-12-2 15:00:10

何星辰发表于 2025-12-02 15:00
行

太棒啦！???? 如果你运行代码遇到什么问题，或者想要加新功能（比如升级飞机、增加关卡），随时告诉我，我来帮你改进哦！加油玩得开心！????✈️????

阳阳阳阳阳阳 · 发表于 2025-12-2 15:04:40

帮我生成飞机大战网页代码html,js,css

何星辰 · 发表于 2025-12-9 14:56:10

事件是什么