INTRODUCTION
Hello! and Assalam.u.alikum to all my community members.I hope you all are doing well in terms of health and covid situation.
Today i will tell you about the game which we all have played in our childhood , yes steemiteans iam talking about the game snake xenzia.I will create the game in JAVA SCRIPT . Soo let's begin....

Step# 1

First we add the canvas and then in the script tag after initializing variables for the game when the window loads ,we get the canvas and the context ,then add a event listener key down for key handling and then we set interval for update function .

canvas width="400" height="400" id="canvas">
const canvas = document.getElementById("canvas");
script:
let playerx = playery = 10;
let applex = appley = 15;
let gridsize = tilecount = 20;
let playerxv = playeryv = 0;
let trail = [];
let tail = 5;
window.onload=function(){
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    document.addEventListener("keydown", handleMovement);
    setInterval(gameUpdate, 1000/15, canvas, ctx);
}

Step# 2

Lets add function for handling movement it will take a parameter "e" standing for event it will contain info about the keydown event. we are using keycodes which are unique identifiers for keys, 37 to 40 is the code for the arrow keys
here is the code:

function handleMovement(e){
    switch(e.keyCode){
        case 37:
            playerxv = -1;
            playeryv = 0;
            break;
        case 38:
            playerxv = 0;
            playeryv = -1;
            break;
        case 39:
            playerxv = 1;
            playeryv = 0;
            break;
        case 40:
            playerxv = 0;
            playeryv = 1;
            break;
    }
}

Step# 3

Now let's create the main game update function first we will increase the player position by velocity.Then we will check if check if the player position is out of boundaries then we will reset the position. Then we draw the background for our game,While drawing the player we will check if any part of the player is touching it self if it is then we reset the size of the snake. Then we add the food mechanics.
Here is your code:

function gameUpdate(canvas, ctx){
    playerx += playerxv;
    playery += playeryv;
    if (playerx<0){
        playerx = tilecount-1;
    }
    if (playerx>tilecount-1){
        playerx = 0;
    }
    if (playery<0){
        playery = gridsize - 1;
    }
    if (playery>gridsize-1){
        playery = 0;
    }
    ctx.fillStyle= "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle= "lime";
    for (let i = 0;i<trail.length;i++){
        ctx.fillRect(trail[i].x*gridsize, trail[i].y*gridsize, gridsize-2, gridsize-2);
        if (trail[i].x == playerx && trail[i].y == playery){
            tail = 5;
        }
    }
    trail.push({x: playerx, y: playery});
    while(trail.length>tail){
        trail.shift();
    }
    if (playerx == applex && playery == appley){
        tail++;
        applex = Math.floor(Math.random()*tilecount);
        appley = Math.floor(Math.random()*tilecount); 
    }
    ctx.fillStyle= "red";
    ctx.fillRect(applex*gridsize, appley*gridsize, gridsize-2, gridsize-2);
}

Full Code

canvas width="400" height="400" id="canvas">
script>
window.onload=function(){
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
document.addEventListener("keydown", handleMovement);
setInterval(gameUpdate, 1000/15, canvas, ctx);

}
let playerx = playery = 10;
let applex = appley = 15;
let gridsize = tilecount = 20;
let playerxv = playeryv = 0;
let trail = [];
let tail = 5
function gameUpdate(canvas, ctx){
playerx += playerxv;
playery += playeryv;
if (playerx<0){
playerx = tilecount-1;
}
if (playerx>tilecount-1){
playerx = 0;
}
if (playery<0){
playery = gridsize - 1;
}
if (playery>gridsize-1){
playery = 0;
}
ctx.fillStyle= "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle= "lime";
for (let i = 0;i<trail.length;i++){
    ctx.fillRect(trail[i].x*gridsize, trail[i].y*gridsize, gridsize-2, gridsize-2);
    if (trail[i].x == playerx && trail[i].y == playery){
        tail = 5;
    }
}
trail.push({x: playerx, y: playery});
while(trail.length>tail){
    trail.shift();
}
if (playerx == applex && playery == appley){
    tail++;
    applex = Math.floor(Math.random()*tilecount);
    appley = Math.floor(Math.random()*tilecount); 
}
ctx.fillStyle= "red";
ctx.fillRect(applex*gridsize, appley*gridsize, gridsize-2, gridsize-2);

}
function handleMovement(e){
console.log(e.keyCode);
switch(e.keyCode){
case 37:
playerxv = -1;
playeryv = 0;
break;
case 38:
playerxv = 0;
playeryv = -1;
break;
case 39:
playerxv = 1;
playeryv = 0;
break;
case 40:
playerxv = 0;
playeryv = 1;
break;
}
}
script>

Conclusion

So that is how we create a snake game using javascript. Thank you for stopping by . I would love your support.