Post
Ask Question

How to Develop a Snake Game in JavaScript🐍

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.
  1. const cvs = document.getElementById("snake");  
  2. const ctx = cvs.getContext("2d");  
  3. const box = 32;  
  4.  
  5. const ground = new Image();  
  6. ground.src = "img/ground.png";  
  7.   
  8. const foodImg = new Image();  
  9. foodImg.src = "img/food.png";  
     
  10.   
  11. let dead = new Audio();  
  12. let eat = new Audio();  
  13. let up = new Audio();  
  14. let right = new Audio();  
  15. let left = new Audio();  
  16. let down = new Audio();  
  17.   
  18. dead.src = "audio/dead.mp3";  
  19. eat.src = "audio/eat.mp3";  
  20. up.src = "audio/up.mp3";  
  21. right.src = "audio/right.mp3";  
  22. left.src = "audio/left.mp3";  
  23. down.src = "audio/down.mp3";  
  24.   
  25. let snake = [];  
  26.   
  27. snake[0] = {  
  28.     x : 9 * box,  
  29.     y : 10 * box  
  30. };  
  31.    
     
  32. let food = {  
  33.     x : Math.floor(Math.random()*17+1) * box,  
  34.     y : Math.floor(Math.random()*15+3) * box  
  35. }  
  36.  
     
  37.   
  38. let score = 0;  
  39.   
  40.  
     
  41. let d;  
  42.   
  43. document.addEventListener("keydown",direction);  
  44.   
  45. function direction(event){  
  46.     let key = event.keyCode;  
  47.     if( key == 37 && d != "RIGHT"){  
  48.         left.play();  
  49.         d = "LEFT";  
  50.     }else if(key == 38 && d != "DOWN"){  
  51.         d = "UP";  
  52.         up.play();  
  53.     }else if(key == 39 && d != "LEFT"){  
  54.         d = "RIGHT";  
  55.         right.play();  
  56.     }else if(key == 40 && d != "UP"){  
  57.         d = "DOWN";  
  58.         down.play();  
  59.     }  
  60. }  
  61. function collision(head,array){  
  62.     for(let i = 0; i < array.length; i++){  
  63.         if(head.x == array[i].x && head.y == array[i].y){  
  64.             return true;  
  65.         }  
  66.     }  
  67.     return false;  
  68. }  
     
  69. function draw(){  
  70.       
  71.     ctx.drawImage(ground,0,0);  
  72.       
  73.     for( let i = 0; i < snake.length ; i++){  
  74.         ctx.fillStyle = ( i == 0 )? "green" : "white";  
  75.         ctx.fillRect(snake[i].x,snake[i].y,box,box);  
  76.           
  77.         ctx.strokeStyle = "red";  
  78.         ctx.strokeRect(snake[i].x,snake[i].y,box,box);  
  79.     }   
     
  80.     ctx.drawImage(foodImg, food.x, food.y);  
  81.     let snakeX = snake[0].x;  
  82.     let snakeY = snake[0].y;  
  83.     if( d == "LEFT") snakeX -= box;  
  84.     if( d == "UP") snakeY -= box;  
  85.     if( d == "RIGHT") snakeX += box;  
  86.     if( d == "DOWN") snakeY += box;  
  87.     if(snakeX == food.x && snakeY == food.y){  
  88.         score++;  
  89.         eat.play();  
  90.         food = {  
  91.             x : Math.floor(Math.random()*17+1) * box,  
  92.             y : Math.floor(Math.random()*15+3) * box  
  93.         }  
  94.  
  95.     }else{  
  96.  
  97.         snake.pop();  
  98.     }  
     
  99.     let newHead = {  
  100.         x : snakeX,  
  101.         y : snakeY  
  102.     }   
     
  103.     if(snakeX < box || snakeX > 17 * box || snakeY < 3*box || snakeY > 17*box || collision(newHead,snake)){  
  104.         clearInterval(game);  
  105.         dead.play();  
  106.     }  
  107.       
  108.     snake.unshift(newHead);  
  109.       
  110.     ctx.fillStyle = "blue";  
  111.     ctx.font = "45px Changa one";  
  112.     ctx.fillText(score,2*box,1.6*box);  
  113. }  
     
  114. let game = setInterval(draw,100); 
Step 3
 
Here, html 5 code below shows how to complete code for the Snake game .
  1. <html>  
  2.     <head>  
  3.         <title>Snake Game</title>  
  4.         <style>  
  5.             canvas{  
  6.                 display: block;  
  7.                 margin: 0 auto;  
  8.             }  
  9.         </style>  
  10.     </head>  
  11.     <canvas id="snake" width="608" height="608"></canvas>  
  12.     <script src="snake.js"></script>  
  13. </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 
 
how to develop snake game in JavaScript 
 
how to develop snake game in JavaScript 
 
how to develop snake game in JavaScript 
 
how to develop snake game in JavaScript
 

Conclusion

 
I hope you understood this article. We have created a Snake Game using JavaScript. Thanks for reading!


Similar Articles