孙浩轩飞机大战

孙浩轩3

帮我生成一个飞机大战的代码

kaia

好的！我来帮你写一个简单的“飞机大战”小游戏，适合小学生学习用。我们用网页编程里的HTML和JavaScript来做，这样你可以直接在浏览器里玩。

这个游戏会有：
- 你的飞机（可以左右移动）
- 敌人的飞机（会自动往下飞）
- 子弹（可以发射击打敌机）
- 计分和结束判断

下面是完整代码，你打开记事本，复制粘贴保存为 `plane_battle.html`，然后用浏览器打开就能玩了：

1. <!DOCTYPE html>
   
2. <html lang="zh-CN">
   
3. <head>
   
4. <meta charset="UTF-8" />
   
5. <title>孙浩轩飞机大战</title>
   
6. <style>
   
7.   body {
   
8.     margin: 0;
   
9.     overflow: hidden;
   
10.     background: black;
    
11.   }
    
12.   #gameCanvas {
    
13.     background: #111;
    
14.     display: block;
    
15.     margin: 0 auto;
    
16.   }
    
17.   #scoreBoard {
    
18.     color: white;
    
19.     font-size: 20px;
    
20.     text-align: center;
    
21.     margin-top: 5px;
    
22.   }
    
23. </style>
    
24. </head>
    
25. <body>
    
26. 
    
27. <canvas id="gameCanvas" width="400" height="600"></canvas>
    
28. <div id="scoreBoard">得分: 0</div>
    
29. 
    
30. <script>
    
31. const canvas = document.getElementById('gameCanvas');
    
32. const ctx = canvas.getContext('2d');
    
33. 
    
34. const planeWidth = 40;
    
35. const planeHeight = 60;
    
36. let planeX = canvas.width / 2 - planeWidth / 2;
    
37. const planeY = canvas.height - planeHeight - 10;
    
38. 
    
39. let bullets = []; // 子弹数组
    
40. let enemies = []; // 敌机数组
    
41. let score = 0;
    
42. let gameOver = false;
    
43. 
    
44. // 控制飞机左右移动
    
45. let leftPressed = false;
    
46. let rightPressed = false;
    
47. 
    
48. // 监听键盘事件
    
49. document.addEventListener('keydown', (e) => {
    
50.   if (e.code === 'ArrowLeft') leftPressed = true;
    
51.   else if (e.code === 'ArrowRight') rightPressed = true;
    
52.   else if (e.code === 'Space') shootBullet();
    
53. });
    
54. 
    
55. document.addEventListener('keyup', (e) => {
    
56.   if (e.code === 'ArrowLeft') leftPressed = false;
    
57.   else if (e.code === 'ArrowRight') rightPressed = false;
    
58. });
    
59. 
    
60. // 飞机画成三角形
    
61. function drawPlane() {
    
62.   ctx.fillStyle = 'skyblue';
    
63.   ctx.beginPath();
    
64.   ctx.moveTo(planeX + planeWidth / 2, planeY); // 顶点
    
65.   ctx.lineTo(planeX, planeY + planeHeight);
    
66.   ctx.lineTo(planeX + planeWidth, planeY + planeHeight);
    
67.   ctx.closePath();
    
68.   ctx.fill();
    
69. }
    
70. 
    
71. // 子弹画成细细的红色矩形
    
72. function drawBullets() {
    
73.   ctx.fillStyle = 'red';
    
74.   bullets.forEach(bullet => {
    
75.     ctx.fillRect(bullet.x, bullet.y, 4, 10);
    
76.   });
    
77. }
    
78. 
    
79. // 敌机画成绿色矩形
    
80. function drawEnemies() {
    
81.   ctx.fillStyle = 'lime';
    
82.   enemies.forEach(enemy => {
    
83.     ctx.fillRect(enemy.x, enemy.y, 40, 30);
    
84.   });
    
85. }
    
86. 
    
87. // 发射子弹，把子弹放到数组里
    
88. function shootBullet() {
    
89.   if (gameOver) return;
    
90.   bullets.push({
    
91.     x: planeX + planeWidth / 2 - 2,
    
92.     y: planeY
    
93.   });
    
94. }
    
95. 
    
96. // 更新子弹位置
    
97. function updateBullets() {
    
98.   bullets.forEach((bullet, index) => {
    
99.     bullet.y -= 7; // 子弹往上飞
    
100.     if (bullet.y < 0) {
     
101.       bullets.splice(index, 1); // 超出屏幕就删掉
     
102.     }
     
103.   });
     
104. }
     
105. 
     
106. // 生成敌机
     
107. function spawnEnemy() {
     
108.   if (gameOver) return;
     
109.   const x = Math.random() * (canvas.width - 40);
     
110.   enemies.push({ x: x, y: 0 });
     
111. }
     
112. 
     
113. // 更新敌机位置
     
114. function updateEnemies() {
     
115.   enemies.forEach((enemy, index) => {
     
116.     enemy.y += 2;
     
117.     // 敌机飞到底部，游戏结束
     
118.     if (enemy.y > canvas.height) {
     
119.       gameOver = true;
     
120.     }
     
121.   });
     
122. }
     
123. 
     
124. // 检查碰撞，子弹和敌机
     
125. function checkCollisions() {
     
126.   bullets.forEach((bullet, bIndex) => {
     
127.     enemies.forEach((enemy, eIndex) => {
     
128.       if (
     
129.         bullet.x > enemy.x &&
     
130.         bullet.x < enemy.x + 40 &&
     
131.         bullet.y > enemy.y &&
     
132.         bullet.y < enemy.y + 30
     
133.       ) {
     
134.         // 碰撞了
     
135.         bullets.splice(bIndex, 1);
     
136.         enemies.splice(eIndex, 1);
     
137.         score += 10;
     
138.         document.getElementById('scoreBoard').innerText = '得分: ' + score;
     
139.       }
     
140.     });
     
141.   });
     
142. }
     
143. 
     
144. // 更新飞机位置
     
145. function updatePlane() {
     
146.   if (leftPressed && planeX > 0) {
     
147.     planeX -= 5;
     
148.   }
     
149.   if (rightPressed && planeX < canvas.width - planeWidth) {
     
150.     planeX += 5;
     
151.   }
     
152. }
     
153. 
     
154. // 游戏主循环
     
155. function gameLoop() {
     
156.   if (gameOver) {
     
157.     ctx.fillStyle = 'white';
     
158.     ctx.font = '40px Arial';
     
159.     ctx.fillText('游戏结束', canvas.width / 2 - 100, canvas.height / 2);
     
160.     return;
     
161.   }
     
162. 
     
163.   // 清空画布
     
164.   ctx.clearRect(0, 0, canvas.width, canvas.height);
     
165. 
     
166.   updatePlane();
     
167.   updateBullets();
     
168.   updateEnemies();
     
169.   checkCollisions();
     
170. 
     
171.   drawPlane();
     
172.   drawBullets();
     
173.   drawEnemies();
     
174. 
     
175.   requestAnimationFrame(gameLoop);
     
176. }
     
177. 
     
178. // 每隔1秒生成新敌机
     
179. setInterval(spawnEnemy, 1000);
     
180. 
     
181. // 开始游戏
     
182. gameLoop();
     
183. </script>
     
184. 
     
185. </body>
     
186. </html>

复制代码

### 怎么玩呢？
- 用键盘上的 **←** 和 **→** 控制你的飞机左右移动
- 按空格键 **Space** 发射子弹
- 射击从上方来的敌机
- 如果敌机飞到底部，游戏结束，会显示“游戏结束”
- 右上角有得分板，击中敌机会加分哦

你先试试看，如果想让飞机更漂亮或者增加更多功能，我还能帮你修改。祝你玩得开心！????✈️