廖晗瑞

廖晗瑞 · 发表于 2024-8-14 21:48:50

帮我把地图扩大一点

廖晗瑞 · 发表于 2024-8-14 22:01:22

可不可以再帮我整合一下

廖晗瑞 · 发表于 2024-8-14 22:17:33

kaia 发表于 2024-8-14 19:26
好的，我们来详细讲解一下如何添加音效到贪吃蛇游戏中。

### 第一步：准备音效文件

我不想要音效，能不能帮我去除音效

kaia · 发表于 2024-8-14 22:18:14

廖晗瑞发表于 2024-08-14 22:17
我不想要音效，能不能帮我去除音效

当然可以！我们来移除音效相关的内容。下面是去除音效后的代码：

### 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>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
#gameCanvas {
border: 1px solid #000;
background-color: #fff;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script src="snake.js"></script>
</body>
</html>

复制代码

### JavaScript文件
修改JavaScript代码，去除与音效相关的逻辑：

const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');
const box = 20; // 每个格子的大小
let snake, food, direction, score, game, gameInterval, timeCounter;
let highScore = localStorage.getItem('highScore') || 0; // 从localStorage读取最高得分
let timeElapsed = 0;
const difficultySettings = {
easy: 150,
normal: 100,
hard: 50
};
const skins = {
default: { snake: 'black', food: 'red' },
blue: { snake: 'blue', food: 'lightblue' },
red: { snake: 'red', food: 'orange' }
};
// 定义多个地图的障碍物位置
const maps = {
map1: [],
map2: [],
map3: []
};
let obstacles = [];
document.getElementById('startButton').addEventListener('click', startGame);
document.getElementById('pauseButton').addEventListener('click', pauseGame);
function startGame() {
document.getElementById('startButton').style.display = 'none';
document.getElementById('pauseButton').style.display = 'block';
document.getElementById('gameCanvas').style.display = 'block';
resetGame();
const difficulty = document.getElementById('difficulty').value;
gameInterval = difficultySettings[difficulty];
game = setInterval(drawGame, gameInterval);
timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
}
function pauseGame() {
if (game) {
clearInterval(game);
clearInterval(timeCounter);
game = null;
timeCounter = null;
document.getElementById('pauseButton').innerText = '继续';
} else {
const difficulty = document.getElementById('difficulty').value;
gameInterval = difficultySettings[difficulty];
game = setInterval(drawGame, gameInterval);
timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
document.getElementById('pauseButton').innerText = '暂停';
}
}
function resetGame() {
snake = [{ x: 9 * box, y: 10 * box }];
food = generateFood();
score = 0;
direction = undefined;
timeElapsed = 0;
document.getElementById('time').innerText = timeElapsed;
loadMap(); // 加载选中的地图
}
document.addEventListener('keydown', changeDirection);
function changeDirection(event) {
const keyPressed = event.keyCode;
if (keyPressed === 37 && direction !== 'RIGHT') direction = 'LEFT';
if (keyPressed === 38 && direction !== 'DOWN') direction = 'UP';
if (keyPressed === 39 && direction !== 'LEFT') direction = 'RIGHT';
if (keyPressed === 40 && direction !== 'UP') direction = 'DOWN';
}
function drawGame() {
context.clearRect(0, 0, canvas.width, canvas.height);
const skin = document.getElementById('skin').value;
const colors = skins[skin];
for (let i = 0; i < snake.length; i++) {
context.fillStyle = i === 0 ? 'green' : colors.snake;
context.fillRect(snake[i].x, snake[i].y, box, box);
}
context.fillStyle = colors.food;
context.fillRect(food.x, food.y, box, box);
drawObstacles();
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if (direction === 'LEFT') snakeX -= box;
if (direction === 'UP') snakeY -= box;
if (direction === 'RIGHT') snakeX += box;
if (direction === 'DOWN') snakeY += box;
if (snakeX === food.x && snakeY === food.y) {
score++;
updateHighScore();
food = generateFood();
} else {
snake.pop();
}
let newHead = { x: snakeX, y: snakeY };
if (snakeX < 0) snakeX = canvas.width - box;
if (snakeY < 0) snakeY = canvas.height - box;
if (snakeX >= canvas.width) snakeX = 0;
if (snakeY >= canvas.height) snakeY = 0;
if (collision(newHead, snake) || collision(newHead, obstacles)) {
clearInterval(game);
clearInterval(timeCounter);
alert('游戏结束');
return;
}
snake.unshift(newHead);
context.fillStyle = 'black';
context.font = '20px Arial';
context.fillText(`得分: ${score}`, 5, canvas.height - 5);
}
function collision(head, array) {
for (let i = 0; i < array.length; i++) {
if (head.x === array[i].x && head.y === array[i].y) {
return true;
}
}
return false;
}
function updateHighScore() {
if (score > highScore) {
highScore = score;
localStorage.setItem('highScore', highScore); // 保存最高得分到localStorage
document.getElementById('highScore').innerText = highScore;
}
}
function updateTime() {
timeElapsed++;
document.getElementById('time').innerText = timeElapsed;
}
function generateFood() {
let newFood;
do {
newFood = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
} while (collision(newFood, snake) || collision(newFood, obstacles));
return newFood;
}
function loadMap() {
const selectedMap = document.getElementById('map').value;
obstacles = maps[selectedMap] ? [...maps[selectedMap]] : [];
}
function drawObstacles() {
context.fillStyle = 'grey';
for (let i = 0; i < obstacles.length; i++) {
context.fillRect(obstacles[i].x, obstacles[i].y, box, box);
}
}

复制代码

### 总结

通过删除HTML和JavaScript中与音效相关的代码，你现在有了一个不带音效的贪吃蛇游戏。如果你有其他问题或需要进一步的帮助，请随时告诉我！享受编程的乐趣吧！