Scribd
Upload
36 views

Script

The document defines the code for a snake game. It initializes variables to track the game state including the snake position, food position, score, and high score. It defines functions to update the food position, handle game over, and change the snake direction on key presses. The main initGame function is called repeatedly to update the snake position, check for collisions with food or the body, and redraw the game board.

Uploaded by

Sri Rahayu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
36 views

Script

The document defines the code for a snake game. It initializes variables to track the game state including the snake position, food position, score, and high score. It defines functions to update the food position, handle game over, and change the snake direction on key presses. The main initGame function is called repeatedly to update the snake position, check for collisions with food or the body, and redraw the game board.

Uploaded by

Sri Rahayu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

const playBoard = document.querySelector(".

play-board");

const scoreElement = document.querySelector(".score");

const highScoreElement = document.querySelector(".high-score");

const controls = document.querySelectorAll(".controls i");

let gameOver = false;

let foodX, foodY;

let snakeX = 5, snakeY = 5;

let velocityX = 0, velocityY = 0;

let snakeBody = [];

let setIntervalId;

let score = 0;

// Getting high score from the local storage

let highScore = localStorage.getItem("high-score") || 0;

highScoreElement.innerText = `High Score: ${highScore}`;

const updateFoodPosition = () => {

// Passing a random 1 - 30 value as food position

foodX = Math.floor(Math.random() * 30) + 1;

foodY = Math.floor(Math.random() * 30) + 1;

const handleGameOver = () => {

// Clearing the timer and reloading the page on game over

clearInterval(setIntervalId);

alert("Game Over! Press OK to replay...");

location.reload();

const changeDirection = e => {


// Changing velocity value based on key press

if(e.key === "ArrowUp" && velocityY != 1) {

velocityX = 0;

velocityY = -1;

} else if(e.key === "ArrowDown" && velocityY != -1) {

velocityX = 0;

velocityY = 1;

} else if(e.key === "ArrowLeft" && velocityX != 1) {

velocityX = -1;

velocityY = 0;

} else if(e.key === "ArrowRight" && velocityX != -1) {

velocityX = 1;

velocityY = 0;

// Calling changeDirection on each key click and passing key dataset value as an object

controls.forEach(button => button.addEventListener("click", () => changeDirection({ key:


button.dataset.key })));

const initGame = () => {

if(gameOver) return handleGameOver();

let html = `<div class="food" style="grid-area: ${foodY} / ${foodX}"></div>`;

// Checking if the snake hit the food

if(snakeX === foodX && snakeY === foodY) {

updateFoodPosition();

snakeBody.push([foodY, foodX]); // Pushing food position to snake body array

score++; // increment score by 1

highScore = score >= highScore ? score : highScore;

localStorage.setItem("high-score", highScore);
scoreElement.innerText = `Score: ${score}`;

highScoreElement.innerText = `High Score: ${highScore}`;

// Updating the snake's head position based on the current velocity

snakeX += velocityX;

snakeY += velocityY;

// Shifting forward the values of the elements in the snake body by one

for (let i = snakeBody.length - 1; i > 0; i--) {

snakeBody[i] = snakeBody[i - 1];

snakeBody[0] = [snakeX, snakeY]; // Setting first element of snake body to current snake position

// Checking if the snake's head is out of wall, if so setting gameOver to true

if(snakeX <= 0 || snakeX > 30 || snakeY <= 0 || snakeY > 30) {

return gameOver = true;

for (let i = 0; i < snakeBody.length; i++) {

// Adding a div for each part of the snake's body

html += `<div class="head" style="grid-area: ${snakeBody[i][1]} / ${snakeBody[i][0]}"></div>`;

// Checking if the snake head hit the body, if so set gameOver to true

if (i !== 0 && snakeBody[0][1] === snakeBody[i][1] && snakeBody[0][0] === snakeBody[i][0]) {

gameOver = true;

playBoard.innerHTML = html;

updateFoodPosition();

setIntervalId = setInterval(initGame, 100);


document.addEventListener("keyup", changeDirection);

You might also like