王桃桃

ZLJ · 发表于 2024-7-28 12:11:37

kaia 发表于 2024-7-28 12:05
当然可以！我们可以通过设置`Audio`对象的`volume`属性来调整音乐的音量。这个属性的值在0到1之间，表示 ...

还有个问题很奇怪，为什么我的图片命名是透明背景的，但是在游戏界面里呈现的确实有浅白背景的

kaia · 发表于 2024-7-28 12:12:45

ZLJ 发表于 2024-07-28 12:11
还有个问题很奇怪，为什么我的图片命名是透明背景的， ...

理解你的疑问，这个问题可能有几个原因，通常与图片的格式或处理方式有关。以下是一些常见的可能原因以及解决方法：

### 可能原因及解决方法：

#### 1. **图片格式问题**：
确保你的图片是PNG格式，PNG格式支持透明背景。如果你的图片是JPG格式，那么它不会支持透明背景。

**解决方法**：
将图片转换为PNG格式，再试一次。

#### 2. **图片处理问题**：
有时在某些图像编辑软件中处理图片时，可能会意外地添加背景。

**解决方法**：
重新检查并处理图像，确保背景部分是透明的。使用像Photoshop或GIMP等图像编辑软件来确认和处理。

#### 3. **Canvas绘制问题**：
确保Canvas使用正确的方法绘制透明背景的图片。

**解决方法**：
确保你只是在Canvas上绘制图像，而没有其他颜色填充背景。例如，确保在`drawPlayer`函数中没有不必要的`fillRect`等操作。

### 示例代码复查：
确保在`drawPlayer`函数及其他绘制图像的地方，确实没有多余的背景填充代码。

function drawPlayer() {
ctx.save(); // 保存当前绘图状态
ctx.translate(playerX + playerWidth / 2, playerY + playerHeight / 2); // 将原点移动到玩家中心
ctx.rotate(-45 * Math.PI / 180); // 旋转画布，使播放器正常方向
ctx.drawImage(playerImg, -playerWidth / 2, -playerHeight / 2, playerWidth, playerHeight); // 绘制玩家图片，注意位置偏移
ctx.restore(); // 恢复到之前的绘图状态
}

复制代码

### 确认图片格式和透明度：
确保图片是正确的透明PNG图片，并且没有意外地添加了背景颜色。这可以用图像编辑软件来确认：

#### 在Photoshop中：
1. 打开你的图片。
2. 确认背景是透明的（背景层应该是棋盘格样式）。
3. 如果不是透明的，删除背景或重新处理图片，然后保存为PNG格式。

#### 在GIMP中：
1. 打开你的图片。
2. 确认背景是透明的。
3. 如果不是透明的，删除背景或重新处理图片，然后导出为PNG格式。

### 总结：
- **检查图片格式**：确保是PNG格式。
- **重新处理图片**：确保背景透明。
- **检查代码**：确保没有不必要的背景填充操作。

通过以上方法，你应该可以解决图片透明度的问题。如果仍有问题，请随时告诉我，我会尽力帮你解决！

ZLJ · 发表于 2024-7-29 09:38:39

kaia 发表于 2024-7-28 12:12
理解你的疑问，这个问题可能有几个原因，通常与图片的格式或处理方式有关。以下是一些常见的可能原因以及 ...

好的，那么可以让播放和暂停放置在画布右边吗？右边设置一列放各种按钮

kaia · 发表于 2024-7-29 09:39:16

ZLJ 发表于 2024-07-29 09:38
好的，那么可以让播放和暂停放置在画布右边吗？右边设 ...

当然可以！我们可以使用CSS来定位播放和暂停按钮，并且在画布右侧放置一列按钮区域。我们可以通过修改HTML和CSS来实现这个效果。

### 修改后的HTML：
这里我们会添加一个用于包裹所有按钮的容器，并将其放置在画布的右边。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>飞机大战</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #000;
color: #fff;
font-family: Arial, sans-serif;
}
.game-container {
display: flex;
align-items: flex-start;
}
.controls {
display: flex;
flex-direction: column;
margin-left: 20px;
}
canvas {
border: 1px solid #fff;
}
.button {
background-color: transparent;
border: none;
margin: 10px 0;
cursor: pointer;
}
#volumeControl {
width: 100px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="game-container">
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div class="controls">
<button id="musicButton" class="button">
<img id="musicIcon" src="play.png" alt="Play/Pause">
</button>
音量：<input id="volumeControl" type="range" min="0" max="1" step="0.1" value="0.5">
</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 加载图像
const playerImg = new Image();
const enemyImg = new Image();
playerImg.src = 'player.png'; // 替换为你的玩家图像路径
enemyImg.src = 'enemy.png'; // 替换为你的敌人图像路径
// 加载音效
const hitSound = new Audio('hit.mp3'); // 替换为你的音效文件路径
// 加载背景音乐
const bgMusic = new Audio('background.mp3'); // 替换为你的背景音乐文件路径
bgMusic.loop = true; // 设置循环播放
// 控制播放/暂停按钮
const musicButton = document.getElementById('musicButton');
const musicIcon = document.getElementById('musicIcon');
let isMusicPlaying = false;
musicButton.addEventListener('click', () => {
if (isMusicPlaying) {
bgMusic.pause();
musicIcon.src = 'play.png'; // 切换为播放图标
} else {
bgMusic.play();
musicIcon.src = 'pause.png'; // 切换为暂停图标
}
isMusicPlaying = !isMusicPlaying;
});
// 音量控制
const volumeControl = document.getElementById('volumeControl');
volumeControl.addEventListener('input', (e) => {
bgMusic.volume = e.target.value;
});
// 玩家飞机的相关参数
const playerWidth = 50;
const playerHeight = 50;
let playerX = (canvas.width - playerWidth) / 2;
let playerY = canvas.height - playerHeight - 10;
const playerSpeed = 7;
// 子弹和敌人的数组
let bullets = [];
let enemies = [];
let score = 0;
// 按键监听
document.addEventListener('keydown', movePlayer);
document.addEventListener('keydown', shootBullet);
// 移动玩家
function movePlayer(e) {
if (e.key === 'ArrowLeft' && playerX > 0) {
playerX -= playerSpeed;
}
if (e.key === 'ArrowRight' && playerX < canvas.width - playerWidth) {
playerX += playerSpeed;
}
}
// 发射子弹
function shootBullet(e) {
if (e.key === ' ') {
bullets.push({ x: playerX + playerWidth / 2 - 2.5, y: playerY, speed: 10 });
}
}
// 绘制玩家
function drawPlayer() {
ctx.save(); // 保存当前绘图状态
ctx.translate(playerX + playerWidth / 2, playerY + playerHeight / 2); // 将原点移动到玩家中心
ctx.rotate(-45 * Math.PI / 180); // 旋转画布，使播放器正常方向
ctx.drawImage(playerImg, -playerWidth / 2, -playerHeight / 2, playerWidth, playerHeight); // 绘制玩家图片，注意位置偏移
ctx.restore(); // 恢复到之前的绘图状态
}
// 绘制子弹
function drawBullets() {
ctx.fillStyle = '#ff0';
bullets.forEach((bullet, index) => {
bullet.y -= bullet.speed;
ctx.fillRect(bullet.x, bullet.y, 5, 15);
if (bullet.y < 0) {
bullets.splice(index, 1);
}
});
}
// 绘制敌人
function drawEnemies() {
enemies.forEach((enemy, index) => {
enemy.y += enemy.speed;
ctx.drawImage(enemyImg, enemy.x, enemy.y, enemy.width, enemy.height);
if (enemy.y > canvas.height) {
enemies.splice(index, 1);
gameOver();
}
});
}
// 生成敌人
function generateEnemies() {
if (Math.random() < 0.02) {
const x = Math.random() * (canvas.width - playerWidth);
enemies.push({ x: x, y: 0, width: 50, height: 50, speed: 3 });
}
}
// 检测碰撞
function detectCollisions() {
bullets.forEach((bullet, bIndex) => {
enemies.forEach((enemy, eIndex) => {
if (bullet.x > enemy.x && bullet.x < enemy.x + enemy.width &&
bullet.y > enemy.y && bullet.y < enemy.y + enemy.height) {
score += 10;
bullets.splice(bIndex, 1);
enemies.splice(eIndex, 1);
hitSound.play(); // 播放音效
}
});
});
enemies.forEach(enemy => {
if (playerX < enemy.x + enemy.width &&
playerX + playerWidth > enemy.x &&
playerY < enemy.y + enemy.height &&
playerY + playerHeight > enemy.y) {
gameOver();
}
});
}
// 游戏结束
function gameOver() {
alert(`Game Over! Your score is ${score}`);
document.location.reload();
}
// 更新画面
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
drawBullets();
drawEnemies();
detectCollisions();
generateEnemies();
requestAnimationFrame(update);
}
update();
</script>
</body>
</html>

复制代码

### 说明：

1. **HTML部分**：在`div`元素内添加一个`canvas`元素和一个用于放置按钮的`div`，这样可以将画布和按钮并排放置。
2. **CSS部分**：使用Flexbox布局，将`game-container`设置为Flex容器，并使其内容水平对齐。将按钮容器`controls`设置为垂直列布局。
3. **JavaScript部分**：通过获取并设置滑动条的值来调整音量。

这样，播放/暂停按钮和音量控制滑动条就会显示在画布的右边排列成一列。你可以根据自己的需要继续添加更多按钮，所有按钮都将垂直排列。

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

ZLJ · 发表于 2024-7-29 09:41:19

kaia 发表于 2024-7-29 09:39
当然可以！我们可以使用CSS来定位播放和暂停按钮，并且在画布右侧放置一列按钮区域。我们可以通过修改HTM ...

请你把三件套分开成三个文件

kaia · 发表于 2024-7-29 09:42:22

ZLJ 发表于 2024-07-29 09:41
请你把三件套分开成三个文件

当然可以！我们可以将HTML、CSS和JavaScript代码分成三个单独的文件。这样更便于管理和维护。

### **index.html**（HTML文件）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>飞机大战</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="game-container">
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div class="controls">
<button id="musicButton" class="button">
<img id="musicIcon" src="play.png" alt="Play/Pause" width="30" height="30">
</button>
<label for="volumeControl">音量：</label>
<input type="range" id="volumeControl" min="0" max="1" step="0.01" value="1">
</div>
</div>
<script src="game.js"></script>
</body>
</html>

复制代码

### **styles.css**（CSS文件）

body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #000;
color: #fff;
font-family: Arial, sans-serif;
}
.game-container {
display: flex;
align-items: flex-start;
}
.controls {
display: flex;
flex-direction: column;
margin-left: 20px;
}
canvas {
border: 1px solid #fff;
}
.button {
background-color: transparent;
border: none;
margin: 10px 0;
cursor: pointer;
}
#volumeControl {
width: 100px;
margin-top: 10px;
}

复制代码

### **game.js**（JavaScript文件）

// 获取Canvas和上下文
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 加载图像
const playerImg = new Image();
const enemyImg = new Image();
playerImg.src = 'player.png'; // 替换为你的玩家图像路径
enemyImg.src = 'enemy.png'; // 替换为你的敌人图像路径
// 加载音效
const hitSound = new Audio('hit.mp3'); // 替换为你的音效文件路径
// 加载背景音乐
const bgMusic = new Audio('background.mp3'); // 替换为你的背景音乐文件路径
bgMusic.loop = true; // 设置循环播放
// 控制播放/暂停按钮
const musicButton = document.getElementById('musicButton');
const musicIcon = document.getElementById('musicIcon');
let isMusicPlaying = false;
musicButton.addEventListener('click', () => {
if (isMusicPlaying) {
bgMusic.pause();
musicIcon.src = 'play.png'; // 切换为播放图标
} else {
bgMusic.play();
musicIcon.src = 'pause.png'; // 切换为暂停图标
}
isMusicPlaying = !isMusicPlaying;
});
// 音量控制
const volumeControl = document.getElementById('volumeControl');
volumeControl.addEventListener('input', (e) => {
bgMusic.volume = e.target.value;
});
// 玩家飞机的相关参数
const playerWidth = 50;
const playerHeight = 50;
let playerX = (canvas.width - playerWidth) / 2;
let playerY = canvas.height - playerHeight - 10;
const playerSpeed = 7;
// 子弹和敌人的数组
let bullets = [];
let enemies = [];
let score = 0;
// 按键监听
document.addEventListener('keydown', movePlayer);
document.addEventListener('keydown', shootBullet);
// 移动玩家
function movePlayer(e) {
if (e.key === 'ArrowLeft' && playerX > 0) {
playerX -= playerSpeed;
}
if (e.key === 'ArrowRight' && playerX < canvas.width - playerWidth) {
playerX += playerSpeed;
}
}
// 发射子弹
function shootBullet(e) {
if (e.key === ' ') {
bullets.push({ x: playerX + playerWidth / 2 - 2.5, y: playerY, speed: 10 });
}
}
// 绘制玩家
function drawPlayer() {
ctx.save(); // 保存当前绘图状态
ctx.translate(playerX + playerWidth / 2, playerY + playerHeight / 2); // 将原点移动到玩家中心
ctx.rotate(-45 * Math.PI / 180); // 旋转画布，使播放器正常方向
ctx.drawImage(playerImg, -playerWidth / 2, -playerHeight / 2, playerWidth, playerHeight); // 绘制玩家图片，注意位置偏移
ctx.restore(); // 恢复到之前的绘图状态
}
// 绘制子弹
function drawBullets() {
ctx.fillStyle = '#ff0';
bullets.forEach((bullet, index) => {
bullet.y -= bullet.speed;
ctx.fillRect(bullet.x, bullet.y, 5, 15);
if (bullet.y < 0) {
bullets.splice(index, 1);
}
});
}
// 绘制敌人
function drawEnemies() {
enemies.forEach((enemy, index) => {
enemy.y += enemy.speed;
ctx.drawImage(enemyImg, enemy.x, enemy.y, enemy.width, enemy.height);
if (enemy.y > canvas.height) {
enemies.splice(index, 1);
gameOver();
}
});
}
// 生成敌人
function generateEnemies() {
if (Math.random() < 0.02) {
const x = Math.random() * (canvas.width - playerWidth);
enemies.push({ x: x, y: 0, width: 50, height: 50, speed: 3 });
}
}
// 检测碰撞
function detectCollisions() {
bullets.forEach((bullet, bIndex) => {
enemies.forEach((enemy, eIndex) => {
if (bullet.x > enemy.x && bullet.x < enemy.x + enemy.width &&
bullet.y > enemy.y && bullet.y < enemy.y + enemy.height) {
score += 10;
bullets.splice(bIndex, 1);
enemies.splice(eIndex, 1);
hitSound.play(); // 播放音效
}
});
});
enemies.forEach(enemy => {
if (playerX < enemy.x + enemy.width &&
playerX + playerWidth > enemy.x &&
playerY < enemy.y + enemy.height &&
playerY + playerHeight > enemy.y) {
gameOver();
}
});
}
// 游戏结束
function gameOver() {
alert(`Game Over! Your score is ${score}`);
document.location.reload();
}
// 更新画面
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
drawBullets();
drawEnemies();
detectCollisions();
generateEnemies();
requestAnimationFrame(update);
}
update();

复制代码

### 文件说明：

1. `index.html`：这是你的HTML文件，包含了所有的标签结构以及引用外部CSS和JS文件。
2. `styles.css`：这是你的CSS文件，包含所有样式定义。
3. `game.js`：这是你的JavaScript文件，包含所有游戏逻辑和事件处理。

确保将这些文件放在同一目录下，并且图片和音效文件的路径是正确的。这样，当你打开`index.html`文件时，你的游戏应该能正常运行，并带有播放/暂停按钮和音量控制功能。

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

ZLJ · 发表于 2024-7-29 10:15:31

kaia 发表于 2024-7-29 09:42
当然可以！我们可以将HTML、CSS和JavaScript代码分成三个单独的文件。这样更便于管理和维护。

### **ind ...

大标题“飞机大战”四个字不见了

kaia · 发表于 2024-7-29 10:16:16

ZLJ 发表于 2024-07-29 10:15
大标题“飞机大战”四个字不见了

明白了。如果大标题“飞机大战”不见了，可能是因为CSS布局和样式的问题。我们需要确保标题正确显示，并调整它的位置，使其与游戏画布和控制按钮不冲突。

我们可以做以下调整：
1. 确保标题在HTML中正确放置。
2. 调整CSS样式以确保标题显示在合适的位置。

### 修改后的`index.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 class="game-container">
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div class="controls">
<button class="button" id="musicButton">
<img id="musicIcon" src="play.png" alt="播放/暂停">
</button>
<label for="volumeControl">音量：</label>
<input type="range" id="volumeControl" min="0" max="1" step="0.1" value="1">
</div>
</div>
<h1>飞机大战</h1>
<script src="game.js"></script>
</body>
</html>

复制代码

### 修改后的`styles.css`（CSS文件）

body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
height: 100vh;
margin: 0;
background-color: #000;
color: #fff;
font-family: Arial, sans-serif;
}
h1 {
margin-bottom: 20px;
}
.game-container {
display: flex;
align-items: flex-start;
}
.controls {
display: flex;
flex-direction: column;
margin-left: 20px;
}
canvas {
border: 1px solid #fff;
}
.button {
background-color: transparent;
border: none;
margin: 10px 0;
cursor: pointer;
}
#volumeControl {
width: 100px;
margin-top: 10px;
}

复制代码

### 修改后的`game.js`（JavaScript文件）

// 获取Canvas和上下文
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 加载图像
const playerImg = new Image();
const enemyImg = new Image();
playerImg.src = 'player.png'; // 替换为你的玩家图像路径
enemyImg.src = 'enemy.png'; // 替换为你的敌人图像路径
// 加载音效
const hitSound = new Audio('hit.mp3'); // 替换为你的音效文件路径
// 加载背景音乐
const bgMusic = new Audio('background.mp3'); // 替换为你的背景音乐文件路径
bgMusic.loop = true; // 设置循环播放
// 控制播放/暂停按钮
const musicButton = document.getElementById('musicButton');
const musicIcon = document.getElementById('musicIcon');
let isMusicPlaying = false;
musicButton.addEventListener('click', () => {
if (isMusicPlaying) {
bgMusic.pause();
musicIcon.src = 'play.png'; // 切换为播放图标
} else {
bgMusic.play();
musicIcon.src = 'pause.png'; // 切换为暂停图标
}
isMusicPlaying = !isMusicPlaying;
});
// 音量控制
const volumeControl = document.getElementById('volumeControl');
volumeControl.addEventListener('input', (e) => {
bgMusic.volume = e.target.value;
});
// 玩家飞机的相关参数
const playerWidth = 50;
const playerHeight = 50;
let playerX = (canvas.width - playerWidth) / 2;
let playerY = canvas.height - playerHeight - 10;
const playerSpeed = 7;
// 子弹和敌人的数组
let bullets = [];
let enemies = [];
let score = 0;
// 按键监听
document.addEventListener('keydown', movePlayer);
document.addEventListener('keydown', shootBullet);
// 移动玩家
function movePlayer(e) {
if (e.key === 'ArrowLeft' && playerX > 0) {
playerX -= playerSpeed;
}
if (e.key === 'ArrowRight' && playerX < canvas.width - playerWidth) {
playerX += playerSpeed;
}
}
// 发射子弹
function shootBullet(e) {
if (e.key === ' ') {
bullets.push({ x: playerX + playerWidth / 2 - 2.5, y: playerY, speed: 10 });
}
}
// 绘制玩家
function drawPlayer() {
ctx.save(); // 保存当前绘图状态
ctx.translate(playerX + playerWidth / 2, playerY + playerHeight / 2); // 将原点移动到玩家中心
ctx.rotate(-45 * Math.PI / 180); // 旋转画布，使播放器正常方向
ctx.drawImage(playerImg, -playerWidth / 2, -playerHeight / 2, playerWidth, playerHeight); // 绘制玩家图片，注意位置偏移
ctx.restore(); // 恢复到之前的绘图状态
}
// 绘制子弹
function drawBullets() {
ctx.fillStyle = '#ff0';
bullets.forEach((bullet, index) => {
bullet.y -= bullet.speed;
ctx.fillRect(bullet.x, bullet.y, 5, 15);
if (bullet.y < 0) {
bullets.splice(index, 1);
}
});
}
// 绘制敌人
function drawEnemies() {
enemies.forEach((enemy, index) => {
enemy.y += enemy.speed;
ctx.drawImage(enemyImg, enemy.x, enemy.y, enemy.width, enemy.height);
if (enemy.y > canvas.height) {
enemies.splice(index, 1);
gameOver();
}
});
}
// 生成敌人
function generateEnemies() {
if (Math.random() < 0.02) {
const x = Math.random() * (canvas.width - playerWidth);
enemies.push({ x: x, y: 0, width: 50, height: 50, speed: 3 });
}
}
// 检测碰撞
function detectCollisions() {
bullets.forEach((bullet, bIndex) => {
enemies.forEach((enemy, eIndex) => {
if (bullet.x > enemy.x && bullet.x < enemy.x + enemy.width &&
bullet.y > enemy.y && bullet.y < enemy.y + enemy.height) {
score += 10;
bullets.splice(bIndex, 1);
enemies.splice(eIndex, 1);
hitSound.play(); // 播放音效
}
});
});
enemies.forEach(enemy => {
if (playerX < enemy.x + enemy.width &&
playerX + playerWidth > enemy.x &&
playerY < enemy.y + enemy.height &&
playerY + playerHeight > enemy.y) {
gameOver();
}
});
}
// 游戏结束
function gameOver() {
alert(`Game Over! Your score is ${score}`);
document.location.reload();
}
// 更新画面
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
drawBullets();
drawEnemies();
detectCollisions();
generateEnemies();
requestAnimationFrame(update);
}
update();

复制代码

### 文件说明：

1. `index.html`：这是你的HTML文件，包含所有的标签结构以及引用外部CSS和JS文件。
2. `styles.css`：这是你的CSS文件，包含所有样式定义。
3. `game.js`：这是你的JavaScript文件，包含所有游戏逻辑和事件处理。

确保将这些文件放在同一目录下，并且图片和音效文件的路径是正确的。这样，当你打开`index.html`文件时，你的游戏应该能正常运行，并带有播放/暂停按钮和音量控制功能，同时标题“飞机大战”也会正确显示。

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

ZLJ · 发表于 2024-7-30 12:54:49

我现在的主页面布局有以下元素：
<button id="musicButton">
      <img id="musicIcon" src="image/play.png" alt="Play Music" width="30" height="30">
</button>
<div class="controls">
      <label for="volumeControl">音量：</label>
      <input type="range" id="volumeControl" min="0" max="1" step="0.01" value="0.5">
</div>
<canvas id="gameCanvas" width="800" height="600"></canvas>
请问怎么可以让“飞机大战”四个大字在最上面顶部不变，canvas居中不变，但是让音乐开关和音量调节器在画布的右边呢？

ZLJ · 发表于 2024-7-30 13:12:35

我现在的主页面布局有以下元素：
<button id="musicButton">
      <img id="musicIcon" src="image/play.png" alt="Play Music" width="30" height="30">
      </button>
<div class="controls">
      <label for="volumeControl">音量：</label>
      <input type="range" id="volumeControl" min="0" max="1" step="0.01" value="0.5">
</div>
<canvas id="gameCanvas" width="800" height="600"></canvas>
请问怎么可以让“飞机大战”四个大字在最上面顶部不变，canvas居中不变，但是让音乐开关和音量调节器在画布的右边呢？@AI