// Game Constants and variables let inputDir = {x: 0, y: 0}; const foodSound = new Audio('food.mp3'); const gameOverSound = new Audio('gameover.mp3'); const moveSound = new Audio('move.mp3'); const musicSound = new Audio('music.mp3'); let speed = 6; let score = 0; let lastPaintTime = 0; let snakeArr = [ // array {x: 13, y: 15} ] let food = {x: 6, y:7}; // object // Game Functions function main(ctime){ window.requestAnimationFrame(main); // console.log(ctime); if((ctime - lastPaintTime)/1000 < 1/speed){ return; } lastPaintTime = ctime; gameEngine(); } function isCollide(sarr){ // if snake bump into himself for (let i = 1; i < snakeArr.length; i++) { if(sarr[i].x === sarr[0].x && sarr[i].y === sarr[0].y){ return true; } } // if snake bump into wall if(sarr[0].x >= 18 || sarr[0].x <= 0 || sarr[0].y >= 18 || sarr[0].y <= 0){ return true; } } function gameEngine(){ // Part 1: Updating the snake array and food if(isCollide(snakeArr)){ gameOverSound.play(); musicSound.pause(); inputDir = {x:0, y:0}; alert("Game Over!! Press any key to play again"); snakeArr = [{x:13, y:15}]; musicSound.play(); score = 0; scoreBoard.innerHTML = "Score: " + score; } // If you have eaten the food , increment the score and regenrate the food if(snakeArr[0].y === food.y && snakeArr[0].x === food.x){ foodSound.play(); score += 1; if(score > hiscore){ hiscoreval = score; localStorage.setItem('hiscore', JSON.stringify(hiscoreval)); highScoreBoard.innerHTML = "HighScore: "+ hiscoreval; } scoreBoard.innerHTML = "Score: " + score; snakeArr.unshift({x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y}); // generating random number between a and b // Math.round(a + (b - a)*Math.random()) let a = 2; let b = 16; food = {x: Math.round(a + (b - a)*Math.random()), y: Math.round(a + (b - a)*Math.random())}; } // Moving the snake for (let i = snakeArr.length - 2; i >= 0; i--) { snakeArr[i + 1] = {...snakeArr[i]}; } snakeArr[0].x += inputDir.x; snakeArr[0].y += inputDir.y; // Part 2: Display the snake and food // Display Snake board.innerHTML = ""; snakeArr.forEach((e,index)=>{ snakeElement = document.createElement('div'); snakeElement.style.gridRowStart = e.y; snakeElement.style.gridColumnStart = e.x; if(index === 0){ snakeElement.classList.add('head'); } else{ snakeElement.classList.add('snake'); } board.appendChild(snakeElement); }) // Display Food foodElement = document.createElement('div'); foodElement.style.gridRowStart = food.y; foodElement.style.gridColumnStart = food.x; foodElement.classList.add('food'); board.appendChild(foodElement); } // Main logic starts here let hiscore = localStorage.getItem('hiscore'); // localStorage.clear() -> to clear local storage / high score if(hiscore == null){ hiscoreval = 0; localStorage.setItem('hiscore', JSON.stringify(hiscoreval)); } else{ highscoreval = JSON.parse(localStorage.getItem(hiscore)); highScoreBoard.innerHTML = "HighScore: "+ hiscore; } window.requestAnimationFrame(main); window.addEventListener('keydown', e=>{ inputDir = {x: 0, y: 1}; // start the game moveSound.play(); switch (e.key) { case "ArrowUp": inputDir.x = 0; inputDir.y = -1; break; case "ArrowDown": inputDir.x = 0; inputDir.y = 1; break; case "ArrowRight": inputDir.x = 1; inputDir.y = 0; break; case "ArrowLeft": inputDir.x = -1; inputDir.y = 0; break; default: break; } });