使用HTML、CSS和JavaScript来构建一个飞机大战游戏。

解轩瑜 · 发表于 2024-7-31 15:14:23

kaia · 发表于 2024-8-1 16:11:39

好的！我们来一起动手做一个简单的飞机大战小游戏吧。我们会用到HTML、CSS和JavaScript，这些工具就像是我们做游戏的三把钥匙。

### 第一步：准备HTML结构

首先，我们需要一张画布（canvas），在上面来绘制我们的游戏画面。在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>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<script src="script.js"></script>
</body>
</html>

复制代码

### 第二步：设置CSS样式

现在我们来给画布加一些样式，让它看起来更好。

/* styles.css */
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
}
canvas {
border: 1px solid #fff;
background-color: #333;
}

复制代码

### 第三步：用JavaScript进行游戏逻辑编程

最后也是最有趣的一步：我们要用JavaScript来写游戏的逻辑，让游戏动起来！

// script.js
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const player = {
width: 50,
height: 50,
x: canvas.width / 2 - 25,
y: canvas.height - 60,
speed: 5,
dx: 0,
dy: 0
};
function drawPlayer() {
ctx.fillStyle = 'blue';
ctx.fillRect(player.x, player.y, player.width, player.height);
}
function clear() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function newPos() {
player.x += player.dx;
player.y += player.dy;
// Boundary detection
if (player.x < 0) player.x = 0;
if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;
if (player.y < 0) player.y = 0;
if (player.y + player.height > canvas.height) player.y = canvas.height - player.height;
}
function update() {
clear();
drawPlayer();
newPos();
requestAnimationFrame(update);
}
function moveRight() {
player.dx = player.speed;
}
function moveLeft() {
player.dx = -player.speed;
}
function moveUp() {
player.dy = -player.speed;
}
function moveDown() {
player.dy = player.speed;
}
function keyDown(e) {
if (e.key === 'ArrowRight' || e.key === 'Right') {
moveRight();
} else if (e.key === 'ArrowLeft' || e.key === 'Left') {
moveLeft();
} else if (e.key === 'ArrowUp' || e.key === 'Up') {
moveUp();
} else if (e.key === 'ArrowDown' || e.key === 'Down') {
moveDown();
}
}
function keyUp(e) {
if (
e.key === 'ArrowRight' ||
e.key === 'Right' ||
e.key === 'ArrowLeft' ||
e.key === 'Left' ||
e.key === 'ArrowUp' ||
e.key === 'Up' ||
e.key === 'ArrowDown' ||
e.key === 'Down'
) {
player.dx = 0;
player.dy = 0;
}
}
document.addEventListener('keydown', keyDown);
document.addEventListener('keyup', keyUp);
update();

复制代码

这个代码块做了以下几件事情：
1. **初始化画布和上下文**：指定我们在哪个画布上画图。
2. **创建玩家**：定义一个“玩家”，它有宽、高、位置和速度。
3. **绘制玩家**：在画布上画出玩家的形状（一个矩形）。
4. **更新玩家位置**：根据按键更新玩家的位置。
5. **监听按键**：根据按键来控制玩家的移动。

### 进一步完善
你可以继续添加更多功能，比如敌机、子弹等元素，让游戏更加丰富有趣。

希望这些步骤能够帮助你理解怎样用HTML、CSS和JavaScript制作一个简单的飞机大战游戏！如果有什么问题，可以随时问我。加油！

翟雪松 · 发表于 2024-10-30 16:18:35

非常好，如何给这个游戏增加一个背景音乐

翟雪松 · 发表于 2024-10-30 16:25:04

能否帮我写一个参加浙江大学培训的培训小结。