饭都不让

金麟--天下会 · 发表于 2026-1-20 09:55:08

本帖最后由金麟--天下会于 2026-1-20 09:59 编辑

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>飞机大战小游戏</title>
<style>
  body {
margin: 0;
overflow: hidden;
background: black;
color: white;
font-family: "微软雅黑", sans-serif;
  }
  #gameCanvas {
background: #111;
display: block;
margin: auto;
border: 2px solid white;
  }
  #scoreboard {
text-align:center;
margin-top: 10px;
  }
</style>
</head>
<body>

<canvas id="gameCanvas" width="400" height="600"></canvas>
<div id="scoreboard">
  血量：<span id="hp">3</span> 分数：<span id="score">0</span>
</div>

<script>
  const canvas = document.getElementById("gameCanvas");
  const ctx = canvas.getContext("2d");

  const planeWidth = 40;
  const planeHeight = 40;
  let planeX = (canvas.width - planeWidth) / 2;
  const planeY = canvas.height - planeHeight - 10;
  let hp = 3;
  let score = 0;

  // 敌机数组
  let enemies = [];

  // 子弹数组
  let bullets = [];

  // 控制左右移动
  let moveLeft = false;
  let moveRight = false;

  // 监听键盘按下
  window.addEventListener("keydown", function(e) {
if (e.key === "a" || e.key === "A") moveLeft = true;
if (e.key === "d" || e.key === "D") moveRight = true;
  });

  // 监听松开键盘
  window.addEventListener("keyup", function(e) {
if (e.key === "a" || e.key === "A") moveLeft = false;
if (e.key === "d" || e.key === "D") moveRight = false;
if (e.key === " ") shoot();
  });

  // 画飞机
  function drawPlane() {
ctx.fillStyle = "lightblue";
ctx.beginPath();
// 画三角形代表飞机
ctx.moveTo(planeX + planeWidth/2, planeY);
ctx.lineTo(planeX, planeY + planeHeight);
ctx.lineTo(planeX + planeWidth, planeY + planeHeight);
ctx.closePath();
ctx.fill();
  }

  // 生成敌机
  function createEnemy() {
let x = Math.random() * (canvas.width - 30);
enemies.push({x: x, y: -30, width: 30, height: 30});
  }

  // 画敌机
  function drawEnemies() {
ctx.fillStyle = "red";
enemies.forEach(enemy => {
   ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
});
  }

  // 移动敌机
  function moveEnemies() {
enemies.forEach(enemy => {
   enemy.y += 2;  // 敌机向下移动速度
});
// 删除超出画面底部的敌机
enemies = enemies.filter(enemy => enemy.y < canvas.height);
  }

  // 发射子弹
  function shoot() {
bullets.push({x: planeX + planeWidth / 2 - 2.5, y: planeY, width:5, height:10});
  }

  // 画子弹
  function drawBullets() {
ctx.fillStyle = "yellow";
bullets.forEach(bullet => {
   ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
});
  }

  // 移动子弹
  function moveBullets() {
bullets.forEach(bullet => {
   bullet.y -= 5;  // 子弹向上飞
});
// 删除飞出画面的子弹
bullets = bullets.filter(bullet => bullet.y + bullet.height > 0);
  }

  // 碰撞检测函数，检测两个矩形是否重叠
  function isColliding(rect1, rect2) {
return !(
   rect1.x > rect2.x + rect2.width ||
   rect1.x + rect1.width < rect2.x ||
   rect1.y > rect2.y + rect2.height ||
   rect1.y + rect1.height < rect2.y
);
  }

  // 检查子弹和敌机碰撞
  function checkBulletEnemyCollision() {
for (let i = bullets.length -1; i>=0; i--) {
   let b = bullets;
   for (let j = enemies.length -1; j>=0; j--) {
      let e = enemies[j];
      if (isColliding(b, e)) {
      // 消灭敌机和子弹
      bullets.splice(i,1);
      enemies.splice(j,1);
      score++;
      updateScore();
      break;
      }
   }
}
  }

  // 检查敌机和飞机碰撞
  function checkEnemyPlaneCollision() {
for (let i = enemies.length -1; i>=0; i--) {
   let e = enemies;
   let planeRect = {x: planeX, y: planeY, width: planeWidth, height: planeHeight};
   if (isColliding(e, planeRect)) {
      enemies.splice(i,1);
      hp--;
      updateHP();
      if (hp <= 0) {
      alert("游戏结束！你的得分是：" + score);
      resetGame();
      }
   }
}
  }

  // 更新血量显示
  function updateHP() {
document.getElementById("hp").textContent = hp;
  }

  // 更新分数显示
  function updateScore() {
document.getElementById("score").textContent = score;
  }

  // 重置游戏
  function resetGame() {
hp = 3;
score = 0;
enemies = [];
bullets = [];
planeX = (canvas.width - planeWidth) / 2;
updateHP();
updateScore();
  }

  // 游戏主循环
  function gameLoop() {
ctx.clearRect(0,0,canvas.width,canvas.height);

// 移动飞机
if (moveLeft && planeX > 0) planeX -= 5;
if (moveRight && planeX < canvas.width - planeWidth) planeX += 5;

drawPlane();

// 敌机出现概率控制（差不多每30帧一个）
if (Math.random() < 0.03) createEnemy();

moveEnemies();
drawEnemies();

moveBullets();
drawBullets();

checkBulletEnemyCollision();
checkEnemyPlaneCollision();

requestAnimationFrame(gameLoop);
  }

  // 开始游戏
  updateHP();
  updateScore();
  gameLoop();
</script>

<p style="text-align:center; color:#ccc; margin-top:10px;">
  操作提示：<br />
  按A键向左移动，D键向右移动，空格键发射子弹。
</p>

</body>
</html>
帮我加如一些技能并加入我的代码

kaia · 发表于 2026-1-20 09:55:19

你好！你做的飞机大战小游戏已经很棒啦！现在我们来给你的游戏加一些“技能”，让游戏更好玩。比如：

1. **加速移动**：按住某个键，飞机移动更快。
2. **连续发射**：按住空格键自动连续发射子弹。
3. **护盾技能**：按一个键可以让飞机暂时无敌，不受敌机撞击伤害。
4. **炸弹技能**：按一个键可以清屏，把所有敌机一次炸掉。

我帮你写个例子，来加一个“护盾技能”吧！按“S”键打开护盾，护盾持续5秒，期间飞机不会扣血。

---

### 1. 新增变量

在代码开头，添加控制护盾的变量：

let shieldOn = false;
let shieldDuration = 5000; // 护盾持续时间，单位毫秒
let shieldTimer = null;

复制代码

### 2. 监听键盘按下，加入S键触发护盾

window.addEventListener("keydown", function(e) {
if (e.key === "a" || e.key === "A") moveLeft = true;
if (e.key === "d" || e.key === "D") moveRight = true;
if (e.key === "s" || e.key === "S") activateShield(); // 新增护盾键
});

复制代码

### 3. 制作激活护盾的函数

function activateShield() {
if (shieldOn) return; // 如果护盾已经开启，不重复触发
shieldOn = true;
// 5秒后关闭护盾
shieldTimer = setTimeout(() => {
shieldOn = false;
}, shieldDuration);
}

复制代码

### 4. 修改检测敌机和飞机碰撞的地方，加判断护盾

找到`checkEnemyPlaneCollision`函数，把里面扣血那部分改成：

if (isColliding(e, planeRect)) {
enemies.splice(i,1);
if (!shieldOn) { // 没有护盾才会扣血
hp--;
updateHP();
}
}

复制代码

### 5. 在飞机上画个护盾圆圈，提示玩家护盾开启了

修改`drawPlane`函数，在画飞机后，判断如果护盾开了，我们画个蓝色环：

function drawPlane() {
ctx.fillStyle = "lightblue";
ctx.beginPath();
ctx.moveTo(planeX + planeWidth/2, planeY);
ctx.lineTo(planeX, planeY + planeHeight);
ctx.lineTo(planeX + planeWidth, planeY + planeHeight);
ctx.closePath();
ctx.fill();
if (shieldOn) {
ctx.strokeStyle = "cyan";
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(planeX + planeWidth/2, planeY + planeHeight/2, planeWidth, 0, Math.PI * 2);
ctx.stroke();
}
}

复制代码

---

这样，你的游戏就有了一个简单的“护盾技能”啦！当你按“S”，机身周围会出现光圈，而且暂时不会扣血。

---

如果你要，我还能帮你加连续发射或者炸弹技能哦！要不要试试？????

金麟--天下会 · 发表于 2026-1-20 09:57:57

kaia 发表于 2026-1-20 09:55
你好！你做的飞机大战小游戏已经很棒啦！现在我们来给你的游戏加一些“技能”，让游戏更好玩。比如：

1. * ...

好帮我把技能加入我的代码

kaia · 发表于 2026-1-20 09:58:07

金麟--天下会发表于 2026-01-20 09:57
kaia 发表于 2026-1-20 09:55
你好！你做的飞机大战小 ...

好的！我帮你把“护盾技能”加到你的代码里。以下是完整的修改部分，你只需要把它们合适地放入你的代码中就能用了。

---

### 1. 在最开始定义变量部分，添加：

let shieldOn = false; // 护盾是否开启
let shieldDuration = 5000; // 护盾持续时间，单位：毫秒（5秒）
let shieldTimer = null; // 护盾计时器

复制代码

---

### 2. 修改键盘按下事件监听器，加入“S”键激活护盾：

window.addEventListener("keydown", function(e) {
if (e.key === "a" || e.key === "A") moveLeft = true;
if (e.key === "d" || e.key === "D") moveRight = true;
if (e.key === "s" || e.key === "S") activateShield(); // 新增护盾按钮
});

复制代码

---

### 3. 新增护盾激活函数：

function activateShield() {
if (shieldOn) return; // 如果已经开启，直接返回不重复开启
shieldOn = true;
// 5秒后关闭护盾
shieldTimer = setTimeout(() => {
shieldOn = false;
}, shieldDuration);
}

复制代码

---

### 4. 修改检测飞机与敌机碰撞的函数`checkEnemyPlaneCollision`，让护盾生效：

把这个函数里扣血的位置改成下面这样：

function checkEnemyPlaneCollision() {
for (let i = enemies.length -1; i >= 0; i--) {
let e = enemies[i];
let planeRect = {x: planeX, y: planeY, width: planeWidth, height: planeHeight};
if (isColliding(e, planeRect)) {
enemies.splice(i,1);
if (!shieldOn) { // 如果没有护盾才扣血
hp--;
updateHP();
}
}
}
}

复制代码

---

### 5. 最后，在画飞机的函数`drawPlane`里面，画出护盾的蓝色光环提醒玩家：

function drawPlane() {
ctx.fillStyle = "lightblue";
ctx.beginPath();
ctx.moveTo(planeX + planeWidth/2, planeY);
ctx.lineTo(planeX, planeY + planeHeight);
ctx.lineTo(planeX + planeWidth, planeY + planeHeight);
ctx.closePath();
ctx.fill();
// 如果护盾开启，在飞机周围画光环
if (shieldOn) {
ctx.strokeStyle = "cyan";
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(planeX + planeWidth/2, planeY + planeHeight/2, planeWidth, 0, Math.PI * 2);
ctx.stroke();
}
}

复制代码

---

这样一来：

- 按下“S”键，飞机会获得5秒无敌护盾
- 护盾期间飞机不会被敌机撞击扣血
- 飞机周围会有一个蓝色光圈显示护盾状态

你可以试试看哦！如果还想加别的技能，也可以告诉我，我帮你写代码！????????

金麟--天下会 · 发表于 2026-1-20 10:03:02

kaia 发表于 2026-1-20 09:58
好的！我帮你把“护盾技能”加到你的代码里。以下是完整的修改部分，你只需要把它们合适地放入你的代码中 ...

帮我结合

kaia · 发表于 2026-1-20 10:07:26

金麟--天下会发表于 2026-01-20 10:03
kaia 发表于 2026-1-20 09:58
好的！我帮你把“护盾技 ...

好的，我帮你把护盾技能完整地结合到你的代码里，方便你直接使用。为了更清楚，我会把完整的JavaScript部分给你，你只要替换原来的JS代码就可以啦！

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const planeWidth = 40;
const planeHeight = 40;
let planeX = (canvas.width - planeWidth) / 2;
const planeY = canvas.height - planeHeight - 10;
let hp = 3;
let score = 0;
// 新增护盾变量
let shieldOn = false;
let shieldDuration = 5000; // 护盾持续时间5秒
let shieldTimer = null;
// 敌机数组
let enemies = [];
// 子弹数组
let bullets = [];
// 控制左右移动
let moveLeft = false;
let moveRight = false;
// 监听键盘按下
window.addEventListener("keydown", function(e) {
if (e.key === "a" || e.key === "A") moveLeft = true;
if (e.key === "d" || e.key === "D") moveRight = true;
if (e.key === "s" || e.key === "S") activateShield(); // 护盾技能
});
// 监听松开键盘
window.addEventListener("keyup", function(e) {
if (e.key === "a" || e.key === "A") moveLeft = false;
if (e.key === "d" || e.key === "D") moveRight = false;
if (e.key === " ") shoot();
});
// 画飞机
function drawPlane() {
ctx.fillStyle = "lightblue";
ctx.beginPath();
// 画三角形代表飞机
ctx.moveTo(planeX + planeWidth / 2, planeY);
ctx.lineTo(planeX, planeY + planeHeight);
ctx.lineTo(planeX + planeWidth, planeY + planeHeight);
ctx.closePath();
ctx.fill();
// 护盾开启时画光环
if (shieldOn) {
ctx.strokeStyle = "cyan";
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(planeX + planeWidth / 2, planeY + planeHeight / 2, planeWidth, 0, Math.PI * 2);
ctx.stroke();
}
}
// 生成敌机
function createEnemy() {
let x = Math.random() * (canvas.width - 30);
enemies.push({x: x, y: -30, width: 30, height: 30});
}
// 画敌机
function drawEnemies() {
ctx.fillStyle = "red";
enemies.forEach(enemy => {
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
});
}
// 移动敌机
function moveEnemies() {
enemies.forEach(enemy => {
enemy.y += 2; // 敌机向下移动速度
});
enemies = enemies.filter(enemy => enemy.y < canvas.height);
}
// 发射子弹
function shoot() {
bullets.push({x: planeX + planeWidth / 2 - 2.5, y: planeY, width: 5, height: 10});
}
// 画子弹
function drawBullets() {
ctx.fillStyle = "yellow";
bullets.forEach(bullet => {
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
});
}
// 移动子弹
function moveBullets() {
bullets.forEach(bullet => {
bullet.y -= 5; // 子弹向上飞
});
bullets = bullets.filter(bullet => bullet.y + bullet.height > 0);
}
// 碰撞检测函数，检测两个矩形是否重叠
function isColliding(rect1, rect2) {
return !(
rect1.x > rect2.x + rect2.width ||
rect1.x + rect1.width < rect2.x ||
rect1.y > rect2.y + rect2.height ||
rect1.y + rect1.height < rect2.y
);
}
// 检查子弹和敌机碰撞
function checkBulletEnemyCollision() {
for (let i = bullets.length - 1; i >= 0; i--) {
let b = bullets[i];
for (let j = enemies.length - 1; j >= 0; j--) {
let e = enemies[j];
if (isColliding(b, e)) {
bullets.splice(i, 1);
enemies.splice(j, 1);
score++;
updateScore();
break;
}
}
}
}
// 检查敌机和飞机碰撞
function checkEnemyPlaneCollision() {
let planeRect = {x: planeX, y: planeY, width: planeWidth, height: planeHeight};
for (let i = enemies.length - 1; i >= 0; i--) {
let e = enemies[i];
if (isColliding(e, planeRect)) {
enemies.splice(i,1);
if (!shieldOn) { // 护盾没开才扣血
hp--;
updateHP();
if (hp <= 0) {
alert("游戏结束！你的得分是：" + score);
document.location.reload();
}
}
}
}
}
// 激活护盾
function activateShield() {
if (shieldOn) return; // 已经激活了就不再激活
shieldOn = true;
// 5秒后关闭护盾
shieldTimer = setTimeout(() => {
shieldOn = false;
}, shieldDuration);
}
function updateHP() {
document.getElementById("hp").textContent = hp;
}
function updateScore() {
document.getElementById("score").textContent = score;
}
// 游戏主循环
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (moveLeft && planeX > 0) planeX -= 5;
if (moveRight && planeX < canvas.width - planeWidth) planeX += 5;
drawPlane();
if (Math.random() < 0.03) createEnemy();
moveEnemies();
drawEnemies();
moveBullets();
drawBullets();
checkBulletEnemyCollision();
checkEnemyPlaneCollision();
requestAnimationFrame(gameLoop);
}
// 开始游戏
updateHP();
updateScore();
gameLoop();

复制代码

---

### 你页面中需要有这段HTML显示血量和分数：

<div id="scoreboard">
血量：<span id="hp">3</span>    分数：<span id="score">0</span>
</div>
<canvas id="gameCanvas" width="400" height="600"></canvas>

复制代码

---

现在你按：

- A / D 键控制飞机左右移动
- 空格键发射子弹
- S 键启动5秒护盾，护盾期间飞机不会被敌机撞击损伤，并且会显示蓝色光圈提醒你

你可以试试看，有什么问题告诉我，我帮你继续优化！????????✈️