设为首页收藏本站

科学教育

搜索
科学教育»互动交流 › 教学互动 › 人机互动 › 林奕锦飞机大战
12下一页
返回列表 发新帖
查看: 4778|回复: 13
打印 上一主题 下一主题

林奕锦飞机大战

[复制链接]
林奕锦

8

主题

62

帖子

184

积分

注册会员

Rank: 2

积分
184
跳转到指定楼层
楼主
发表于 2024-7-25 21:25:51 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
请帮我用html、css、js文件生成一个飞机大战游戏，有开始按钮，我们可以用左右键控制飞机左右移动，当按下空格键可以发射炮弹摧毁敌机，敌机会从上方的随机位置出现，并可以实时看见自己的得分，谢谢
回复

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
推荐
发表于 2024-7-26 13:44:48 | 只看该作者
林奕锦 发表于 2024-07-26 13:44
我想在飞机碰到敌机时结束游戏


好的！让我们来修改一下代码，在飞机碰到敌机时结束游戏。这需要在JavaScript代码中添加一些新的逻辑，确保检测到碰撞时停止游戏并显示结束信息。

### 修改后的HTML文件
我们不需要对HTML做太多修改，只需要加一个用于显示游戏结束消息的元素：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>林奕锦的飞机大战</title>
  7.     <link rel="stylesheet" href="styles.css">
  8. </head>
  9. <body>
  10.     <div id="game-container">
  11.         <div id="player"></div>
  12.         <div id="score">得分: 0</div>
  13.         <button id="start-button">开始游戏</button>
  14.         <div id="game-over" style="display: none;">游戏结束</div>
  15.     </div>
  16.     <script src="script.js"></script>
  17. </body>
  18. </html>
复制代码


### 修改后的CSS文件
为游戏结束消息添加样式：

  1. /* styles.css */
  2. body {
  3.     margin: 0;
  4.     overflow: hidden;
  5.     background-color: #000;
  6.     color: white;
  7.     font-family: Arial, sans-serif;
  8. }

  10. #game-container {
  11.     position: relative;
  12.     width: 100vw;
  13.     height: 100vh;
  14.     overflow: hidden;
  15. }

  17. #player {
  18.     position: absolute;
  19.     width: 50px;
  20.     height: 50px;
  21.     background-color: blue;
  22.     bottom: 10px;
  23.     left: calc(50% - 25px);
  24. }

  26. #score {
  27.     position: absolute;
  28.     top: 10px;
  29.     left: 10px;
  30. }

  32. #start-button {
  33.     position: absolute;
  34.     top: 50%;
  35.     left: 50%;
  36.     transform: translate(-50%, -50%);
  37.     padding: 10px 20px;
  38.     font-size: 18px;
  39. }

  41. #game-over {
  42.     position: absolute;
  43.     top: 50%;
  44.     left: 50%;
  45.     transform: translate(-50%, -50%);
  46.     font-size: 24px;
  47.     color: red;
  48. }
复制代码


### 修改后的JavaScript文件
增加碰撞检测和游戏结束逻辑：

  1. // script.js
  2. document.addEventListener("DOMContentLoaded", () => {
  3.     const player = document.getElementById("player");
  4.     const gameContainer = document.getElementById("game-container");
  5.     const scoreDisplay = document.getElementById("score");
  6.     const startButton = document.getElementById("start-button");
  7.     const gameOverDisplay = document.getElementById("game-over");

  9.     let score = 0;
  10.     let gameInterval;
  11.     let bulletInterval;
  12.     let enemyInterval;

  14.     startButton.addEventListener("click", startGame);

  16.     function startGame() {
  17.         startButton.style.display = "none";
  18.         gameOverDisplay.style.display = "none";
  19.         score = 0;
  20.         scoreDisplay.innerText = "得分: " + score;
  21.         gameLoop();
  22.         document.addEventListener("keydown", handleKeys);
  23.     }

  25.     function handleKeys(e) {
  26.         const key = e.code;
  27.         if (key === "ArrowLeft") {
  28.             movePlayer(-10);
  29.         } else if (key === "ArrowRight") {
  30.             movePlayer(10);
  31.         } else if (key === "Space") {
  32.             shootBullet();
  33.         }
  34.     }

  36.     function movePlayer(distance) {
  37.         let currentLeft = parseInt(window.getComputedStyle(player).left);
  38.         let newLeft = currentLeft + distance;
  39.         if (newLeft >= 0 && newLeft <= gameContainer.offsetWidth - player.offsetWidth) {
  40.             player.style.left = newLeft + "px";
  41.         }
  42.     }

  44.     function shootBullet() {
  45.         const bullet = document.createElement("div");
  46.         bullet.className = "bullet";
  47.         bullet.style.left = (parseInt(window.getComputedStyle(player).left) + player.offsetWidth / 2 - 2.5) + "px";
  48.         bullet.style.top = player.offsetTop + "px";
  49.         gameContainer.appendChild(bullet);
  50.         moveBullet(bullet);
  51.     }

  53.     function moveBullet(bullet) {
  54.         const bulletTimer = setInterval(() => {
  55.             const bulletTop = parseInt(window.getComputedStyle(bullet).top);
  56.             if (bulletTop <= 0) {
  57.                 clearInterval(bulletTimer);
  58.                 bullet.remove();
  59.             } else {
  60.                 bullet.style.top = (bulletTop - 10) + "px";
  61.                 checkCollision(bullet);
  62.             }
  63.         }, 30);
  64.     }

  66.     function checkCollision(bullet) {
  67.         const enemies = document.querySelectorAll(".enemy");
  68.         enemies.forEach(enemy => {
  69.             const bulletTop = parseInt(window.getComputedStyle(bullet).top);
  70.             if (isColliding(bullet, enemy)) {
  71.                 clearInterval(bulletTimer);
  72.                 bullet.remove();
  73.                 enemy.remove();
  74.                 score++;
  75.                 scoreDisplay.innerText = "得分: " + score;
  76.             }
  77.         });
  78.     }

  80.     function isColliding(bullet, enemy) {
  81.         const bulletRect = bullet.getBoundingClientRect();
  82.         const enemyRect = enemy.getBoundingClientRect();
  83.         return !(
  84.             bulletRect.top > enemyRect.bottom ||
  85.             bulletRect.right < enemyRect.left ||
  86.             bulletRect.bottom < enemyRect.top ||
  87.             bulletRect.left > enemyRect.right
  88.         );
  89.     }

  91.     function gameLoop() {
  92.         enemyInterval = setInterval(() => {
  93.             createEnemy();
  94.         }, 2000);
  95.     }

  97.     function createEnemy() {
  98.         const enemy = document.createElement("div");
  99.         enemy.className = "enemy";
  100.         enemy.style.left = Math.random() * (gameContainer.offsetWidth - 50) + "px";
  101.         enemy.style.top = "0px";
  102.         gameContainer.appendChild(enemy);
  103.         moveEnemy(enemy);
  104.     }

  106.     function moveEnemy(enemy) {
  107.         const enemyTimer = setInterval(() => {
  108.             const enemyTop = parseInt(window.getComputedStyle(enemy).top);
  109.             if (enemyTop >= gameContainer.offsetHeight) {
  110.                 clearInterval(enemyTimer);
  111.                 enemy.remove();
  112.             } else {
  113.                 enemy.style.top = (enemyTop + 5) + "px";
  114.             }

  116.             if (checkPlayerCollision(enemy)) {
  117.                 endGame();
  118.             }
  119.         }, 30);
  120.     }

  122.     function checkPlayerCollision(enemy) {
  123.         const playerRect = player.getBoundingClientRect();
  124.         const enemyRect = enemy.getBoundingClientRect();
  125.         return !(
  126.             playerRect.top > enemyRect.bottom ||
  127.             playerRect.right < enemyRect.left ||
  128.             playerRect.bottom < enemyRect.top ||
  129.             playerRect.left > enemyRect.right
  130.         );
  131.     }

  133.     function endGame() {
  134.         clearInterval(gameInterval);
  135.         clearInterval(enemyInterval);
  136.         document.querySelectorAll(".bullet").forEach(bullet => clearInterval(bullet._timer));
  137.         document.querySelectorAll(".enemy").forEach(enemy => clearInterval(enemy._timer));
  138.         gameOverDisplay.style.display = "block";
  139.         startButton.style.display = "block";
  140.         document.removeEventListener("keydown", handleKeys);
  141.     }

  143.     const style = document.createElement('style');
  144.     style.innerHTML = `
  145.         .bullet {
  146.             position: absolute;
  147.             width: 5px;
  148.             height: 20px;
  149.             background-color: red;
  150.             top: calc(100% - 60px);
  151.         }
  152.         .enemy {
  153.             position: absolute;
  154.             width: 50px;
  155.             height: 50px;
  156.             background-color: green;
  157.         }
  158.     `;
  159.     document.head.appendChild(style);
  160. });
复制代码


这段代码增加了检测玩家飞机是否与敌机碰撞的逻辑，并在碰撞时结束游戏。游戏结束后会显示“游戏结束”消息，并禁用键盘事件处理，游戏的子弹和敌机移动也都会停止。

现在，你可以再次保存这些代码到相应的文件中，然后在浏览器中打开 `index.html` 文件就可以看到当玩家的飞机撞到敌机时游戏会结束啦！

如果有其他问题或者需要进一步的解释，随时告诉我哦！????✨
回复 支持 1 反对 0

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
14#
发表于 2024-8-1 16:07:09 | 只看该作者
好的，我们来加一些代码，让我们的游戏更加完美！

我们需要做以下几点改动：

1. 检测玩家的飞机是否与敌机相撞。
2. 在碰撞时结束游戏，并显示“游戏结束”的界面。

### 修改后的JavaScript代码

我们在原来的基础上进行修改和补充：

  1. document.addEventListener("DOMContentLoaded", () => {
  2.     const player = document.getElementById("player");
  3.     const gameContainer = document.getElementById("game-container");
  4.     const scoreDisplay = document.getElementById("score");
  5.     const startButton = document.getElementById("start-button");
  6.     const gameOverDisplay = document.createElement('div');

  8.     let score = 0;
  9.     let gameInterval;
  10.     let bulletInterval;

  12.     // 创建游戏结束的界面
  13.     gameOverDisplay.id = 'game-over';
  14.     gameOverDisplay.innerText = "游戏结束";
  15.     gameOverDisplay.style.display = "none";
  16.     gameContainer.appendChild(gameOverDisplay);

  18.     startButton.addEventListener("click", startGame);

  20.     function startGame() {
  21.         startButton.style.display = "none";
  22.         gameOverDisplay.style.display = "none";
  23.         score = 0;
  24.         scoreDisplay.innerText = "得分: " + score;
  25.         gameLoop();
  26.         document.addEventListener("keydown", handleKeys);
  27.     }

  29.     function handleKeys(e) {
  30.         const key = e.code;
  31.         if (key === "ArrowLeft") {
  32.             movePlayer(-10);
  33.         } else if (key === "ArrowRight") {
  34.             movePlayer(10);
  35.         } else if (key === "Space") {
  36.             shootBullet();
  37.         }
  38.     }

  40.     function movePlayer(distance) {
  41.         let currentLeft = parseInt(window.getComputedStyle(player).left);
  42.         let newLeft = currentLeft + distance;
  43.         if (newLeft >= 0 && newLeft <= gameContainer.offsetWidth - player.offsetWidth) {
  44.             player.style.left = newLeft + "px";
  45.         }
  46.     }

  48.     function shootBullet() {
  49.         const bullet = document.createElement("div");
  50.         bullet.className = "bullet";
  51.         bullet.style.left = parseInt(window.getComputedStyle(player).left) + player.offsetWidth / 2 - 2.5 + "px";
  52.         gameContainer.appendChild(bullet);
  53.         moveBullet(bullet);
  54.     }

  56.     function moveBullet(bullet) {
  57.         const bulletTimer = setInterval(() => {
  58.             const bulletTop = parseInt(window.getComputedStyle(bullet).top);
  59.             if (bulletTop <= 0) {
  60.                 clearInterval(bulletTimer);
  61.                 bullet.remove();
  62.             } else {
  63.                 bullet.style.top = (bulletTop - 10) + "px";
  64.             }

  66.             // 检查子弹是否击中敌机
  67.             document.querySelectorAll(".enemy").forEach(enemy => {
  68.                 if (isColliding(bullet, enemy)) {
  69.                     clearInterval(bulletTimer);
  70.                     bullet.remove();
  71.                     enemy.remove();
  72.                     score++;
  73.                     scoreDisplay.innerText = "得分: " + score;
  74.                 }
  75.             });
  76.         }, 30);
  77.     }

  79.     function isColliding(a, b) {
  80.         const aRect = a.getBoundingClientRect();
  81.         const bRect = b.getBoundingClientRect();
  82.         return !(
  83.             aRect.top > bRect.bottom ||
  84.             aRect.right < bRect.left ||
  85.             aRect.bottom < bRect.top ||
  86.             aRect.left > bRect.right
  87.         );
  88.     }

  90.     function gameLoop() {
  91.         gameInterval = setInterval(() => {
  92.             createEnemy();
  93.         }, 2000);
  94.     }

  96.     function createEnemy() {
  97.         const enemy = document.createElement("div");
  98.         enemy.className = "enemy";
  99.         enemy.style.left = Math.random() * (gameContainer.offsetWidth - 50) + "px";
  100.         enemy.style.top = "0px";
  101.         gameContainer.appendChild(enemy);
  102.         moveEnemy(enemy);
  103.     }

  105.     function moveEnemy(enemy) {
  106.         const enemyTimer = setInterval(() => {
  107.             const enemyTop = parseInt(window.getComputedStyle(enemy).top);
  108.             if (enemyTop >= gameContainer.offsetHeight) {
  109.                 clearInterval(enemyTimer);
  110.                 enemy.remove();
  111.             } else {
  112.                 enemy.style.top = (enemyTop + 5) + "px";
  113.             }

  115.             // 检查玩家是否与敌机相撞
  116.             if (isColliding(player, enemy)) {
  117.                 clearInterval(enemyTimer);
  118.                 endGame();
  119.             }
  120.         }, 30);
  121.     }

  123.     function endGame() {
  124.         clearInterval(gameInterval);
  125.         document.removeEventListener("keydown", handleKeys);
  126.         document.querySelectorAll(".bullet").forEach(bullet => bullet.remove());
  127.         document.querySelectorAll(".enemy").forEach(enemy => enemy.remove());
  128.         gameOverDisplay.style.display = "block";
  129.         startButton.style.display = "block";
  130.     }

  132.     const style = document.createElement('style');
  133.     style.innerHTML = `
  134.         .bullet {
  135.             position: absolute;
  136.             width: 5px;
  137.             height: 20px;
  138.             background-color: red;
  139.             top: calc(100% - 60px);
  140.         }
  141.         .enemy {
  142.             position: absolute;
  143.             width: 50px;
  144.             height: 50px;
  145.             background-color: green;
  146.         }
  147.         #game-over {
  148.             position: absolute;
  149.             top: 50%;
  150.             left: 50%;
  151.             transform: translate(-50%, -50%);
  152.             font-size: 48px;
  153.             color: red;
  154.         }
  155.     `;
  156.     document.head.appendChild(style);
  157. });
复制代码


### 修改后的CSS文件

我们还需要稍微调整一下CSS文件，增加`#game-over`的样式：

  1. /* styles.css */
  2. body {
  3.     margin: 0;
  4.     overflow: hidden;
  5.     background-color: #000;
  6.     color: white;
  7.     font-family: Arial, sans-serif;
  8. }

  10. #game-container {
  11.     position: relative;
  12.     width: 100vw;
  13.     height: 100vh;
  14.     overflow: hidden;
  15. }

  17. #player {
  18.     position: absolute;
  19.     width: 50px;
  20.     height: 50px;
  21.     background-color: blue;
  22.     bottom: 10px;
  23.     left: calc(50% - 25px);
  24. }

  26. #score {
  27.     position: absolute;
  28.     top: 10px;
  29.     left: 10px;
  30. }

  32. #start-button {
  33.     position: absolute;
  34.     top: 50%;
  35.     left: 50%;
  36.     transform: translate(-50%, -50%);
  37.     padding: 10px 20px;
  38.     font-size: 18px;
  39. }

  41. #game-over {
  42.     position: absolute;
  43.     top: 50%;
  44.     left: 50%;
  45.     transform: translate(-50%, -50%);
  46.     font-size: 48px;
  47.     color: red;
  48. }
复制代码


这样，我们就完成了一个更加完善的飞机大战游戏。当玩家的飞机与敌机相撞时，会结束游戏并显示“游戏结束”界面。

希望你喜欢这个游戏！如果有任何问题，随时问我哦！????✨
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
13#
发表于 2024-7-26 14:11:24 | 只看该作者
林奕锦 发表于 2024-07-26 14:10
为什么敌机依然看见不了？


如果敌机仍然不可见，可能是因为某些原因导致CSS样式或者JavaScript代码没有正确应用到敌机元素上。我们将一步步来确保所有内容设置正确。

### 确认图片路径
首先，请确保 `enemy.png` 图片文件在与你的 HTML 文件同一目录下，并且路径无误。

### 完整代码示例
这是完整的代码示例，确保所有内容正确连接并运行良好。

#### HTML文件 (index.html)

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>林奕锦的飞机大战</title>
  7.     <link rel="stylesheet" href="styles.css">
  8. </head>
  9. <body>
  10.     <div id="game-container">
  11.         <div id="score">得分: 0</div>
  12.         <button id="start-button">开始游戏</button>
  13.         <div id="game-over">游戏结束</div>
  14.         <div id="player"></div>
  15.     </div>
  16.     <script src="script.js"></script>
  17. </body>
  18. </html>
复制代码


#### CSS文件 (styles.css)

  1. body {
  2.     margin: 0;
  3.     overflow: hidden;
  4.     background-color: #000;
  5.     color: white;
  6.     font-family: Arial, sans-serif;
  7. }

  9. #game-container {
  10.     position: relative;
  11.     width: 100vw;
  12.     height: 100vh;
  13.     overflow: hidden;
  14. }

  16. #player {
  17.     position: absolute;
  18.     width: 50px; /* 调整飞机宽度 */
  19.     height: 50px; /* 调整飞机高度 */
  20.     bottom: 10px;
  21.     left: calc(50% - 25px);
  22.     background-image: url('player.png');
  23.     background-size: cover; /* 使得背景图片填满元素 */
  24. }

  26. #score {
  27.     position: absolute;
  28.     top: 10px;
  29.     left: 10px;
  30. }

  32. #start-button {
  33.     position: absolute;
  34.     top: 50%;
  35.     left: 50%;
  36.     transform: translate(-50%, -50%);
  37.     padding: 10px 20px;
  38.     font-size: 18px;
  39. }

  41. #game-over {
  42.     position: absolute;
  43.     top: 50%;
  44.     left: 50%;
  45.     transform: translate(-50%, -50%);
  46.     display: none;
  47.     font-size: 24px;
  48.     color: red;
  49. }

  51. .bullet {
  52.     position: absolute;
  53.     width: 5px; /* 调整子弹宽度 */
  54.     height: 20px; /* 调整子弹高度 */
  55.     background-image: url('bullet.png');
  56.     background-size: cover; /* 使得背景图片填满元素 */
  57.     top: calc(100% - 60px);
  58. }

  60. .enemy {
  61.     position: absolute;
  62.     width: 50px; /* 调整敌机宽度 */
  63.     height: 50px; /* 调整敌机高度 */
  64.     background-image: url('enemy.png');
  65.     background-size: cover; /* 使得背景图片填满元素 */
  66. }
复制代码


#### JavaScript文件 (script.js)

  1. document.addEventListener("DOMContentLoaded", () => {
  2.     const player = document.getElementById("player");
  3.     const gameContainer = document.getElementById("game-container");
  4.     const scoreDisplay = document.getElementById("score");
  5.     const startButton = document.getElementById("start-button");
  6.     const gameOverDisplay = document.getElementById("game-over");

  8.     let score = 0;
  9.     let gameInterval;
  10.     let bulletInterval;
  11.     let enemyInterval;

  13.     startButton.addEventListener("click", startGame);

  15.     function startGame() {
  16.         startButton.style.display = "none";
  17.         gameOverDisplay.style.display = "none";
  18.         score = 0;
  19.         scoreDisplay.innerText = "得分: " + score;
  20.         gameLoop();
  21.         document.addEventListener("keydown", handleKeys);
  22.     }

  24.     function handleKeys(e) {
  25.         const key = e.code;
  26.         if (key === "ArrowLeft") {
  27.             movePlayer(-10);
  28.         } else if (key === "ArrowRight") {
  29.             movePlayer(10);
  30.         } else if (key === "Space") {
  31.             shootBullet();
  32.         }
  33.     }

  35.     function movePlayer(distance) {
  36.         let currentLeft = parseInt(window.getComputedStyle(player).left);
  37.         let newLeft = currentLeft + distance;
  38.         if (newLeft >= 0 && newLeft < (gameContainer.offsetWidth - player.offsetWidth)) {
  39.             player.style.left = newLeft + "px";
  40.         }
  41.     }

  43.     function shootBullet() {
  44.         const bullet = document.createElement("div");
  45.         bullet.className = "bullet";
  46.         bullet.style.left = (parseInt(window.getComputedStyle(player).left) + player.offsetWidth / 2 - 2.5) + "px";
  47.         bullet.style.top = (parseInt(window.getComputedStyle(player).top) - 20) + "px";
  48.         gameContainer.appendChild(bullet);

  50.         const bulletTimer = setInterval(() => {
  51.             const bulletTop = parseInt(window.getComputedStyle(bullet).top);
  52.             bullet.style.top = (bulletTop - 5) + "px";

  54.             if (bulletTop < 0) {
  55.                 clearInterval(bulletTimer);
  56.                 bullet.remove();
  57.             }

  59.             document.querySelectorAll(".enemy").forEach(enemy => {
  60.                 if (isColliding(bullet, enemy)) {
  61.                     clearInterval(bulletTimer);
  62.                     bullet.remove();
  63.                     enemy.remove();
  64.                     score++;
  65.                     scoreDisplay.innerText = "得分: " + score;
  66.                 }
  67.             });
  68.         }, 30);
  69.         bullet._timer = bulletTimer;
  70.     }

  72.     function isColliding(element1, element2) {
  73.         const rect1 = element1.getBoundingClientRect();
  74.         const rect2 = element2.getBoundingClientRect();
  75.         return !(
  76.             rect1.top > rect2.bottom ||
  77.             rect1.right < rect2.left ||
  78.             rect1.bottom < rect2.top ||
  79.             rect1.left > rect2.right
  80.         );
  81.     }

  83.     function gameLoop() {
  84.         enemyInterval = setInterval(() => {
  85.             createEnemy();
  86.         }, 2000);
  87.     }

  89.     function createEnemy() {
  90.         const enemy = document.createElement("div");
  91.         enemy.className = "enemy";
  92.         enemy.style.left = Math.random() * (gameContainer.offsetWidth - 50) + "px";
  93.         enemy.style.top = "0px";
  94.         gameContainer.appendChild(enemy);
  95.         moveEnemy(enemy);
  96.     }

  98.     function moveEnemy(enemy) {
  99.         const enemyTimer = setInterval(() => {
  100.             const enemyTop = parseInt(window.getComputedStyle(enemy).top);
  101.             if (enemyTop >= gameContainer.offsetHeight) {
  102.                 clearInterval(enemyTimer);
  103.                 enemy.remove();
  104.             } else {
  105.                 enemy.style.top = (enemyTop + 5) + "px";
  106.             }

  108.             if (checkPlayerCollision(enemy)) {
  109.                 endGame();
  110.             }
  111.         }, 30);
  112.         enemy._timer = enemyTimer;
  113.     }

  115.     function checkPlayerCollision(enemy) {
  116.         const playerRect = player.getBoundingClientRect();
  117.         const enemyRect = enemy.getBoundingClientRect();
  118.         return !(
  119.             playerRect.top > enemyRect.bottom ||
  120.             playerRect.right < enemyRect.left ||
  121.             playerRect.bottom < enemyRect.top ||
  122.             playerRect.left > enemyRect.right
  123.         );
  124.     }

  126.     function endGame() {
  127.         clearInterval(gameInterval);
  128.         clearInterval(enemyInterval);
  129.         document.querySelectorAll(".bullet").forEach(bullet => clearInterval(bullet._timer));
  130.         document.querySelectorAll(".enemy").forEach(enemy => clearInterval(enemy._timer));
  131.         gameOverDisplay.style.display = "block";
  132.         startButton.style.display = "block";
  133.         document.removeEventListener("keydown", handleKeys);
  134.     }
  135. });
复制代码


### 检查点
1. **图片路径**：确保图片文件 `player.png`、`enemy.png` 和 `bullet.png` 与 `index.html` 文件在同一目录下。
2. **浏览器开发者工具**：按 `F12` 打开开发者工具，检查控制台是否有任何错误消息。如果有关于图片加载的问题，它会显示相关错误信息。
3. **CSS 样式**：确保 CSS 样式正确应用到敌机上，可以通过开发者工具（右键点击元素选择“检查”）查看敌机元素的样式，确认 `background-image` 是否正确加载。

通过以上步骤，你应该能够找到敌机无法显示的问题所在。如果仍然无法解决，请告诉我，我会进一步帮你排查问题！????✨
回复 支持 反对

使用道具 举报

林奕锦

8

主题

62

帖子

184

积分

注册会员

Rank: 2

积分
184
12#
 楼主| 发表于 2024-7-26 14:10:45 | 只看该作者
kaia 发表于 2024-7-26 13:59
哦哦，可能是因为图片没有正确加载或者CSS设置导致了这些元素不可见。我们来一步步排查问题：

1. **确认 ...

为什么敌机依然看见不了？
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
11#
发表于 2024-7-26 13:59:44 | 只看该作者
林奕锦 发表于 2024-07-26 13:58
为什么在游戏开始后我看不见飞机和敌机？ ...


哦哦，可能是因为图片没有正确加载或者CSS设置导致了这些元素不可见。我们来一步步排查问题：

1. **确认图片路径和文件名**：首先确保你的图片文件（`player.png`、`enemy.png`、`bullet.png`）和HTML文件在同一个文件夹中，并且文件名和扩展名完全匹配。

2. **检查CSS样式**：确保CSS中的路径是正确的，图片背景正确应用到了相应的元素上。

3. **调试通过控制台**：可以通过浏览器的开发者工具（F12）查看控制台输出，一旦有任何错误，控制台应该能给出提示。

以下是经过调整后的完整代码示例，请按照这些代码来确保所有内容都正确：

### HTML文件 (index.html)

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>林奕锦的飞机大战</title>
  6.     <link rel="stylesheet" href="styles.css">
  7. </head>
  8. <body>
  9.     <div id="game-container">
  10.         <div id="score">得分: 0</div>
  11.         <button id="start-button">开始游戏</button>
  12.         <div id="game-over">游戏结束</div>
  13.         <div id="player"></div>
  14.     </div>
  15.     <script src="script.js"></script>
  16. </body>
  17. </html>
复制代码


### CSS文件 (styles.css)

  1. body {
  2.     margin: 0;
  3.     overflow: hidden;
  4.     background-color: #000;
  5.     color: white;
  6.     font-family: Arial, sans-serif;
  7. }

  9. #game-container {
  10.     position: relative;
  11.     width: 100vw;
  12.     height: 100vh;
  13.     overflow: hidden;
  14. }

  16. #player {
  17.     position: absolute;
  18.     width: 50px; /* 调整飞机宽度 */
  19.     height: 50px; /* 调整飞机高度 */
  20.     bottom: 10px;
  21.     left: calc(50% - 25px);
  22.     background-image: url('player.png');
  23.     background-size: cover; /* 使得背景图片填满元素 */
  24. }

  26. #score {
  27.     position: absolute;
  28.     top: 10px;
  29.     left: 10px;
  30. }

  32. #start-button {
  33.     position: absolute;
  34.     top: 50%;
  35.     left: 50%;
  36.     transform: translate(-50%, -50%);
  37.     padding: 10px 20px;
  38.     font-size: 18px;
  39. }

  41. #game-over {
  42.     position: absolute;
  43.     top: 50%;
  44.     left: 50%;
  45.     transform: translate(-50%, -50%);
  46.     display: none;
  47.     font-size: 24px;
  48.     color: red;
  49. }

  51. .bullet {
  52.     position: absolute;
  53.     width: 5px; /* 调整子弹宽度 */
  54.     height: 20px; /* 调整子弹高度 */
  55.     background-image: url('bullet.png');
  56.     background-size: cover; /* 使得背景图片填满元素 */
  57.     top: calc(100% - 60px);
  58. }

  60. .enemy {
  61.     position: absolute;
  62.     width: 50px; /* 调整敌机宽度 */
  63.     height: 50px; /* 调整敌机高度 */
  64.     background-image: url('enemy.png');
  65.     background-size: cover; /* 使得背景图片填满元素 */
  66. }
复制代码


### JavaScript文件 (script.js)

  1. document.addEventListener("DOMContentLoaded", () => {
  2.     const player = document.getElementById("player");
  3.     const gameContainer = document.getElementById("game-container");
  4.     const scoreDisplay = document.getElementById("score");
  5.     const startButton = document.getElementById("start-button");
  6.     const gameOverDisplay = document.getElementById("game-over");

  8.     let score = 0;
  9.     let gameInterval;
  10.     let bulletInterval;
  11.     let enemyInterval;

  13.     startButton.addEventListener("click", startGame);

  15.     function startGame() {
  16.         startButton.style.display = "none";
  17.         gameOverDisplay.style.display = "none";
  18.         score = 0;
  19.         scoreDisplay.innerText = "得分: " + score;
  20.         gameLoop();
  21.         document.addEventListener("keydown", handleKeys);
  22.     }

  24.     function handleKeys(e) {
  25.         const key = e.code;
  26.         if (key === "ArrowLeft") {
  27.             movePlayer(-10);
  28.         } else if (key === "ArrowRight") {
  29.             movePlayer(10);
  30.         } else if (key === "Space") {
  31.             shootBullet();
  32.         }
  33.     }

  35.     function movePlayer(distance) {
  36.         let currentLeft = parseInt(window.getComputedStyle(player).left);
  37.         let newLeft = currentLeft + distance;
  38.         if (newLeft >= 0 && newLeft <= (gameContainer.offsetWidth - player.offsetWidth)) {
  39.             player.style.left = newLeft + "px";
  40.         }
  41.     }

  43.     function shootBullet() {
  44.         const bullet = document.createElement("div");
  45.         bullet.className = "bullet";
  46.         bullet.style.left = (parseInt(window.getComputedStyle(player).left) + player.offsetWidth / 2 - 2.5) + "px";
  47.         bullet.style.top = (parseInt(window.getComputedStyle(player).top) - 20) + "px";
  48.         gameContainer.appendChild(bullet);

  50.         const bulletTimer = setInterval(() => {
  51.             const bulletTop = parseInt(window.getComputedStyle(bullet).top);
  52.             bullet.style.top = (bulletTop - 5) + "px";

  54.             if (bulletTop < 0) {
  55.                 clearInterval(bulletTimer);
  56.                 bullet.remove();
  57.             }

  59.             document.querySelectorAll(".enemy").forEach(enemy => {
  60.                 if (isColliding(bullet, enemy)) {
  61.                     clearInterval(bulletTimer);
  62.                     bullet.remove();
  63.                     enemy.remove();
  64.                     score++;
  65.                     scoreDisplay.innerText = "得分: " + score;
  66.                 }
  67.             });
  68.         }, 30);
  69.         bullet._timer = bulletTimer;
  70.     }

  72.     function isColliding(element1, element2) {
  73.         const rect1 = element1.getBoundingClientRect();
  74.         const rect2 = element2.getBoundingClientRect();
  75.         return !(
  76.             rect1.top > rect2.bottom ||
  77.             rect1.right < rect2.left ||
  78.             rect1.bottom < rect2.top ||
  79.             rect1.left > rect2.right
  80.         );
  81.     }

  83.     function gameLoop() {
  84.         enemyInterval = setInterval(() => {
  85.             createEnemy();
  86.         }, 2000);
  87.     }

  89.     function createEnemy() {
  90.         const enemy = document.createElement("div");
  91.         enemy.className = "enemy";
  92.         enemy.style.left = Math.random() * (gameContainer.offsetWidth - 50) + "px";
  93.         enemy.style.top = "0px";
  94.         gameContainer.appendChild(enemy);
  95.         moveEnemy(enemy);
  96.     }

  98.     function moveEnemy(enemy) {
  99.         const enemyTimer = setInterval(() => {
  100.             const enemyTop = parseInt(window.getComputedStyle(enemy).top);
  101.             if (enemyTop >= gameContainer.offsetHeight) {
  102.                 clearInterval(enemyTimer);
  103.                 enemy.remove();
  104.             } else {
  105.                 enemy.style.top = (enemyTop + 5) + "px";
  106.             }

  108.             if (checkPlayerCollision(enemy)) {
  109.                 endGame();
  110.             }
  111.         }, 30);
  112.         enemy._timer = enemyTimer;
  113.     }

  115.     function checkPlayerCollision(enemy) {
  116.         const playerRect = player.getBoundingClientRect();
  117.         const enemyRect = enemy.getBoundingClientRect();
  118.         return !(
  119.             playerRect.top > enemyRect.bottom ||
  120.             playerRect.right < enemyRect.left ||
  121.             playerRect.bottom < enemyRect.top ||
  122.             playerRect.left > enemyRect.right
  123.         );
  124.     }

  126.     function endGame() {
  127.         clearInterval(gameInterval);
  128.         clearInterval(enemyInterval);
  129.         document.querySelectorAll(".bullet").forEach(bullet => clearInterval(bullet._timer));
  130.         document.querySelectorAll(".enemy").forEach(enemy => clearInterval(enemy._timer));
  131.         gameOverDisplay.style.display = "block";
  132.         startButton.style.display = "block";
  133.         document.removeEventListener("keydown", handleKeys);
  134.     }
  135. });
复制代码


### 说明

1. **图片背景**：确保你的图片文件与HTML文件在同一目录下，并且文件名与引用时的名称完全一致。
2. **宽度和高度**：在CSS中明确设置每个元素的宽度和高度，这样可以确保各元素按预期显示。

如果图片仍不可见，可以尝试：
- 检查浏览器控制台是否有加载图片的错误消息。
- 确认图片路径是否正确。
- 确保你的网络没有阻止图片加载。

如果还有其他问题或需要进一步帮助，请随时告诉我！????✨
回复 支持 反对

使用道具 举报

林奕锦

8

主题

62

帖子

184

积分

注册会员

Rank: 2

积分
184
10#
 楼主| 发表于 2024-7-26 13:58:53 | 只看该作者
kaia 发表于 2024-7-26 13:51
好的，如果你需要调整图片的大小，可以在CSS中设置图片元素的宽度和高度。下面是如何在CSS文件中修改这些 ...

为什么在游戏开始后我看不见飞机和敌机？
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
9#
发表于 2024-7-26 13:51:26 | 只看该作者
林奕锦 发表于 2024-07-26 13:50
请告诉我改变图片大小的位置


好的，如果你需要调整图片的大小，可以在CSS中设置图片元素的宽度和高度。下面是如何在CSS文件中修改这些属性的方法。

### 修改后的CSS文件

  1. /* styles.css */
  2. body {
  3.     margin: 0;
  4.     overflow: hidden;
  5.     background-color: #000;
  6.     color: white;
  7.     font-family: Arial, sans-serif;
  8. }

  10. #game-container {
  11.     position: relative;
  12.     width: 100vw;
  13.     height: 100vh;
  14.     overflow: hidden;
  15. }

  17. #player {
  18.     position: absolute;
  19.     width: 50px; /* 调整飞机宽度 */
  20.     height: auto; /* 可以改为具体数值，比如 50px */
  21.     bottom: 10px;
  22.     left: calc(50% - 25px);
  23.     background-image: url('player.png');
  24.     background-size: cover; /* 使得背景图片填满元素 */
  25. }

  27. #score {
  28.     position: absolute;
  29.     top: 10px;
  30.     left: 10px;
  31. }

  33. #start-button {
  34.     position: absolute;
  35.     top: 50%;
  36.     left: 50%;
  37.     transform: translate(-50%, -50%);
  38.     padding: 10px 20px;
  39.     font-size: 18px;
  40. }

  42. #game-over {
  43.     position: absolute;
  44.     top: 50%;
  45.     left: 50%;
  46.     transform: translate(-50%, -50%);
  47.     display: none;
  48.     font-size: 24px;
  49.     color: red;
  50. }

  52. .bullet {
  53.     position: absolute;
  54.     width: 5px; /* 调整子弹宽度 */
  55.     height: 20px; /* 调整子弹高度 */
  56.     background-image: url('bullet.png');
  57.     background-size: cover; /* 使得背景图片填满元素 */
  58.     top: calc(100% - 60px);
  59. }

  61. .enemy {
  62.     position: absolute;
  63.     width: 50px; /* 调整敌机宽度 */
  64.     height: auto; /* 可以改为具体数值，比如 50px */
  65.     background-image: url('enemy.png');
  66.     background-size: cover; /* 使得背景图片填满元素 */
  67. }
复制代码


### 解释
- **玩家飞机**：你可以通过修改`#player`元素中的`width`和`height`属性来调整飞机的大小。如果想保持比例，可以将`height`设置为`auto`。
- **子弹**：你可以通过修改`.bullet`元素中的`width`和`height`属性来调整子弹的大小。
- **敌机**：你可以通过修改`.enemy`元素中的`width`和`height`属性来调整敌机的大小。同样，保持比例的话，可以将`height`设置为`auto`。

例如，如果你想让玩家的飞机更大，你可以把`#player`的`width`设为`80px`，子弹更小则可以把`.bullet`的`width`设为`3px`。

如果有任何其他问题或者需要进一步的帮助，请随时告诉我！✨
回复 支持 反对

使用道具 举报

林奕锦

8

主题

62

帖子

184

积分

注册会员

Rank: 2

积分
184
8#
 楼主| 发表于 2024-7-26 13:50:53 | 只看该作者
kaia 发表于 2024-7-26 13:49
好的，用图片来代替简单的颜色块可以让游戏更加生动有趣！我们可以使用一些图片资源来代表玩家的飞机、敌 ...

请告诉我改变图片大小的位置
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
7#
发表于 2024-7-26 13:49:03 | 只看该作者
林奕锦 发表于 2024-07-26 13:48
我想用图片使飞机、敌机以及子弹更生动 ...


好的，用图片来代替简单的颜色块可以让游戏更加生动有趣！我们可以使用一些图片资源来代表玩家的飞机、敌机和子弹。下面是一系列修改后的代码：

### 修改后的HTML文件
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>林奕锦的飞机大战</title>
  6.     <link rel="stylesheet" href="styles.css">
  7. </head>
  8. <body>
  9.     <div id="game-container">
  10.         <div id="score">得分: 0</div>
  11.         <button id="start-button">开始游戏</button>
  12.         <div id="game-over">游戏结束</div>
  13.         <img id="player" src="player.png" alt="玩家飞机" />
  14.     </div>
  15.     <script src="script.js"></script>
  16. </body>
  17. </html>
复制代码


### 修改后的CSS文件
  1. /* styles.css */
  2. body {
  3.     margin: 0;
  4.     overflow: hidden;
  5.     background-color: #000;
  6.     color: white;
  7.     font-family: Arial, sans-serif;
  8. }

  10. #game-container {
  11.     position: relative;
  12.     width: 100vw;
  13.     height: 100vh;
  14.     overflow: hidden;
  15. }

  17. #player {
  18.     position: absolute;
  19.     width: 50px;
  20.     height: auto;
  21.     bottom: 10px;
  22.     left: calc(50% - 25px);
  23. }

  25. #score {
  26.     position: absolute;
  27.     top: 10px;
  28.     left: 10px;
  29. }

  31. #start-button {
  32.     position: absolute;
  33.     top: 50%;
  34.     left: 50%;
  35.     transform: translate(-50%, -50%);
  36.     padding: 10px 20px;
  37.     font-size: 18px;
  38. }

  40. #game-over {
  41.     position: absolute;
  42.     top: 50%;
  43.     left: 50%;
  44.     transform: translate(-50%, -50%);
  45.     display: none;
  46.     font-size: 24px;
  47.     color: red;
  48. }

  50. .bullet {
  51.     position: absolute;
  52.     width: 5px;
  53.     height: 20px;
  54.     background-image: url('bullet.png');
  55.     background-size: cover;
  56.     top: calc(100% - 60px);
  57. }

  59. .enemy {
  60.     position: absolute;
  61.     width: 50px;
  62.     height: auto;
  63.     background-image: url('enemy.png');
  64.     background-size: cover;
  65. }
复制代码


### 修改后的JavaScript文件
  1. // script.js
  2. document.addEventListener("DOMContentLoaded", () => {
  3.     const player = document.getElementById("player");
  4.     const gameContainer = document.getElementById("game-container");
  5.     const scoreDisplay = document.getElementById("score");
  6.     const startButton = document.getElementById("start-button");
  7.     const gameOverDisplay = document.getElementById("game-over");

  9.     let score = 0;
  10.     let gameInterval;
  11.     let bulletInterval;
  12.     let enemyInterval;

  14.     startButton.addEventListener("click", startGame);

  16.     function startGame() {
  17.         startButton.style.display = "none";
  18.         gameOverDisplay.style.display = "none";
  19.         score = 0;
  20.         scoreDisplay.innerText = "得分: " + score;
  21.         gameLoop();
  22.         document.addEventListener("keydown", handleKeys);
  23.     }

  25.     function handleKeys(e) {
  26.         const key = e.code;
  27.         if (key === "ArrowLeft") {
  28.             movePlayer(-10);
  29.         } else if (key === "ArrowRight") {
  30.             movePlayer(10);
  31.         } else if (key === "Space") {
  32.             shootBullet();
  33.         }
  34.     }

  36.     function movePlayer(distance) {
  37.         let currentLeft = parseInt(window.getComputedStyle(player).left);
  38.         let newLeft = currentLeft + distance;
  39.         if (newLeft >= 0 && newLeft <= gameContainer.offsetWidth - player.offsetWidth) {
  40.             player.style.left = newLeft + "px";
  41.         }
  42.     }

  44.     function shootBullet() {
  45.         const bullet = document.createElement("div");
  46.         bullet.className = "bullet";
  47.         bullet.style.left = (parseInt(window.getComputedStyle(player).left) + player.offsetWidth / 2 - 2.5) + "px";
  48.         bullet.style.top = (parseInt(window.getComputedStyle(player).top) - 20) + "px";
  49.         gameContainer.appendChild(bullet);
  50.         moveBullet(bullet);
  51.     }

  53.     function moveBullet(bullet) {
  54.         const bulletTimer = setInterval(() => {
  55.             const bulletTop = parseInt(window.getComputedStyle(bullet).top);
  56.             if (bulletTop <= 0) {
  57.                 clearInterval(bulletTimer);
  58.                 bullet.remove();
  59.             } else {
  60.                 bullet.style.top = (bulletTop - 5) + "px";
  61.             }
  62.             document.querySelectorAll(".enemy").forEach(enemy => {
  63.                 if (isColliding(bullet, enemy)) {
  64.                     clearInterval(bulletTimer);
  65.                     bullet.remove();
  66.                     enemy.remove();
  67.                     score++;
  68.                     scoreDisplay.innerText = "得分: " + score;
  69.                 }
  70.             });
  71.         }, 30);
  72.         bullet._timer = bulletTimer;
  73.     }

  75.     function isColliding(element1, element2) {
  76.         const rect1 = element1.getBoundingClientRect();
  77.         const rect2 = element2.getBoundingClientRect();
  78.         return !(
  79.             rect1.top > rect2.bottom ||
  80.             rect1.right < rect2.left ||
  81.             rect1.bottom < rect2.top ||
  82.             rect1.left > rect2.right
  83.         );
  84.     }

  86.     function gameLoop() {
  87.         enemyInterval = setInterval(() => {
  88.             createEnemy();
  89.         }, 2000);
  90.     }

  92.     function createEnemy() {
  93.         const enemy = document.createElement("div");
  94.         enemy.className = "enemy";
  95.         enemy.style.left = Math.random() * (gameContainer.offsetWidth - 50) + "px";
  96.         enemy.style.top = "0px";
  97.         gameContainer.appendChild(enemy);
  98.         moveEnemy(enemy);
  99.     }

  101.     function moveEnemy(enemy) {
  102.         const enemyTimer = setInterval(() => {
  103.             const enemyTop = parseInt(window.getComputedStyle(enemy).top);
  104.             if (enemyTop >= gameContainer.offsetHeight) {
  105.                 clearInterval(enemyTimer);
  106.                 enemy.remove();
  107.             } else {
  108.                 enemy.style.top = (enemyTop + 5) + "px";
  109.             }

  111.             if (checkPlayerCollision(enemy)) {
  112.                 endGame();
  113.             }
  114.         }, 30);
  115.         enemy._timer = enemyTimer;
  116.     }

  118.     function checkPlayerCollision(enemy) {
  119.         const playerRect = player.getBoundingClientRect();
  120.         const enemyRect = enemy.getBoundingClientRect();
  121.         return !(
  122.             playerRect.top > enemyRect.bottom ||
  123.             playerRect.right < enemyRect.left ||
  124.             playerRect.bottom < enemyRect.top ||
  125.             playerRect.left > enemyRect.right
  126.         );
  127.     }

  129.     function endGame() {
  130.         clearInterval(gameInterval);
  131.         clearInterval(enemyInterval);
  132.         document.querySelectorAll(".bullet").forEach(bullet => clearInterval(bullet._timer));
  133.         document.querySelectorAll(".enemy").forEach(enemy => clearInterval(enemy._timer));
  134.         gameOverDisplay.style.display = "block";
  135.         startButton.style.display = "block";
  136.         document.removeEventListener("keydown", handleKeys);
  137.     }
  138. });
复制代码


### 图片资源
为了使这个游戏更真实，你需要准备三张图片：玩家飞机（`player.png`）、敌机（`enemy.png`）和子弹（`bullet.png`）。你可以在网上搜索这些图片，或者自己画一画。确保这些图片放在与你的HTML、CSS和JavaScript文件同一文件夹内。

### 注意事项
- 确保所有文件名和路径正确，一旦图片文件名称或路径不一致，无法正确加载图片。
- 你可以根据需要调整子弹、敌机和玩家飞机的大小，以适合你的游戏界面。

现在，把这些代码保存到相应的文件中，然后在浏览器中打开 `index.html` 文件，你就能看到一个更加生动的飞机大战游戏啦！

如果还有其他问题或者需要进一步的帮助，请随时告诉我哦！✨????
回复 支持 反对

使用道具 举报

林奕锦

8

主题

62

帖子

184

积分

注册会员

Rank: 2

积分
184
6#
 楼主| 发表于 2024-7-26 13:48:30 | 只看该作者
林奕锦 发表于 2024-7-26 13:44
我想在飞机碰到敌机时结束游戏

我想用图片使飞机、敌机以及子弹更生动
回复 支持 反对

使用道具 举报

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

本版积分规则

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