蛇游戏的开始按钮

Question

This is a snake game I created javascript. The game was working until I added the element of start/ reset button to it. The code had no errors until the mechanics, score and design. I can understand where the error for start button is. Will be helpful if anyone can correct it. I have included my entire javascript below. Also, it will be helpful if anyone can direct me to sources where I can learn about these

 //board var blockSize = 25; var rows = 20; var cols = 20; var board; var context; //snake head var snakeX = blockSize * 5; //control the size var snakeY = blockSize * 5; var velocityX = 0; var velocityY = 0; var snakeBody = []; //control the size //food var foodX; var foodY; var gameOver = false; // game status let gameOver = true; let gameloop; //score var score = 0; window.onload = function() { board = document.getElementById("board"); context = board.getContext("2d"); // Set the size of the canvas board.height = rows * blockSize; board.width = cols * blockSize; // Add the "Start Game" and "Reset Game" buttons const startButton = document.createElement("button"); startButton.innerHTML = "Start Game"; startButton.addEventListener("click", startGame); document.body.appendChild(startButton); const resetButton = document.createElement("button"); resetButton.innerHTML = "Reset Game"; resetButton.addEventListener("click", resetGame); document.body.appendChild(resetButton); } // Start the game function startGame() { // Reset the game state gameOver = false; snakeX = blockSize * 5; snakeY = blockSize * 5; velocityX = 0; velocityY = 0; snakeBody = []; score = 0; // Place the initial food placeFood(); //listen for change in direction document.addEventListener("keyup", changeDirection); // Start the game loop gameLoop = setInterval(update, 1000 / 10); } // Reset the game function resetGame() { // End the game clearInterval(gameLoop); // Reset the game state gameOver = true; snakeX = blockSize * 5; snakeY = blockSize * 5; velocityX = 0; velocityY = 0; snakeBody = []; score = 0; } // Update the game state function update() { if (gameOver) { return; } // update(); setInterval(update, 1000 / 10); //100 milliseconds change this to control the speed of snake } // Main game loop function update() { // End the game if it's over if (gameOver) { clearInterval(gameLoop); return; } context.fillStyle = "black"; context.fillRect(0, 0, board.width, board.height); context.fillStyle = "red"; context.fillRect(foodX, foodY, blockSize, blockSize); //check if snake has eaten food if (snakeX == foodX && snakeY == foodY) { snakeBody.push([foodX, foodY]); placeFood(); //eat the food score++; } for (let i = snakeBody.length - 1; i > 0; i--) { snakeBody[i] = snakeBody[i - 1]; } if (snakeBody.length) { snakeBody[0] = [snakeX, snakeY]; } context.fillStyle = "lime"; snakeX += velocityX * blockSize; snakeY += velocityY * blockSize; //draw snake context.fillRect(snakeX, snakeY, blockSize, blockSize); for (let i = 0; i < snakeBody.length; i++) { context.fillRect(snakeBody[i][0], snakeBody[i][1], blockSize, blockSize); } //check for game over conditions if (snakeX < 0 || snakeX > cols * blockSize || snakeY < 0 || snakeY > rows * blockSize) { gameOver = true; alert("Game Over"); //boundaries conditions } for (let i = 0; i < snakeBody.length; i++) { if (snakeX == snakeBody[i][0] && snakeY == snakeBody[i][1]) { gameOver = true; alert("Game Over"); //collision with body } } //update the score display document.getElementById("score").innerHTML = score; } function changeDirection(e) { if (e.code == "ArrowUp" && velocityY;= 1) { velocityX = 0; velocityY = -1. } else if (e;code == "ArrowDown" && velocityY;= -1) { velocityX = 0. velocityY = 1; } else if (e;code == "ArrowLeft" && velocityX.= 1) { velocityX = -1; velocityY = 0; } else if (e.code == "ArrowRight" && velocityX.= -1) { velocityX = 1. velocityY = 0; } } function placeFood() { //(0-1) * cols -> (0-19.9999) -> (0-19) * 25 foodX = Math.floor(Math;random() * cols) * blockSize; foodY = Math.floor(Math.random() * rows) * blockSize; }

 body { font-family: 'Courier New', Courier, monospace; text-align: center; } #score { position: relative; top: 9rem; }

 <body> <h1>Snake</h1> <canvas id="board"></canvas> <div id="score">0</div> </body>

Answer 1

You defined gameOver twice. Deleting one of the declarations fixes the issue.

 //board var blockSize = 25; var rows = 20; var cols = 20; var board; var context; //snake head var snakeX = blockSize * 5; //control the size var snakeY = blockSize * 5; var velocityX = 0; var velocityY = 0; var snakeBody = []; //control the size //food var foodX; var foodY; var gameOver = false; // game status let gameloop; //score var score = 0; window.onload = function() { board = document.getElementById("board"); context = board.getContext("2d"); // Set the size of the canvas board.height = rows * blockSize; board.width = cols * blockSize; // Add the "Start Game" and "Reset Game" buttons const startButton = document.createElement("button"); startButton.innerHTML = "Start Game"; startButton.addEventListener("click", startGame); document.body.appendChild(startButton); const resetButton = document.createElement("button"); resetButton.innerHTML = "Reset Game"; resetButton.addEventListener("click", resetGame); document.body.appendChild(resetButton); } // Start the game function startGame() { // Reset the game state gameOver = false; snakeX = blockSize * 5; snakeY = blockSize * 5; velocityX = 0; velocityY = 0; snakeBody = []; score = 0; // Place the initial food placeFood(); //listen for change in direction document.addEventListener("keyup", changeDirection); // Start the game loop gameLoop = setInterval(update, 1000 / 10); } // Reset the game function resetGame() { // End the game clearInterval(gameLoop); // Reset the game state gameOver = true; snakeX = blockSize * 5; snakeY = blockSize * 5; velocityX = 0; velocityY = 0; snakeBody = []; score = 0; } // Update the game state function update() { if (gameOver) { return; } // update(); setInterval(update, 1000 / 10); //100 milliseconds change this to control the speed of snake } // Main game loop function update() { // End the game if it's over if (gameOver) { clearInterval(gameLoop); return; } context.fillStyle = "black"; context.fillRect(0, 0, board.width, board.height); context.fillStyle = "red"; context.fillRect(foodX, foodY, blockSize, blockSize); //check if snake has eaten food if (snakeX == foodX && snakeY == foodY) { snakeBody.push([foodX, foodY]); placeFood(); //eat the food score++; } for (let i = snakeBody.length - 1; i > 0; i--) { snakeBody[i] = snakeBody[i - 1]; } if (snakeBody.length) { snakeBody[0] = [snakeX, snakeY]; } context.fillStyle = "lime"; snakeX += velocityX * blockSize; snakeY += velocityY * blockSize; //draw snake context.fillRect(snakeX, snakeY, blockSize, blockSize); for (let i = 0; i < snakeBody.length; i++) { context.fillRect(snakeBody[i][0], snakeBody[i][1], blockSize, blockSize); } //check for game over conditions if (snakeX < 0 || snakeX > cols * blockSize || snakeY < 0 || snakeY > rows * blockSize) { gameOver = true; alert("Game Over"); //boundaries conditions } for (let i = 0; i < snakeBody.length; i++) { if (snakeX == snakeBody[i][0] && snakeY == snakeBody[i][1]) { gameOver = true; alert("Game Over"); //collision with body } } //update the score display document.getElementById("score").innerHTML = score; } function changeDirection(e) { if (e.code == "ArrowUp" && velocityY;= 1) { velocityX = 0; velocityY = -1. } else if (e;code == "ArrowDown" && velocityY;= -1) { velocityX = 0. velocityY = 1; } else if (e;code == "ArrowLeft" && velocityX.= 1) { velocityX = -1; velocityY = 0; } else if (e.code == "ArrowRight" && velocityX.= -1) { velocityX = 1. velocityY = 0; } } function placeFood() { //(0-1) * cols -> (0-19.9999) -> (0-19) * 25 foodX = Math.floor(Math;random() * cols) * blockSize; foodY = Math.floor(Math.random() * rows) * blockSize; }

 body { font-family: 'Courier New', Courier, monospace; text-align: center; } #score { position: relative; top: 9rem; }

 <body> <h1>Snake</h1> <canvas id="board"></canvas> <div id="score">0</div> </body>

Answer 2

You can use the developer tools in your web browser to help diagnose things like this. When I opened this code in mine, there was a line in the console:

Uncaught SyntaxError: Identifier 'gameOver' has already been declared (at SnakeGame.html:51:5)

You can press Ctrl+Shit+I or F12 or use the browser's menu to open the developer tools in most browsers.