设为首页收藏本站

科学教育

搜索
科学教育»互动交流 › 教学互动 › 人机互动 › 游戏飞机大战的代码
返回列表 发新帖
查看: 386|回复: 2
打印 上一主题 下一主题

游戏飞机大战的代码

[复制链接]
zhouwei周未

1

主题

1

帖子

5

积分

新手上路

Rank: 1

积分
5
跳转到指定楼层
楼主
发表于 2025-12-2 14:58:53 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
帮我生成一个游戏飞机大战的代码
回复

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
沙发
发表于 2025-12-2 15:00:22 | 只看该作者
当然可以！我来帮你写一个简单的“飞机大战”小游戏代码，用网页上的代码来做，里面包括飞机、敌机、子弹等等。你可以直接把下面的代码复制到记事本里，保存成一个后缀名叫 `.html` 的文件，然后用浏览器打开就可以玩了！

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>飞机大战小游戏</title>
  6. <style>
  7.   body { margin:0; background: #000; overflow: hidden; }
  8.   canvas { display: block; margin: 0 auto; background: #111; }
  9. </style>
  10. </head>
  11. <body>
  12. <canvas id="game" width="400" height="600"></canvas>
  13. <script>
  14. // 画布和上下文
  15. const canvas = document.getElementById('game');
  16. const ctx = canvas.getContext('2d');

  18. const WIDTH = canvas.width;
  19. const HEIGHT = canvas.height;

  21. // 飞机
  22. const plane = {
  23.   x: WIDTH / 2 - 20,
  24.   y: HEIGHT - 80,
  25.   width: 40,
  26.   height: 60,
  27.   speed: 5
  28. };

  30. // 子弹数组
  31. let bullets = [];

  33. // 敌机数组
  34. let enemies = [];

  36. // 分数
  37. let score = 0;

  39. // 按键状态
  40. const keys = {};

  42. // 创建子弹函数
  43. function createBullet() {
  44.   bullets.push({
  45.     x: plane.x + plane.width / 2 - 3,
  46.     y: plane.y,
  47.     width: 6,
  48.     height: 12,
  49.     speed: 7
  50.   });
  51. }

  53. // 随机生成敌机
  54. function createEnemy() {
  55.   const size = 40;
  56.   enemies.push({
  57.     x: Math.random() * (WIDTH - size),
  58.     y: -size,
  59.     width: size,
  60.     height: size,
  61.     speed: 2 + Math.random() * 2
  62.   });
  63. }

  65. // 监听键盘按下
  66. window.addEventListener('keydown', function(e) {
  67.   keys[e.key] = true;

  69.   // 空格键发射子弹
  70.   if (e.code === 'Space') {
  71.     createBullet();
  72.   }
  73. });

  75. //监听键盘松开
  76. window.addEventListener('keyup', function(e) {
  77.   keys[e.key] = false;
  78. });

  80. // 碰撞检测函数
  81. function isColliding(a, b) {
  82.   return !(
  83.     a.x + a.width < b.x ||
  84.     a.x > b.x + b.width ||
  85.     a.y + a.height < b.y ||
  86.     a.y > b.y + b.height
  87.   );
  88. }

  90. // 游戏主循环
  91. function gameLoop() {
  92.   // 清空画布
  93.   ctx.clearRect(0, 0, WIDTH, HEIGHT);

  95.   // 移动飞机
  96.   if (keys['ArrowLeft'] && plane.x > 0) {
  97.     plane.x -= plane.speed;
  98.   }
  99.   if (keys['ArrowRight'] && plane.x + plane.width < WIDTH) {
  100.     plane.x += plane.speed;
  101.   }

  103.   // 画飞机（用三角形表示）
  104.   ctx.fillStyle = 'skyblue';
  105.   ctx.beginPath();
  106.   ctx.moveTo(plane.x + plane.width / 2, plane.y);
  107.   ctx.lineTo(plane.x, plane.y + plane.height);
  108.   ctx.lineTo(plane.x + plane.width, plane.y + plane.height);
  109.   ctx.closePath();
  110.   ctx.fill();

  112.   // 移动子弹，画子弹
  113.   for (let i = bullets.length - 1; i >= 0; i--) {
  114.     let b = bullets[i];
  115.     b.y -= b.speed;

  117.     if (b.y + b.height < 0) {
  118.       bullets.splice(i, 1);
  119.       continue;
  120.     }

  122.     ctx.fillStyle = 'yellow';
  123.     ctx.fillRect(b.x, b.y, b.width, b.height);
  124.   }

  126.   // 生成敌机（每隔一些帧数生成）
  127.   if (Math.random() < 0.02) {
  128.     createEnemy();
  129.   }

  131.   // 移动敌机，画敌机
  132.   for (let i = enemies.length - 1; i >= 0; i--) {
  133.     let e = enemies[i];
  134.     e.y += e.speed;

  136.     if (e.y > HEIGHT) {
  137.       enemies.splice(i, 1);
  138.       continue;
  139.     }

  141.     ctx.fillStyle = 'red';
  142.     ctx.fillRect(e.x, e.y, e.width, e.height);
  143.   }

  145.   // 检测子弹和敌机碰撞
  146.   for (let i = enemies.length - 1; i >= 0; i--) {
  147.     for (let j = bullets.length - 1; j >= 0; j--) {
  148.       if (isColliding(enemies[i], bullets[j])) {
  149.         enemies.splice(i, 1);
  150.         bullets.splice(j, 1);
  151.         score += 10;
  152.         break;
  153.       }
  154.     }
  155.   }

  157.   // 检测敌机和飞机碰撞
  158.   for (let e of enemies) {
  159.     if (isColliding(e, plane)) {
  160.       alert(`游戏结束！得分：${score}`);
  161.       document.location.reload();
  162.       return;
  163.     }
  164.   }

  166.   // 显示分数
  167.   ctx.fillStyle = 'white';
  168.   ctx.font = '20px Arial';
  169.   ctx.fillText('分数: ' + score, 10, 30);

  171.   // 请求下一帧动画
  172.   requestAnimationFrame(gameLoop);
  173. }

  175. // 开始游戏
  176. gameLoop();
  177. </script>
  178. </body>
  179. </html>
复制代码


### 怎么玩？
- 用键盘左右箭头键控制你的飞机左右移动。
- 按空格键发射子弹，射击从上方飞来的红色敌机。
- 打中一个敌机得10分。
- 如果敌机碰到你的飞机，游戏结束，会弹出得分。

这段代码很适合刚开始学网页编程的小伙伴，也可以做个基础项目练习。你可以试着改改速度、颜色或者增加更多功能哦~

如果有问题可以随时问我！祝你玩得开心！????✈️
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
板凳
发表于 2025-12-2 15:02:17 | 只看该作者
好呀！我来帮你写一个简单的“飞机大战”小游戏代码，用的是网页编程中的HTML和JavaScript。你可以把它放到电脑上的一个文件里，保存为 `index.html`，然后用浏览器打开就能玩啦！

这是一个简单版的飞机大战游戏，内容包括：
- 你的飞机可以用左右方向键移动
- 按空格键发射子弹击打敌机
- 敌机会从上方不断出现并向下移动
- 撞到敌机或者敌机到底游戏结束

---

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>简易飞机大战</title>
  5.     <style>
  6.         body {
  7.             margin: 0;
  8.             overflow: hidden; /* 不显示滚动条 */
  9.             background: black;
  10.         }
  11.         #gameCanvas {
  12.             background: #111;
  13.             display: block;
  14.             margin: 0 auto;
  15.             border: 2px solid white;
  16.         }
  17.     </style>
  18. </head>
  19. <body>

  21. <canvas id="gameCanvas" width="400" height="600"></canvas>

  23. <script>
  24. // 获取画布和上下文
  25. const canvas = document.getElementById('gameCanvas');
  26. const ctx = canvas.getContext('2d');

  28. const planeWidth = 40;
  29. const planeHeight = 40;

  31. let score = 0;
  32. let gameOver = false;

  34. // 玩家飞机对象
  35. const player = {
  36.     x: canvas.width / 2 - planeWidth / 2,
  37.     y: canvas.height - planeHeight - 10,
  38.     width: planeWidth,
  39.     height: planeHeight,
  40.     speed: 5,
  41.     moveLeft: false,
  42.     moveRight: false,
  43. };

  45. // 子弹数组
  46. const bullets = [];

  48. // 敌机数组
  49. const enemies = [];

  51. // 生成敌机
  52. function createEnemy() {
  53.     const enemyWidth = 40;
  54.     const enemyHeight = 40;
  55.     const x = Math.random() * (canvas.width - enemyWidth);
  56.     const y = -enemyHeight;
  57.     const speed = 2 + Math.random() * 2;
  58.     enemies.push({x, y, width: enemyWidth, height: enemyHeight, speed});
  59. }

  61. // 绘制玩家飞机
  62. function drawPlayer() {
  63.     ctx.fillStyle = 'cyan';
  64.     // 用三角形画飞机
  65.     ctx.beginPath();
  66.     ctx.moveTo(player.x + player.width/2, player.y);
  67.     ctx.lineTo(player.x, player.y + player.height);
  68.     ctx.lineTo(player.x + player.width, player.y + player.height);
  69.     ctx.closePath();
  70.     ctx.fill();
  71. }

  73. // 绘制子弹
  74. function drawBullets() {
  75.     ctx.fillStyle = 'yellow';
  76.     bullets.forEach(b => {
  77.         ctx.fillRect(b.x, b.y, b.width, b.height);
  78.     });
  79. }

  81. // 绘制敌机
  82. function drawEnemies() {
  83.     ctx.fillStyle = 'red';
  84.     enemies.forEach(e => {
  85.         ctx.fillRect(e.x, e.y, e.width, e.height);
  86.     });
  87. }

  89. // 移动玩家飞机
  90. function movePlayer() {
  91.     if (player.moveLeft && player.x > 0) {
  92.         player.x -= player.speed;
  93.     }
  94.     if (player.moveRight && player.x + player.width < canvas.width) {
  95.         player.x += player.speed;
  96.     }
  97. }

  99. // 移动子弹
  100. function moveBullets() {
  101.     for(let i = bullets.length -1; i >= 0; i--) {
  102.         bullets[i].y -= bullets[i].speed;
  103.         if (bullets[i].y < 0) {
  104.             bullets.splice(i, 1); // 把超出画面顶部的子弹删掉
  105.         }
  106.     }
  107. }

  109. // 移动敌机
  110. function moveEnemies() {
  111.     for(let i = enemies.length -1; i >= 0; i--) {
  112.         enemies[i].y += enemies[i].speed;
  113.         if (enemies[i].y > canvas.height) {
  114.             // 敌机到底，算作游戏失败
  115.             gameOver = true;
  116.         }
  117.     }
  118. }

  120. // 碰撞检测函数
  121. function isColliding(a, b) {
  122.     return !(
  123.         a.x + a.width < b.x ||
  124.         a.x > b.x + b.width ||
  125.         a.y + a.height < b.y ||
  126.         a.y > b.y + b.height
  127.     );
  128. }

  130. // 检测子弹和敌机碰撞
  131. function checkBulletEnemyCollision() {
  132.     for(let i = enemies.length -1; i >= 0; i--) {
  133.         for(let j = bullets.length -1; j >= 0; j--) {
  134.             if(isColliding(enemies[i], bullets[j])) {
  135.                 // 击中了敌机
  136.                 enemies.splice(i,1);
  137.                 bullets.splice(j,1);
  138.                 score += 10;
  139.                 break; // 一个敌机被一个子弹击中后跳出内层循环
  140.             }
  141.         }
  142.     }
  143. }

  145. // 检测玩家和敌机碰撞
  146. function checkPlayerEnemyCollision() {
  147.     for(let i = 0; i < enemies.length; i++) {
  148.         if(isColliding(player, enemies[i])) {
  149.             gameOver = true;
  150.             break;
  151.         }
  152.     }
  153. }

  155. // 显示分数
  156. function drawScore() {
  157.     ctx.fillStyle = 'white';
  158.     ctx.font = '20px Arial';
  159.     ctx.fillText('得分: '+score, 10, 30);
  160. }

  162. // 显示游戏结束字样
  163. function drawGameOver() {
  164.     ctx.fillStyle = 'white';
  165.     ctx.font = '40px Arial';
  166.     ctx.textAlign = 'center';
  167.     ctx.fillText('游戏结束', canvas.width / 2, canvas.height / 2);
  168.     ctx.font = '20px Arial';
  169.     ctx.fillText('得分: '+score, canvas.width / 2, canvas.height / 2 + 40);
  170. }

  172. // 主循环
  173. function gameLoop() {
  174.     if (gameOver) {
  175.         drawGameOver();
  176.         return;
  177.     }

  179.     // 清空画布
  180.     ctx.clearRect(0, 0, canvas.width, canvas.height);

  182.     movePlayer();
  183.     moveBullets();
  184.     moveEnemies();
  185.    
  186.     checkBulletEnemyCollision();
  187.     checkPlayerEnemyCollision();

  189.     drawPlayer();
  190.     drawBullets();
  191.     drawEnemies();
  192.     drawScore();

  194.     requestAnimationFrame(gameLoop);
  195. }

  197. // 控制按键
  198. document.addEventListener('keydown', function(e) {
  199.     if(e.code === 'ArrowLeft') {
  200.         player.moveLeft = true;
  201.     } else if(e.code === 'ArrowRight') {
  202.         player.moveRight = true;
  203.     } else if(e.code === 'Space') {
  204.         // 发射子弹
  205.         bullets.push({
  206.             x: player.x + player.width/2 - 2,
  207.             y: player.y,
  208.             width:4,
  209.             height:10,
  210.             speed:7,
  211.         });
  212.     }
  213. });

  215. document.addEventListener('keyup', function(e) {
  216.     if(e.code === 'ArrowLeft') {
  217.         player.moveLeft = false;
  218.     } else if(e.code === 'ArrowRight') {
  219.         player.moveRight = false;
  220.     }
  221. });

  223. // 每秒生成一个敌机
  224. setInterval(() => {
  225.     if(!gameOver) {
  226.         createEnemy();
  227.     }
  228. }, 1000);

  230. // 开始游戏
  231. gameLoop();

  233. </script>

  235. </body>
  236. </html>
复制代码


---

###怎么玩？
1. 左右方向键控制飞机左右移动
2. 空格键发射子弹
3. 尽量用子弹打掉红色的敌机，不让敌机碰到你的飞机或者飞到底部
4. 游戏结束时会显示“游戏结束”和你的得分

---

有没有听明白呀？这个游戏其实就是用画布不停地画图，动画就是让东西的位置一帧一帧地改变，看起来像在动。飞机、子弹和敌机都是用简单的颜色和形状表示的，容易理解。

如果你想换飞机样子或增加新功能，可以再问我，我帮你改哦！祝你玩得开心！????✈️????
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表