MY SNAKE GAME

//HTML PART
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake</title>
    <style>
        body{
            margin: 0px;
            padding: 0px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        canvas{
            box-shadow: black 20px 10px 50px;
        }
    </style>
</head>
<body>
    <h1><i>Snake</h1></i>
    <canvas id="game" width="400" height="400"/>
    <script src="index.js"></script>
</body>
</html>

//JAVA SCRIPT PART

const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');


class SnakePart{
    constructor(x, y){
        this.x = x;
        this.y = y;
    }
}



let speed = 7;

let tileCount = 20;
let tileSize = canvas.width / tileCount - 2;
let headX = 10;
let headY = 10;
const SnakeParts =[];
let tailLength = 2;

let appleX = 5
let appleY = 5

let xVelocity = 0;
let yVelocity = 0;

let score = 0;

function drawGame(){
    changeSnakePosition();
    let result = isGameOver();
    if(result){
        return;

    }

    clearScreen();
    checkAppleCollision();
    drawApple();
    drawSnake();

    drawScore();

    setTimeout(drawGame, 1000/ speed);
}

function isGameOver(){
    let gameOver = false;

    if(yVelocity ===0 && xVelocity ===0){
        return false;
    }
    //wals
    if(headX < 0){
        gameOver = true;
    }
    else if (headX === tileCount){
        gameOver = true;
    }
    else if( headY < 0){
        gameOver = true;
    }
    else if(headY === tileCount){
        gameOver = true;
    }
    for(let i =0; i< SnakeParts.length; i++){
        let part = SnakeParts[i];
        if(part.x === headX && part.y === headY){
            gameOver = true;
            break;
        }
    }
    if(gameOver){
        ctx.fillStyle = " #EA9AB2 ";
        ctx.font = "50px Arizonia";
 

        ctx.fillText("Game Over!", canvas.width / 6.5, canvas.height / 2)
    }
    return gameOver;
}
function drawScore(){
    ctx.fillStyle = "white";
    ctx.font = "10px Verdana"
    ctx.fillText(" Score " + score, canvas.width -50, 10);
}

function clearScreen(){
    ctx.fillStyle = 'black';
    ctx.fillRect(0,0,canvas.clientWidth,canvas.height);
}
function drawSnake(){


    ctx.fillStyle = 'green';
    for(let i =0; i < SnakeParts.length; i++){
        let part = SnakeParts[i];
        ctx.fillRect(part.x * tileCount, part.y * tileCount, tileSize, tileSize)
    }

    SnakeParts.push(new SnakePart(headX, headY));
    if(SnakeParts.length >tailLength){
        SnakeParts.shift();
    }
    ctx.fillStyle = 'orange'
    ctx.fillRect(headX * tileCount, headY * tileCount, tileSize, tileSize)
}
function changeSnakePosition(){
    headX = headX + xVelocity;
    headY = headY + yVelocity;
}
function drawApple(){
    ctx.fillStyle = "red";
    ctx.fillRect(appleX * tileCount, appleY * tileCount, tileSize, tileSize)
}
function checkAppleCollision(){
    if(appleX ==  headX && appleY == headY){
        appleX = Math.floor(Math.random()* tileCount);
        appleY = Math.floor(Math.random()* tileCount);
        tailLength++;
        score++;
    }
}
document.body.addEventListener('keydown', keyDown);

function keyDown(event){
    //up eventcode = 38
    if(event.keyCode == 38){
        if (yVelocity==1)
        return;
        yVelocity = -1;
        xVelocity = 0;
    
    }
    //down
if(event.keyCode == 40){
    if (yVelocity==-1)
        return;
    yVelocity = 1;
    xVelocity = 0;
}
//left
if(event.keyCode == 37){
    if (xVelocity==1)
    return;
    yVelocity = 0;
    xVelocity = -1;
}
//right
if(event.keyCode == 39){
    if (xVelocity==-1)
    return;
    yVelocity = 0;
    xVelocity = 1;
}
}


   
drawGame();



//I made this game and I would really like to share this but the only way seems that it'll be possible is you copying this code in visual studio code too. And get the live server plugin. I will share the link too but I dont think its going to work. I hope it does. This is not a blog. I couldn't share it normally so I'm getting help.

http://127.0.0.1:5500/index.html