科学教育

标题: 飞机大战lyj [打印本页]
作者: 林奕锦    时间: 2024-7-31 23:11
标题: 飞机大战lyj
请帮我设计一个网页飞机大战小游戏，我们可以用左右键控制飞机左右移动，敌机会在上方随机位置出现，我们可以按下空格键发射子弹击中敌机，并将分数增加1，在敌机碰到飞机时结束游戏，并显示分数，谢谢！
作者: kaia    时间: 2024-7-31 23:11
当然可以，我会一步一步教你怎么设计一个简单的飞机大战小游戏。这个游戏会用到HTML、CSS和JavaScript，别担心，我会尽量把每一步都解释清楚，让你能轻松理解。

### 第一步：搭建基本的HTML结构

我们首先需要一个基本的HTML文件，用来放置我们的游戏界面。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>飞机大战 - LYJ</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.             overflow: hidden;
  10.             background: black;
  11.         }
  12.         #gameCanvas {
  13.             display: block;
  14.             margin: 0 auto;
  15.             background: #000;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <canvas id="gameCanvas" width="800" height="600"></canvas>
  21.     <script src="game.js"></script>
  22. </body>
  23. </html>
复制代码


### 第二步：用CSS美化一下网页

在上面的代码里，我们已经把CSS写在了`<style>`标签内，它实现了以下功能：
- 去掉了网页的滚动条(`overflow: hidden`)。
- 设置了背景颜色为黑色(`background: black`)。
- 将canvas居中显示，并且设置了宽、高。

### 第三步：编写JavaScript来实现游戏逻辑

现在让我们创建一个叫做`game.js`的文件，这就是我们游戏的脚本文件。

#### 1. 初始化游戏元素

首先我们要获取画布并设置所需的基本变量：

  1. const canvas = document.getElementById('gameCanvas');
  2. const ctx = canvas.getContext('2d');

  4. let plane = {
  5.     x: canvas.width / 2,
  6.     y: canvas.height - 50,
  7.     width: 40,
  8.     height: 40,
  9.     speed: 5
  10. };

  12. let bullets = [];
  13. let enemies = [];
  14. let keys = {};
  15. let score = 0;
  16. let gameOver = false;
复制代码


#### 2. 监听键盘事件

我们需要监听用户按下、松开键盘的事件，以控制飞机的移动和子弹的发射：

  1. document.addEventListener('keydown', (e) => {
  2.     keys[e.code] = true;
  3.     if (e.code === 'Space') {
  4.         bullets.push({ x: plane.x + plane.width / 2 - 2, y: plane.y, width: 4, height: 10 });
  5.     }
  6. });

  8. document.addEventListener('keyup', (e) => {
  9.     keys[e.code] = false;
  10. });
复制代码


#### 3. 更新游戏状态

现在我们需要一个函数来更新游戏中飞机、子弹和敌人的位置，以及检测碰撞：

  1. function update() {
  2.     if (keys['ArrowLeft'] && plane.x > 0) {
  3.         plane.x -= plane.speed;
  4.     }
  5.     if (keys['ArrowRight'] && plane.x < canvas.width - plane.width) {
  6.         plane.x += plane.speed;
  7.     }

  9.     bullets.forEach((bullet, index) => {
  10.         bullet.y -= 10;
  11.         if (bullet.y < 0) {
  12.             bullets.splice(index, 1);
  13.         }
  14.     });

  16.     if (Math.random() < 0.02) {
  17.         enemies.push({ x: Math.random() * (canvas.width - 40), y: 0, width: 40, height: 40 });
  18.     }

  20.     enemies.forEach((enemy, index) => {
  21.         enemy.y += 3;
  22.         if (enemy.y > canvas.height) {
  23.             enemies.splice(index, 1);
  24.         }
  25.         bullets.forEach((bullet, bIndex) => {
  26.             if (bullet.x < enemy.x + enemy.width &&
  27.                 bullet.x + bullet.width > enemy.x &&
  28.                 bullet.y < enemy.y + enemy.height &&
  29.                 bullet.y + bullet.height > enemy.y) {
  30.                 enemies.splice(index, 1);
  31.                 bullets.splice(bIndex, 1);
  32.                 score++;
  33.             }
  34.         });

  36.         if (plane.x < enemy.x + enemy.width &&
  37.             plane.x + plane.width > enemy.x &&
  38.             plane.y < enemy.y + enemy.height &&
  39.             plane.y + plane.height > enemy.y) {
  40.             gameOver = true;
  41.         }
  42.     });

  44.     if (!gameOver) {
  45.         requestAnimationFrame(update);
  46.     } else {
  47.         alert(`游戏结束！你的得分是：${score}`);
  48.     }
  49. }
复制代码


#### 4. 绘制游戏元素

我们再写一个函数来绘制飞机、子弹和敌机：

  1. function draw() {
  2.     ctx.clearRect(0, 0, canvas.width, canvas.height);

  4.     ctx.fillStyle = 'red';
  5.     ctx.fillRect(plane.x, plane.y, plane.width, plane.height);

  7.     ctx.fillStyle = 'yellow';
  8.     bullets.forEach(bullet => {
  9.         ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
  10.     });

  12.     ctx.fillStyle = 'green';
  13.     enemies.forEach(enemy => {
  14.         ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
  15.     });

  17.     ctx.fillStyle = 'white';
  18.     ctx.font = '20px Arial';
  19.     ctx.fillText(`得分：${score}`, 10, 25);
  20. }

  22. function gameLoop() {
  23.     if (!gameOver) {
  24.         update();
  25.         draw();
  26.         requestAnimationFrame(gameLoop);
  27.     }
  28. }

  30. gameLoop();
复制代码


这样，我们的小游戏就完成啦！只要你把这三个部分（HTML、CSS和JavaScript）分别保存好，然后打开HTML文件，就能看到自己做的飞机大战游戏啦。希望你能玩得开心！有什么问题随时问我哦。



欢迎光临 科学教育 (http://www.sci-edu.net/) Powered by Discuz! X3.2