1

韦恩 · 发表于 2025-12-2 14:55:26

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

kaia · 发表于 2025-12-2 15:00:44

好的！我来帮你做一个简单的“飞机大战”网页游戏。你可以用它在浏览器里玩。这里会有一个小飞机，你可以用键盘左右移动，按空格键发射子弹，击中敌机得分。代码不复杂，我会加上注释，方便你理解。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简单飞机大战</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #000; /* 黑色背景 */
}
canvas {
display: block;
margin: 0 auto;
background: #111;
border: 1px solid #555;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 小飞机
const plane = {
x: canvas.width / 2 - 15,
y: canvas.height - 60,
width: 30,
height: 40,
speed: 5,
moveLeft: false,
moveRight: false
};
// 子弹数组
const bullets = [];
// 敌机数组
const enemies = [];
let score = 0;
let gameOver = false;
// 监听键盘事件
document.addEventListener('keydown', e => {
if (e.code === 'ArrowLeft') plane.moveLeft = true;
if (e.code === 'ArrowRight') plane.moveRight = true;
if (e.code === 'Space') shootBullet();
});
document.addEventListener('keyup', e => {
if (e.code === 'ArrowLeft') plane.moveLeft = false;
if (e.code === 'ArrowRight') plane.moveRight = false;
});
// 发射子弹函数
function shootBullet() {
bullets.push({
x: plane.x + plane.width / 2 - 2.5,
y: plane.y,
width: 5,
height: 10,
speed: 7
});
}
// 生成敌机
function spawnEnemy() {
const size = 30;
enemies.push({
x: Math.random() * (canvas.width - size),
y: -size,
width: size,
height: size,
speed: 2 + Math.random() * 2
});
}
// 每隔一秒生成一个敌机
setInterval(() => {
if (!gameOver) spawnEnemy();
}, 1000);
// 检测两个矩形是否相交（碰撞检测）
function isColliding(a, b) {
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;
}
// 游戏主循环
function update() {
if (gameOver) {
ctx.fillStyle = 'white';
ctx.font = '30px Arial';
ctx.fillText('游戏结束', canvas.width / 2 - 70, canvas.height / 2);
ctx.fillText('得分: ' + score, canvas.width / 2 - 50, canvas.height / 2 + 40);
return;
}
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 移动飞机
if (plane.moveLeft && plane.x > 0) {
plane.x -= plane.speed;
}
if (plane.moveRight && plane.x + plane.width < canvas.width) {
plane.x += plane.speed;
}
// 画飞机（用绿色三角形表示）
ctx.fillStyle = 'lime';
ctx.beginPath();
ctx.moveTo(plane.x + plane.width / 2, plane.y);
ctx.lineTo(plane.x, plane.y + plane.height);
ctx.lineTo(plane.x + plane.width, plane.y + plane.height);
ctx.closePath();
ctx.fill();
// 移动子弹
for (let i = bullets.length - 1; i >= 0; i--) {
let b = bullets[i];
b.y -= b.speed;
// 超出屏幕就删掉
if (b.y + b.height < 0) {
bullets.splice(i, 1);
continue;
}
// 画子弹（黄色矩形）
ctx.fillStyle = 'yellow';
ctx.fillRect(b.x, b.y, b.width, b.height);
}
// 移动敌机
for (let i = enemies.length - 1; i >= 0; i--) {
let e = enemies[i];
e.y += e.speed;
// 如果敌机碰到飞机，游戏结束
if (isColliding(e, plane)) {
gameOver = true;
}
// 如果敌机跑到底部，游戏也结束
else if (e.y > canvas.height) {
gameOver = true;
}
// 画敌机（红色矩形）
ctx.fillStyle = 'red';
ctx.fillRect(e.x, e.y, e.width, e.height);
}
// 碰撞检测：子弹和敌机
for (let i = enemies.length - 1; i >= 0; i--) {
for (let j = bullets.length - 1; j >= 0; j--) {
if (isColliding(enemies[i], bullets[j])) {
enemies.splice(i, 1);
bullets.splice(j, 1);
score += 10;
break;
}
}
}
// 显示分数
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText('得分: ' + score, 10, 30);
requestAnimationFrame(update);
}
update();
</script>
</body>
</html>

复制代码

---

**怎么玩呢？**

- 用键盘左箭头和右箭头控制自己的飞机向左或向右移动。
- 按空格键发射子弹，射击从屏幕上方飞下来的红色方块敌人。
- 击中敌人能得分，没被敌人撞到，游戏继续。
- 如果敌人碰到你，或者敌人飞到屏幕底部，游戏结束，会显示你的得分。

你只要把上面的代码复制到记事本，保存成`plane.html`，然后用浏览器打开，就可以玩游戏啦！

如果你想玩得更精彩，可以告诉我，我来帮你加更炫的特效或者新的功能哦。怎么样？

kaia · 发表于 2025-12-2 15:01:21

你好！我来帮你做一个简单的“飞机大战”小游戏网页代码哦～

这个游戏里，你可以用键盘的方向键控制飞机左右移动，按空格键发射子弹，打掉上方飞来的敌机。我们会用HTML、CSS和JavaScript来做它。

下面是完整代码，你可以直接复制到电脑上的记事本，保存成 `feiji.html`，然后用浏览器打开玩玩看！

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简易飞机大战游戏</title>
<style>
body {
margin: 0;
background: black;
overflow: hidden;
}
#gameCanvas {
background: #000;
display: block;
margin: 0 auto;
border: 2px solid white;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 飞机对象
const plane = {
x: canvas.width / 2 - 20,
y: canvas.height - 60,
width: 40,
height: 40,
speed: 5
};
// 按键状态
const keys = {};
// 子弹数组
const bullets = [];
// 敌机数组
const enemies = [];
// 生成敌机函数
function createEnemy() {
const enemy = {
x: Math.random() * (canvas.width - 40),
y: -40,
width: 40,
height: 40,
speed: 2 + Math.random() * 2
};
enemies.push(enemy);
}
// 画飞机
function drawPlane() {
ctx.fillStyle = 'deepskyblue';
// 飞机像个三角形，我们画简单点
ctx.beginPath();
ctx.moveTo(plane.x + plane.width/2, plane.y);
ctx.lineTo(plane.x, plane.y + plane.height);
ctx.lineTo(plane.x + plane.width, plane.y + plane.height);
ctx.closePath();
ctx.fill();
}
// 画子弹
function drawBullets() {
ctx.fillStyle = 'yellow';
bullets.forEach(bullet => {
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
});
}
// 画敌机
function drawEnemies() {
ctx.fillStyle = 'red';
enemies.forEach(enemy => {
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
});
}
// 更新游戏状态
function update() {
// 根据按键移动飞机
if (keys['ArrowLeft'] && plane.x > 0) {
plane.x -= plane.speed;
}
if (keys['ArrowRight'] && plane.x < canvas.width - plane.width) {
plane.x += plane.speed;
}
// 更新子弹位置
bullets.forEach((bullet, i) => {
bullet.y -= bullet.speed;
if (bullet.y < 0) {
bullets.splice(i, 1);
}
});
// 更新敌机位置
enemies.forEach((enemy, i) => {
enemy.y += enemy.speed;
if (enemy.y > canvas.height) {
enemies.splice(i, 1);
}
});
// 子弹和敌机碰撞检测
bullets.forEach((bullet, bIndex) => {
enemies.forEach((enemy, eIndex) => {
if (
bullet.x < enemy.x + enemy.width &&
bullet.x + bullet.width > enemy.x &&
bullet.y < enemy.y + enemy.height &&
bullet.y + bullet.height > enemy.y
) {
// 碰撞了，删掉子弹和敌机
bullets.splice(bIndex, 1);
enemies.splice(eIndex, 1);
}
});
});
}
// 画面刷新
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlane();
drawBullets();
drawEnemies();
}
// 游戏主循环
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
// 控制按键按下
window.addEventListener('keydown', (e) => {
keys[e.key] = true;
// 空格键发射子弹
if (e.key === ' ') {
bullets.push({
x: plane.x + plane.width/2 - 2,
y: plane.y,
width: 4,
height: 10,
speed: 7
});
}
});
// 放开按键
window.addEventListener('keyup', (e) => {
keys[e.key] = false;
});
// 每隔一秒生成一个敌机
setInterval(createEnemy, 1000);
// 开始游戏
gameLoop();
</script>
</body>
</html>

复制代码

**怎么玩：**

- 用键盘左箭头和右箭头控制飞机左右移动。
- 按空格键可以发射子弹打敌机。
- 敌机会从上往下飞，打中敌机敌机会消失。

希望你喜欢这个小飞机大战！如果你想加得分或者碰撞后游戏结束，我也可以帮你改进哦～有什么问题随时问我！????✈️

韦恩 · 发表于 2025-12-9 14:56:05

生活中有哪些常见事件

kaia · 发表于 2025-12-9 14:56:10

韦恩发表于 2025-12-09 14:56
生活中有哪些常见事件

你好！生活中有很多常见的小事件，就像我们每天都会遇到的小故事哦。我给你讲几个简单又常见的：

1. **上学迟到**：早上起晚了，赶着去学校，路上遇到红灯或者堵车，结果到了学校有点晚。

2. **朋友吵架**：和好朋友玩耍时，因为一件小事不开心，发生了争吵，然后再想办法和好。

3. **帮忙做家务**：帮爸爸妈妈洗碗、扫地，或者整理自己的书包和房间。

4. **下雨忘带伞**：出门没带伞，突然下雨了，被淋湿然后赶紧找地方躲雨。

5. **考试紧张**：考试的时候心里紧张，手心冒汗，想起平时认真复习就放松下来。

这些事情都是我们生活里很常见的，小学生也会经常遇到。你有没有遇到过类似的事情呢？可以跟我分享哦！这样我还能帮你想办法解决呢~ ????

韦恩 · 发表于 2025-12-9 15:03:38

本帖最后由韦恩于 2025-12-9 15:05 编辑

请你帮我将下面的代码改为用WASD控制的js代码
const canvas = document.getElementById("gameCanvas");
const context = canvas.getContext("2d");
const startButton = document.getElementById("startButton");

const gridSize = 20;
let snake = [{x: 200, y: 200}];\\1
let food = {x: 0, y: 0};
let dx = gridSize;
let dy = 0;
let score = 0;

\\....2
function drawSnake() {
context.clearRect(0, 0, canvas.width, canvas.height);
snake.forEach(part => {
      context.fillStyle = "green";
      context.fillRect(part.x, part.y, gridSize, gridSize);
});
}

function generateFood() {
food.x = Math.floor(Math.random() * canvas.width / gridSize) * gridSize;
food.y = Math.floor(Math.random() * canvas.height / gridSize) * gridSize;
}

function drawFood() {
context.fillStyle = "red";
context.fillRect(food.x, food.y, gridSize, gridSize);
}

function moveSnake() {
const head = {x: snake[0].x + dx, y: snake[0].y + dy};
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
      score++;
      generateFood();
} else {
      snake.pop();
}
}

function changeDirection(event) {
const keyPressed = event.keyCode;
if (keyPressed === 37 && dx === 0) {
      dx = -gridSize;
      dy = 0;
}
if (keyPressed === 38 && dy === 0) {
      dx = 0;
      dy = -gridSize;
}
if (keyPressed === 39 && dx === 0) {
      dx = gridSize;
      dy = 0;
}
if (keyPressed === 40 && dy === 0) {
      dx = 0;
      dy = gridSize;
}
}

function gameLoop() {
moveSnake();
drawSnake();
drawFood();
if (snake[0].x < 0 || snake[0].x >= canvas.width || snake[0].y < 0 || snake[0].y >= canvas.height) {
      clearInterval(game);
      alert("Game Over! Your score is " + score);
}
}

startButton.addEventListener("click", () => {
snake = [{x: 200, y: 200}];
dx = gridSize;
dy = 0;
score = 0;
generateFood();
game = setInterval(gameLoop, 100);
});

document.addEventListener("keydown", changeDirection);

kaia · 发表于 2025-12-9 15:03:41

韦恩发表于 2025-12-09 15:03
请你帮我将下面的代码改为用WASD控制的js代码 ...

你好！你给的代码是用键盘左右箭头控制飞机移动的，我帮你改成用WASD键控制。因为W对应上（W键码是KeyW），A是左，D是右，S通常是下，不过游戏里飞机一般上下不会动，我帮你改成左（A）和右（D）控制飞机左右移动，按空格发射子弹不变。

// 原来监听左右箭头：
// if (e.code === 'ArrowLeft') plane.moveLeft = true;
// if (e.code === 'ArrowRight') plane.moveRight = true;

// 修改后监听 WASD 控制：
document.addEventListener('keydown', e => {
  if (e.code === 'KeyA') plane.moveLeft = true; // A键左移
  if (e.code === 'KeyD') plane.moveRight = true; // D键右移
  if (e.code === 'Space') shootBullet();
});

document.addEventListener('keyup', e => {
  if (e.code === 'KeyA') plane.moveLeft = false;
  if (e.code === 'KeyD') plane.moveRight = false;
});

这样你用A键控制飞机向左，D键控制飞机向右啦~ 其他控制不变。需要我帮你把完整代码里都改一遍吗？

韦恩 · 发表于 2025-12-9 15:07:09

需要需要需要需要需要

kaia · 发表于 2025-12-9 15:07:29

韦恩发表于 2025-12-09 15:07
需要需要需要需要需要

好的！下面是帮你改成用WASD控制的完整“飞机大战”网页代码。
- 用A键向左移动，D键向右移动，空格键发射子弹。
- 去掉了原来箭头键的监听，改成了WASD方式。

你可以复制下面代码保存成 `plane_wasd.html`，用浏览器打开玩玩看哦～

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>简单飞机大战（WASD控制版）</title>
  <style>
body {
   margin: 0;
   overflow: hidden;
   background: #000; /* 黑色背景 */
}
canvas {
   display: block;
   margin: 0 auto;
   background: #111;
   border: 1px solid #555;
}
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>

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

// 小飞机
const plane = {
   x: canvas.width / 2 - 15,
   y: canvas.height - 60,
   width: 30,
   height: 40,
   speed: 5,
   moveLeft: false,
   moveRight: false
};

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

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

let score = 0;
let gameOver = false;

// 监听键盘事件改成WASD控制
document.addEventListener('keydown', e => {
   if (e.code === 'KeyA') plane.moveLeft = true; // A 左移
   if (e.code === 'KeyD') plane.moveRight = true; // D 右移
   if (e.code === 'Space') shootBullet();          // 空格发射
});
document.addEventListener('keyup', e => {
   if (e.code === 'KeyA') plane.moveLeft = false;
   if (e.code === 'KeyD') plane.moveRight = false;
});

// 发射子弹函数
function shootBullet() {
   bullets.push({
      x: plane.x + plane.width / 2 - 2.5,
      y: plane.y,
      width: 5,
      height: 10,
      speed: 7
   });
}

// 生成敌机
function spawnEnemy() {
   const size = 30;
   enemies.push({
      x: Math.random() * (canvas.width - size),
      y: -size,
      width: size,
      height: size,
      speed: 2 + Math.random() * 2
   });
}

// 每隔一秒生成一个敌机
setInterval(() => {
   if (!gameOver) spawnEnemy();
}, 10

韦恩 · 发表于 2025-12-9 15:07:36

需要。。。。。。。。。