Javascript Snake Game unexpected End of input Error

Question

我是一个Javascript初学者，现在我们必须为学校编写一个Javascript Snake游戏，当你死亡时它会显示死亡消息。

当你碰到蛇本身或墙壁时，你就会死亡。你每吃一个苹果就得一分。

它也应该在你死的时候发出声音，当你吃苹果的时候发出声音(这是我的主要问题)。

我尝试了许多YouTube教程和我在这里找到的东西，以及我在互联网上其他网站上找到的东西，但似乎没有什么真正起作用。

我也认为当你吃了一个苹果时游戏计数是不正确的。请帮助我，我们课程中没有人知道如何做到这一点，可能是因为我们是化学工程师，不太了解编程，尤其是Javascript编程。

代码如下:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Set the dimensions of the canvas
canvas.width = 500;
canvas.height = 500;
// Set the size of each cell in the grid
const cellSize = 20;
// Set the initial position and direction of the snake
let x = 0;
let y = 0;
let dx = 1;
let dy = 0;
// Set the initial length of the snake
let length = 5;
// Set the initial position of the apple
let appleX = 10;
let appleY = 10;
// Set the score to 0
let score = 0;
// Create an array to store the positions of the snake's body
const body = [];
// Create the audio elements for the death and eating sounds
const deathSound = new Audio('death.mp3');
const eatSound = new Audio('eat.mp3');
// Draw the grid lines on the canvas
function drawGrid() {
for (let i = 0; i <= canvas.width; i += cellSize) {
ctx.moveTo(i, 0);
ctx.lineTo(i, canvas.height);
}
for (let i = 0; i <= canvas.height; i += cellSize) {
ctx.moveTo(0, i);
ctx.lineTo(canvas.width, i);
}
ctx.strokeStyle = '#ccc';
ctx.stroke();
}
// Draw the snake on the canvas
function drawSnake() {
// Shift the first element off the array and add the new position to the end
body.shift();
body.push({ x, y });
// Draw each cell of the snake's body
for (let i = 0; i < body.length; i++) {
ctx.fillStyle = (i === body.length - 1) ? 'green' : 'white';
ctx.fillRect(body[i].x, body[i].y, cellSize, cellSize);
}
}
// Draw the apple on the canvas
function drawApple() {
ctx.fillStyle = 'red';
ctx.fillRect(appleX, appleY, cellSize, cellSize);
}
// Move the snake and check for collision with the walls or itself
function moveSnake() {
// Update the position of the snake
x += dx * cellSize;
y += dy * cellSize;
// Check if the snake has collided with a wall
if (x < 0 || x >= canvas.width || y < 0 || y >= canvas.height) {
deathSound.play();
alert('You died! Your score was: ' + score);
return;
}
// Check if the snake has collided with itself
for (let i = 0; i < body.length - 1; i++) {
if (x === body[i].x && y === body[i].y) {
deathSound.play();
alert('You died! Your score was: ' + score);
return;
}
}

如果有人能帮助我，我将非常感激。

Answer 1

好的。看看这个，我猜你已经找不到声音了。检查记录到浏览器控制台的内容。如果是另一个网站的声音，它就能工作。我还添加了一个setInterval来调用所有的函数

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Set the dimensions of the canvas
canvas.width = 500;
canvas.height = 500;
// Set the size of each cell in the grid
const cellSize = 20;
// Set the initial position and direction of the snake
let x = 0;
let y = 0;
let dx = 1;
let dy = 0;
// Set the initial length of the snake
let length = 5;
// Set the initial position of the apple
let appleX = 10;
let appleY = 10;
// Set the score to 0
let score = 0;
// Create an array to store the positions of the snake's body
const body = [];
// Create the audio elements for the death and eating sounds
const deathSound = new Audio('death.mp3');
const eatSound = new Audio('eat.mp3');
const pepsi = new Audio(
'https://www.freesoundslibrary.com/wp-content/uploads/2021/06/ding-ding-sound-effect.mp3'
);
// Draw the grid lines on the canvas
function drawGrid() {
for (let i = 0; i <= canvas.width; i += cellSize) {
ctx.moveTo(i, 0);
ctx.lineTo(i, canvas.height);
}
for (let i = 0; i <= canvas.height; i += cellSize) {
ctx.moveTo(0, i);
ctx.lineTo(canvas.width, i);
}
ctx.strokeStyle = '#ccc';
ctx.stroke();
}
// Draw the snake on the canvas
function drawSnake() {
// Shift the first element off the array and add the new position to the end
body.shift();
body.push({ x, y });
// Draw each cell of the snake's body
for (let i = 0; i < body.length; i++) {
ctx.fillStyle = i === body.length - 1 ? 'green' : 'white';
ctx.fillRect(body[i].x, body[i].y, cellSize, cellSize);
}
}
// Draw the apple on the canvas
function drawApple() {
ctx.fillStyle = 'red';
ctx.fillRect(appleX, appleY, cellSize, cellSize);
}
// Move the snake and check for collision with the walls or itself
function moveSnake() {
// Update the position of the snake
x += dx * cellSize;
y += dy * cellSize;
// Check if the snake has collided with a wall
if (x < 0 || x >= canvas.width || y < 0 || y >= canvas.height) {
deathSound.play();
// alert('You died! Your score was: ' + score);
canvas.style.backgroundColor = '#ff0000';
pepsi.play();
return;
swda;
}
// Check if the snake has collided with itself
for (let i = 0; i < body.length - 1; i++) {
if (x === body[i].x && y === body[i].y) {
deathSound.play();
// alert('You died! Your score was: ' + score);
canvas.style.backgroundColor = '#ff0000';
pepsi.play();
return;
}
}
}
function draw() {
drawGrid();
drawSnake();
moveSnake();
drawApple();
}
setInterval(function () {
draw();
}, 500);

canvas {
border: 1px solid green;
}

<canvas id="canvas" height="100" width="100"></canvas>