How to Develop a Snake Game in JavaScript🐍

Prabakaran M
Nov 26, 2024

22.6k
0
8
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Introduction

In this article, I will explain how to develop the basic project of a snake game. It is a basic game development project in JavaScript.

Step 1. Open a Sublime text editor.

JavaScript Code

Here, I have created all the JavaScript file code.

Step 2. In this part, you will create the snake moving script for the snake game and add the given script in the Head section of the HTML tags. Here, JavaScript is used for basic game development purposes.

const cvs = document.getElementById("snake");  
const ctx = cvs.getContext("2d");  
const box = 32;  

const ground = new Image();  
ground.src = "img/ground.png";  
  
const foodImg = new Image();  
foodImg.src = "img/food.png";  

  
let dead = new Audio();  
let eat = new Audio();  
let up = new Audio();  
let right = new Audio();  
let left = new Audio();  
let down = new Audio();  
  
dead.src = "audio/dead.mp3";  
eat.src = "audio/eat.mp3";  
up.src = "audio/up.mp3";  
right.src = "audio/right.mp3";  
left.src = "audio/left.mp3";  
down.src = "audio/down.mp3";  
  
let snake = [];  
  
snake[0] = {  
    x : 9 * box,  
    y : 10 * box  
};  
   

let food = {  
    x : Math.floor(Math.random()*17+1) * box,  
    y : Math.floor(Math.random()*15+3) * box  
}  
   
let score = 0;  
  
let d;  
  
document.addEventListener("keydown",direction);  
  
function direction(event){  
    let key = event.keyCode;  
    if( key == 37 && d != "RIGHT"){  
        left.play();  
        d = "LEFT";  
    }else if(key == 38 && d != "DOWN"){  
        d = "UP";  
        up.play();  
    }else if(key == 39 && d != "LEFT"){  
        d = "RIGHT";  
        right.play();  
    }else if(key == 40 && d != "UP"){  
        d = "DOWN";  
        down.play();  
    }  
}  
function collision(head,array){  
    for(let i = 0; i < array.length; i++){  
        if(head.x == array[i].x && head.y == array[i].y){  
            return true;  
        }  
    }  
    return false;  
}  

function draw(){  
      
    ctx.drawImage(ground,0,0);  
      
    for( let i = 0; i < snake.length ; i++){  
        ctx.fillStyle = ( i == 0 )? "green" : "white";  
        ctx.fillRect(snake[i].x,snake[i].y,box,box);  
          
        ctx.strokeStyle = "red";  
        ctx.strokeRect(snake[i].x,snake[i].y,box,box);  
    }   

    ctx.drawImage(foodImg, food.x, food.y);  
    let snakeX = snake[0].x;  
    let snakeY = snake[0].y;  
    if( d == "LEFT") snakeX -= box;  
    if( d == "UP") snakeY -= box;  
    if( d == "RIGHT") snakeX += box;  
    if( d == "DOWN") snakeY += box;  
    if(snakeX == food.x && snakeY == food.y){  
        score++;  
        eat.play();  
        food = {  
            x : Math.floor(Math.random()*17+1) * box,  
            y : Math.floor(Math.random()*15+3) * box  
        }  

    }else{  

        snake.pop();  
    }  

    let newHead = {  
        x : snakeX,  
        y : snakeY  
    }   

    if(snakeX < box || snakeX > 17 * box || snakeY < 3*box || snakeY > 17*box || collision(newHead,snake)){  
        clearInterval(game);  
        dead.play();  
    }  
      
    snake.unshift(newHead);  
      
    ctx.fillStyle = "blue";  
    ctx.font = "45px Changa one";  
    ctx.fillText(score,2*box,1.6*box);  
}  

let game = setInterval(draw,100);

Step 3. The HTML 5 code below shows how to complete the code for the Snake game.

<html>  
    <head>  
        <title>Snake Game</title>  
        <style>  
            canvas{  
                display: block;  
                margin: 0 auto;  
            }  
        </style>  
    </head>  
    <canvas id="snake" width="608" height="608"></canvas>  
    <script src="snake.js"></script>  
</html>

Output

Now, you can right-click on the sublime text window stage. A dialog box appears. Select ->open a new browser.

how to develop snake game in JavaScript