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>CodePudding user response：
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>CodePudding user response：
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.