Snake.js

// Game Constant & Variables
let inputDir = {x: 0, y: 0};
const foodSound = new Audio('Food.wav');
const gameOverSound = new Audio('GameOver.wav');
const moveSound = new Audio('Move Sweap.wav');
const musicSound = new Audio('GameMusic.mp3');
let speed = 10;
let score = 0;
let lastPaintTime = 0;
let snakeArr = [
    {x: 13, y: 15}
]

food =
    {x: 6, y: 7}


// Game Functions
function main(ctime){
    window.requestAnimationFrame(main);
    // console.log(ctime);

    if((ctime - lastPaintTime)/1000 < 1/speed){
        return;
    }
    lastPaintTime = ctime;
    gameEngine();
    
}

function isCollide(snake){
    // If You bumb into yourself
    for (let i = 1; i<snakeArr.length; i++){
        if(snake[i].x === snake[0].x && snake[i].y === snake[0].y){
            return true;
        }
    }
    // if you collide to wall
    if(snake[0].x >=25 || snake[0].x<=0 || snake[0].y >=25 || snake[0].y<=0){
        return true;
    }
}

function gameEngine(){
    // Part 1 Updating Snake Array
    if(isCollide(snakeArr)){
        gameOverSound.play();
        musicSound.pause(); 
        inputDir = {x: 0, y: 0};
        alert("Game Over Press Enter Key To Play Again");
        snakeArr = [{x:13, y:15}];
        musicSound.play();
        score = 0;
    }

    // If Snake Eat Food increament the score and regenerate the food
    if(snakeArr[0].y === food.y && snakeArr[0].x === food.x){
        foodSound.play();
        score++;
        if(score>Hiscoreval){
            Hiscoreval = score;
            localStorage.setItem("Hiscore", JSON.stringify(Hiscoreval));
            HiscoreBox.innerHTML = "High Score: " + Hiscoreval;
        }
        scoreBox.innerHTML = "Score: " + score;
        snakeArr.unshift({x:snakeArr[0].x + inputDir.x, y:snakeArr[0].y + inputDir.y});
        let a = 2;
        let b = 16;
        food = {x: + Math.round(a + (b-a)* Math.random()), y: + Math.round(a + (b-a)* Math.random())};
    }

    // Moving 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 Render / 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);
    })
    // Render / Display food
    
       foodElement = document.createElement('div'); 
       foodElement.style.gridRowStart = food.y;
       foodElement.style.gridColumnStart = food.x;
       foodElement.classList.add('food');
       board.appendChild(foodElement);
    
}



// High Score
let Hiscore = localStorage.getItem("Hiscore");
if(Hiscore === null){
    Hiscoreval = 0;
    localStorage.setItem("Hiscore", JSON.stringify(Hiscoreval));
}else{
    Hiscoreval = JSON.parse(Hiscore);
    HiscoreBox.innerHTML = "High Score: " + Hiscore;
}

// Main Logic
musicSound.play();
window.requestAnimationFrame(main);
window.addEventListener('keydown', e=>{
    inputDir = {x:0, y:1} //Start The Game
    moveSound.play();

    //    Aroow Keys On Press
    switch(e.key){
        case "ArrowUp":
            console.log("ArrowUp");
            inputDir.x = 0;
            inputDir.y = -1;
            break;
        case "ArrowDown":
            console.log("ArrowDown");
            inputDir.x = 0;
            inputDir.y = 1;
            break;
        case "ArrowLeft":
            console.log("ArrowLeft");
            inputDir.x = -1;
            inputDir.y = 0;
            break;
        case "ArrowRight":
            console.log("ArrowRight");
            inputDir.x = 1;
            inputDir.y = 0;
            break;
        default:
            break;
    }

});