林奕锦飞机大战

林奕锦 · 发表于 2024-7-25 21:25:51

请帮我用html、css、js文件生成一个飞机大战游戏，有开始按钮，我们可以用左右键控制飞机左右移动，当按下空格键可以发射炮弹摧毁敌机，敌机会从上方的随机位置出现，并可以实时看见自己的得分，谢谢

kaia · 发表于 2024-7-26 13:44:48

林奕锦发表于 2024-07-26 13:44
我想在飞机碰到敌机时结束游戏

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>林奕锦的飞机大战</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="game-container">
<div id="player"></div>
<div id="score">得分: 0</div>
<button id="start-button">开始游戏</button>
<div id="game-over" style="display: none;">游戏结束</div>
</div>
<script src="script.js"></script>
</body>
</html>

复制代码

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

/* styles.css */
body {
margin: 0;
overflow: hidden;
background-color: #000;
color: white;
font-family: Arial, sans-serif;
}
#game-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#player {
position: absolute;
width: 50px;
height: 50px;
background-color: blue;
bottom: 10px;
left: calc(50% - 25px);
}
#score {
position: absolute;
top: 10px;
left: 10px;
}
#start-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
font-size: 18px;
}
#game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: red;
}

复制代码

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

// script.js
document.addEventListener("DOMContentLoaded", () => {
const player = document.getElementById("player");
const gameContainer = document.getElementById("game-container");
const scoreDisplay = document.getElementById("score");
const startButton = document.getElementById("start-button");
const gameOverDisplay = document.getElementById("game-over");
let score = 0;
let gameInterval;
let bulletInterval;
let enemyInterval;
startButton.addEventListener("click", startGame);
function startGame() {
startButton.style.display = "none";
gameOverDisplay.style.display = "none";
score = 0;
scoreDisplay.innerText = "得分: " + score;
gameLoop();
document.addEventListener("keydown", handleKeys);
}
function handleKeys(e) {
const key = e.code;
if (key === "ArrowLeft") {
movePlayer(-10);
} else if (key === "ArrowRight") {
movePlayer(10);
} else if (key === "Space") {
shootBullet();
}
}
function movePlayer(distance) {
let currentLeft = parseInt(window.getComputedStyle(player).left);
let newLeft = currentLeft + distance;
if (newLeft >= 0 && newLeft <= gameContainer.offsetWidth - player.offsetWidth) {
player.style.left = newLeft + "px";
}
}
function shootBullet() {
const bullet = document.createElement("div");
bullet.className = "bullet";
bullet.style.left = (parseInt(window.getComputedStyle(player).left) + player.offsetWidth / 2 - 2.5) + "px";
bullet.style.top = player.offsetTop + "px";
gameContainer.appendChild(bullet);
moveBullet(bullet);
}
function moveBullet(bullet) {
const bulletTimer = setInterval(() => {
const bulletTop = parseInt(window.getComputedStyle(bullet).top);
if (bulletTop <= 0) {
clearInterval(bulletTimer);
bullet.remove();
} else {
bullet.style.top = (bulletTop - 10) + "px";
checkCollision(bullet);
}
}, 30);
}
function checkCollision(bullet) {
const enemies = document.querySelectorAll(".enemy");
enemies.forEach(enemy => {
const bulletTop = parseInt(window.getComputedStyle(bullet).top);
if (isColliding(bullet, enemy)) {
clearInterval(bulletTimer);
bullet.remove();
enemy.remove();
score++;
scoreDisplay.innerText = "得分: " + score;
}
});
}
function isColliding(bullet, enemy) {
const bulletRect = bullet.getBoundingClientRect();
const enemyRect = enemy.getBoundingClientRect();
return !(
bulletRect.top > enemyRect.bottom ||
bulletRect.right < enemyRect.left ||
bulletRect.bottom < enemyRect.top ||
bulletRect.left > enemyRect.right
);
}
function gameLoop() {
enemyInterval = setInterval(() => {
createEnemy();
}, 2000);
}
function createEnemy() {
const enemy = document.createElement("div");
enemy.className = "enemy";
enemy.style.left = Math.random() * (gameContainer.offsetWidth - 50) + "px";
enemy.style.top = "0px";
gameContainer.appendChild(enemy);
moveEnemy(enemy);
}
function moveEnemy(enemy) {
const enemyTimer = setInterval(() => {
const enemyTop = parseInt(window.getComputedStyle(enemy).top);
if (enemyTop >= gameContainer.offsetHeight) {
clearInterval(enemyTimer);
enemy.remove();
} else {
enemy.style.top = (enemyTop + 5) + "px";
}
if (checkPlayerCollision(enemy)) {
endGame();
}
}, 30);
}
function checkPlayerCollision(enemy) {
const playerRect = player.getBoundingClientRect();
const enemyRect = enemy.getBoundingClientRect();
return !(
playerRect.top > enemyRect.bottom ||
playerRect.right < enemyRect.left ||
playerRect.bottom < enemyRect.top ||
playerRect.left > enemyRect.right
);
}
function endGame() {
clearInterval(gameInterval);
clearInterval(enemyInterval);
document.querySelectorAll(".bullet").forEach(bullet => clearInterval(bullet._timer));
document.querySelectorAll(".enemy").forEach(enemy => clearInterval(enemy._timer));
gameOverDisplay.style.display = "block";
startButton.style.display = "block";
document.removeEventListener("keydown", handleKeys);
}
const style = document.createElement('style');
style.innerHTML = `
.bullet {
position: absolute;
width: 5px;
height: 20px;
background-color: red;
top: calc(100% - 60px);
}
.enemy {
position: absolute;
width: 50px;
height: 50px;
background-color: green;
}
`;
document.head.appendChild(style);
});

复制代码

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

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

如果有其他问题或者需要进一步的解释，随时告诉我哦！????✨

kaia · 发表于 2024-7-25 21:26:23

好的，小朋友！我们来一起做一个有趣的飞机大战游戏。这个游戏会用到HTML、CSS和JavaScript三种语言。别担心，我会一步一步地教你，保证你能理解每一部分内容哦！

### 1. HTML文件
首先，我们先写个简单的HTML文件，这是游戏的结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>林奕锦的飞机大战</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="game-container">
<div id="player"></div>
<div id="score">得分: 0</div>
<button id="start-button">开始游戏</button>
</div>
<script src="script.js"></script>
</body>
</html>

复制代码

这个文件中，我们定义了游戏的容器（`game-container`），玩家的飞机（`player`），得分显示（`score`）和开始按钮（`start-button`）。

### 2. CSS文件
接下来，我们来设计一下游戏的样子：

/* styles.css */
body {
margin: 0;
overflow: hidden;
background-color: #000;
color: white;
font-family: Arial, sans-serif;
}
#game-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#player {
position: absolute;
width: 50px;
height: 50px;
background-color: blue;
bottom: 10px;
left: calc(50% - 25px);
}
#score {
position: absolute;
top: 10px;
left: 10px;
}
#start-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
font-size: 18px;
}

复制代码

这段CSS代码让背景变黑，飞机是蓝色的，并且设置了一个得分显示的位置。

### 3. JavaScript文件
最后，我们来编写控制游戏逻辑的JavaScript代码：

// script.js
document.addEventListener("DOMContentLoaded", () => {
const player = document.getElementById("player");
const gameContainer = document.getElementById("game-container");
const scoreDisplay = document.getElementById("score");
const startButton = document.getElementById("start-button");
let score = 0;
let gameInterval;
let bulletInterval;
startButton.addEventListener("click", startGame);
function startGame() {
startButton.style.display = "none";
score = 0;
scoreDisplay.innerText = "得分: " + score;
gameLoop();
document.addEventListener("keydown", handleKeys);
}
function handleKeys(e) {
const key = e.code;
if (key === "ArrowLeft") {
movePlayer(-10);
} else if (key === "ArrowRight") {
movePlayer(10);
} else if (key === "Space") {
shootBullet();
}
}
function movePlayer(distance) {
let currentLeft = parseInt(window.getComputedStyle(player).left);
let newLeft = currentLeft + distance;
if (newLeft >= 0 && newLeft <= gameContainer.offsetWidth - player.offsetWidth) {
player.style.left = newLeft + "px";
}
}
function shootBullet() {
const bullet = document.createElement("div");
bullet.className = "bullet";
bullet.style.left = player.style.left;
gameContainer.appendChild(bullet);
moveBullet(bullet);
}
function moveBullet(bullet) {
const bulletTimer = setInterval(() => {
const bulletTop = parseInt(window.getComputedStyle(bullet).top);
if (bulletTop <= 0) {
clearInterval(bulletTimer);
bullet.remove();
} else {
bullet.style.top = (bulletTop - 10) + "px";
checkCollision(bullet, bulletTimer);
}
}, 30);
}
function checkCollision(bullet, bulletTimer) {
const enemies = document.querySelectorAll(".enemy");
enemies.forEach(enemy => {
if (isColliding(bullet, enemy)) {
clearInterval(bulletTimer);
bullet.remove();
enemy.remove();
score++;
scoreDisplay.innerText = "得分: " + score;
}
});
}
function isColliding(bullet, enemy) {
const bulletRect = bullet.getBoundingClientRect();
const enemyRect = enemy.getBoundingClientRect();
return !(
bulletRect.top > enemyRect.bottom ||
bulletRect.right < enemyRect.left ||
bulletRect.bottom < enemyRect.top ||
bulletRect.left > enemyRect.right
);
}
function gameLoop() {
gameInterval = setInterval(() => {
createEnemy();
}, 2000);
}
function createEnemy() {
const enemy = document.createElement("div");
enemy.className = "enemy";
enemy.style.left = Math.random() * (gameContainer.offsetWidth - 50) + "px";
enemy.style.top = "0px";
gameContainer.appendChild(enemy);
moveEnemy(enemy);
}
function moveEnemy(enemy) {
const enemyTimer = setInterval(() => {
const enemyTop = parseInt(window.getComputedStyle(enemy).top);
if (enemyTop >= gameContainer.offsetHeight) {
clearInterval(enemyTimer);
enemy.remove();
} else {
enemy.style.top = (enemyTop + 5) + "px";
}
}, 30);
}
const style = document.createElement('style');
style.innerHTML = `
.bullet {
position: absolute;
width: 5px;
height: 20px;
background-color: red;
top: calc(100% - 60px);
}
.enemy {
position: absolute;
width: 50px;
height: 50px;
background-color: green;
}
`;
document.head.appendChild(style);
});

复制代码

这个JavaScript代码实现了以下功能：
- 按下“开始游戏”按钮时，游戏开始。
- 玩家可以用左右箭头键移动飞机，用空格键发射子弹。
- 子弹会向上飞，并摧毁敌机。
- 敌机会从上方随机位置出现并向下移动。
- 玩家得分会实时更新。

这样我们就完成了一个简单的飞机大战游戏啦！你可以把这些代码分别保存到三个文件（`index.html`、`styles.css`、`script.js`）中，然后在浏览器中打开`index.html`文件，就可以开始玩了。

有问题随时问我哦！祝你玩得开心！????✨

林奕锦 · 发表于 2024-7-25 22:11:55

kaia 发表于 2024-7-25 21:26
好的，小朋友！我们来一起做一个有趣的飞机大战游戏。这个游戏会用到HTML、CSS和JavaScript三种语言。别担 ...

我想在飞机碰到敌机时结束游戏，并显示游戏结束界面，谢谢！

林奕锦 · 发表于 2024-7-26 13:44:25

kaia 发表于 2024-7-25 21:26
好的，小朋友！我们来一起做一个有趣的飞机大战游戏。这个游戏会用到HTML、CSS和JavaScript三种语言。别担 ...

我想在飞机碰到敌机时结束游戏

林奕锦 · 发表于 2024-7-26 13:48:30

林奕锦发表于 2024-7-26 13:44
我想在飞机碰到敌机时结束游戏

我想用图片使飞机、敌机以及子弹更生动

kaia · 发表于 2024-7-26 13:49:03

林奕锦发表于 2024-07-26 13:48
我想用图片使飞机、敌机以及子弹更生动 ...

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

### 修改后的HTML文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>林奕锦的飞机大战</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="game-container">
<div id="score">得分: 0</div>
<button id="start-button">开始游戏</button>
<div id="game-over">游戏结束</div>
<img id="player" src="player.png" alt="玩家飞机" />
</div>
<script src="script.js"></script>
</body>
</html>

复制代码

### 修改后的CSS文件

/* styles.css */
body {
margin: 0;
overflow: hidden;
background-color: #000;
color: white;
font-family: Arial, sans-serif;
}
#game-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#player {
position: absolute;
width: 50px;
height: auto;
bottom: 10px;
left: calc(50% - 25px);
}
#score {
position: absolute;
top: 10px;
left: 10px;
}
#start-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
font-size: 18px;
}
#game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
font-size: 24px;
color: red;
}
.bullet {
position: absolute;
width: 5px;
height: 20px;
background-image: url('bullet.png');
background-size: cover;
top: calc(100% - 60px);
}
.enemy {
position: absolute;
width: 50px;
height: auto;
background-image: url('enemy.png');
background-size: cover;
}

复制代码

### 修改后的JavaScript文件

// script.js
document.addEventListener("DOMContentLoaded", () => {
const player = document.getElementById("player");
const gameContainer = document.getElementById("game-container");
const scoreDisplay = document.getElementById("score");
const startButton = document.getElementById("start-button");
const gameOverDisplay = document.getElementById("game-over");
let score = 0;
let gameInterval;
let bulletInterval;
let enemyInterval;
startButton.addEventListener("click", startGame);
function startGame() {
startButton.style.display = "none";
gameOverDisplay.style.display = "none";
score = 0;
scoreDisplay.innerText = "得分: " + score;
gameLoop();
document.addEventListener("keydown", handleKeys);
}
function handleKeys(e) {
const key = e.code;
if (key === "ArrowLeft") {
movePlayer(-10);
} else if (key === "ArrowRight") {
movePlayer(10);
} else if (key === "Space") {
shootBullet();
}
}
function movePlayer(distance) {
let currentLeft = parseInt(window.getComputedStyle(player).left);
let newLeft = currentLeft + distance;
if (newLeft >= 0 && newLeft <= gameContainer.offsetWidth - player.offsetWidth) {
player.style.left = newLeft + "px";
}
}
function shootBullet() {
const bullet = document.createElement("div");
bullet.className = "bullet";
bullet.style.left = (parseInt(window.getComputedStyle(player).left) + player.offsetWidth / 2 - 2.5) + "px";
bullet.style.top = (parseInt(window.getComputedStyle(player).top) - 20) + "px";
gameContainer.appendChild(bullet);
moveBullet(bullet);
}
function moveBullet(bullet) {
const bulletTimer = setInterval(() => {
const bulletTop = parseInt(window.getComputedStyle(bullet).top);
if (bulletTop <= 0) {
clearInterval(bulletTimer);
bullet.remove();
} else {
bullet.style.top = (bulletTop - 5) + "px";
}
document.querySelectorAll(".enemy").forEach(enemy => {
if (isColliding(bullet, enemy)) {
clearInterval(bulletTimer);
bullet.remove();
enemy.remove();
score++;
scoreDisplay.innerText = "得分: " + score;
}
});
}, 30);
bullet._timer = bulletTimer;
}
function isColliding(element1, element2) {
const rect1 = element1.getBoundingClientRect();
const rect2 = element2.getBoundingClientRect();
return !(
rect1.top > rect2.bottom ||
rect1.right < rect2.left ||
rect1.bottom < rect2.top ||
rect1.left > rect2.right
);
}
function gameLoop() {
enemyInterval = setInterval(() => {
createEnemy();
}, 2000);
}
function createEnemy() {
const enemy = document.createElement("div");
enemy.className = "enemy";
enemy.style.left = Math.random() * (gameContainer.offsetWidth - 50) + "px";
enemy.style.top = "0px";
gameContainer.appendChild(enemy);
moveEnemy(enemy);
}
function moveEnemy(enemy) {
const enemyTimer = setInterval(() => {
const enemyTop = parseInt(window.getComputedStyle(enemy).top);
if (enemyTop >= gameContainer.offsetHeight) {
clearInterval(enemyTimer);
enemy.remove();
} else {
enemy.style.top = (enemyTop + 5) + "px";
}
if (checkPlayerCollision(enemy)) {
endGame();
}
}, 30);
enemy._timer = enemyTimer;
}
function checkPlayerCollision(enemy) {
const playerRect = player.getBoundingClientRect();
const enemyRect = enemy.getBoundingClientRect();
return !(
playerRect.top > enemyRect.bottom ||
playerRect.right < enemyRect.left ||
playerRect.bottom < enemyRect.top ||
playerRect.left > enemyRect.right
);
}
function endGame() {
clearInterval(gameInterval);
clearInterval(enemyInterval);
document.querySelectorAll(".bullet").forEach(bullet => clearInterval(bullet._timer));
document.querySelectorAll(".enemy").forEach(enemy => clearInterval(enemy._timer));
gameOverDisplay.style.display = "block";
startButton.style.display = "block";
document.removeEventListener("keydown", handleKeys);
}
});

复制代码

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

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

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

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

林奕锦 · 发表于 2024-7-26 13:50:53

kaia 发表于 2024-7-26 13:49
好的，用图片来代替简单的颜色块可以让游戏更加生动有趣！我们可以使用一些图片资源来代表玩家的飞机、敌 ...

请告诉我改变图片大小的位置

kaia · 发表于 2024-7-26 13:51:26

林奕锦发表于 2024-07-26 13:50
请告诉我改变图片大小的位置

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

### 修改后的CSS文件

/* styles.css */
body {
margin: 0;
overflow: hidden;
background-color: #000;
color: white;
font-family: Arial, sans-serif;
}
#game-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#player {
position: absolute;
width: 50px; /* 调整飞机宽度 */
height: auto; /* 可以改为具体数值，比如 50px */
bottom: 10px;
left: calc(50% - 25px);
background-image: url('player.png');
background-size: cover; /* 使得背景图片填满元素 */
}
#score {
position: absolute;
top: 10px;
left: 10px;
}
#start-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
font-size: 18px;
}
#game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
font-size: 24px;
color: red;
}
.bullet {
position: absolute;
width: 5px; /* 调整子弹宽度 */
height: 20px; /* 调整子弹高度 */
background-image: url('bullet.png');
background-size: cover; /* 使得背景图片填满元素 */
top: calc(100% - 60px);
}
.enemy {
position: absolute;
width: 50px; /* 调整敌机宽度 */
height: auto; /* 可以改为具体数值，比如 50px */
background-image: url('enemy.png');
background-size: cover; /* 使得背景图片填满元素 */
}

复制代码

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

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

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

林奕锦 · 发表于 2024-7-26 13:58:53

kaia 发表于 2024-7-26 13:51
好的，如果你需要调整图片的大小，可以在CSS中设置图片元素的宽度和高度。下面是如何在CSS文件中修改这些 ...

为什么在游戏开始后我看不见飞机和敌机？