Create Snake game in Java Script

Hello everyone, Welcome to my new post of programmingscoop. Today I'm going to share my new code that is "snake game"  written in JavaScript and little bit of html and css. As I'm a learner so i may commit mistakes so comments and suggerstion are most welome.

About program

Snake game
Snake Game
It a simple snake game that we used to play on keypad mobiles where a snake moves in the area and have to eat food to increase the score. You can run this program in your browser. 
You can download this code from here.

Let's Start

To understand this code you have to be little bit familiar to javascript. It is a simple code and i have used many comments in code you you can easily understand the code.

Now i'm explaining the code First of all Body of Game


  1. <body onkeydown="getkey(event)" onload="create_food()">
  2.     <!--Creating area for game -->
  3.     <div id="gamearea">
  4.         
  5.         <!--represent user score -->
  6.         <div id="score_container">
  7.             <div id="score_Label"><b>User Score = </b></div>
  8.             <div id="score_Value">0</div>
  9.         </div>
  10.         <!-- creating are where snake move -->
  11.         <div id="playarea">
  12.             <!-- representing snake food -->
  13.             <div id="snake_food"></div>
  14.            
  15.            <!-- representing snake -->
  16.             <div id="snake">
  17.                 <div id="leye"></div>    <!-- representing left eye of snake -->
  18.                 <div id="reye"></div>    <!-- representing right eye of snake -->
  19.             </div>
  20.         </div>
  21.     </div>
  22. </body>


Now Styling of page with Css.


  1. <style>
  2. body{background-color:black}
  3. #gamearea{border:1px solid black;height:500;width:600;margin:80px auto;background-color:darkred;}
  4. #score_container{position:relative;left:220px;top:25px;color:white;}
  5. #score_Value{height:20px;width:100px;margin-top:-18px;margin-left:130px;}
  6. #playarea{height:400px;width:500px;border:2px solid red;border-radius:5px;margin:30px auto;margin-bottom:0px;background-color:lightgreen;}
  7. #snake_food{background:red;height:7px;width:7px;border-radius:100%;position:relative;display:block;}
  8. #snake{background:black;height:4px;width:20px;border-top-right-radius:10px;border-bottom-right-radius:10px;position:relative;padding:4px;
  9.         top:200px;left:250px;}
  10. #leye,#reye{background:red;height:3px;width:3px;border-radius:100%;}
  11. #leye{margin-left:15px;margin-top:-2px;}
  12. #reye{margin-left:15px;margin-top:2px;}
  13. </style>


Now the main part of game which control the game and Javascript code


  1. <script>
  2. /*Global declaring of variables*/
  3. var score=0;   //represent user score
  4. var posl=250;  //represent snake position from left side  
  5. var posu=200;  //represent snake position from upper side
  6. var i,j;       //represents position of food
  7. var t;         //used to hold the program 
  8. var sleep=10;  //represent for how much time program is being holded
  9. /*  creating food for snake */
  10. function create_food()
  11. {
  12.     var food=document.getElementById("snake_food");
  13.     /* Calculating Position*/
  14.     i=Math.floor(Math.random()*(400-10));
  15. j=Math.floor(Math.random()*(350-10));
  16.     /* display food */
  17.     food.style.left=i+"px";
  18. food.style.top=j+"px";
  19. }
  20. //get user input by keyboard
  21. function getkey(e)
  22. {
  23.     /****************************************
  24.             left_arrow key=37
  25.             up_arrow key=38
  26.             right_arrow key=39
  27.             down_arrow key=40
  28.     *****************************************/
  29.         var key=e.which||e.keyCode;  //getting key no.
  30. switch(key)
  31. {
  32. case 37:move(4);break;   //left
  33. case 38:move(3);break;   // up
  34. case 39:move(1);break;   //right
  35. case 40:move(2);break;   //down 
  36. }
  37. }
  38. /*moving of snake*/
  39. function move(x)
  40. {     
  41.     /*used to speed up the snake */ 
  42.       if(score>10){sleep=6;}
  43.       if(score>20){sleep=4;}  
  44.           
  45.     
  46.     if(x==1){clearInterval(t); t=setInterval(right,sleep);}   //moving right
  47.     if(x==2){clearInterval(t); t=setInterval(down,sleep); }   //moving down
  48.     if(x==3){clearInterval(t); t=setInterval(up,sleep);}      //moving up
  49.     if(x==4){clearInterval(t); t=setInterval(left,sleep);}    //moving left
  50. if(x==5){clearInterval(t);}                               //stop snake 
  51.       
  52. }
  53. /*moves snake to right side*/
  54. function right()
  55. {   var lefteye=document.getElementById("leye");
  56.     var righteye=document.getElementById("reye");
  57.     var snk=document.getElementById("snake");
  58.     
  59.     posl+=1;    
  60.          
  61.         if(posl>=472)
  62.             {alert("Game Over"+"\nTotal Score="+score);clearInterval(t);restart();}
  63.        else{    
  64.                 snk.style.left=posl+"px";
  65.                 snk.style.height="4px";            
  66.                 snk.style.width="20px";
  67.                 snk.style.borderBottomLeftRadius="0px";
  68.                 snk.style.borderBottomRightRadius="10px";
  69.                 snk.style.borderTopLeftRadius="0px";
  70.                 snk.style.borderTopRightRadius="10px";
  71.                 lefteye.style.marginLeft="15px";
  72.                 righteye.style.marginLeft="15px";
  73.                 righteye.style.marginTop="2px";
  74.                 lefteye.style.marginTop="-2px";
  75.                 
  76.                 bite(posl+15,posu+4);   //check eating of food
  77.             }
  78. }
  79. /*moves snake to left side*/
  80. function left()
  81. {   var lefteye=document.getElementById("leye");
  82.     var righteye=document.getElementById("reye");
  83.     var snk=document.getElementById("snake");
  84.     posl-=1;   
  85.     if(posl<1){alert("Game Over"+"\nTotal Score="+score);clearInterval(t);restart();}
  86.     else{   
  87.             snk.style.left=posl+"px";
  88.             snk.style.height="4px";            
  89.             snk.style.width="20px";
  90.             snk.style.borderBottomLeftRadius="10px";
  91.             snk.style.borderBottomRightRadius="0px";
  92.             snk.style.borderTopLeftRadius="10px";
  93.             snk.style.borderTopRightRadius="0px";
  94.             lefteye.style.marginLeft="5px";
  95.             righteye.style.marginLeft="5px";
  96.             righteye.style.marginTop="2px";
  97.             lefteye.style.marginTop="-2px";
  98.             
  99.             bite(posl,posu+4);    //check eating of food 
  100.         }
  101. }
  102. /*moves snake to up side*/
  103. function up()
  104. {   var lefteye=document.getElementById("leye");
  105.     var righteye=document.getElementById("reye");
  106.     var snk=document.getElementById("snake");
  107.     posu-=1;
  108.     if(posu<=-10){alert("Game Over"+"\nTotal Score="+score);clearInterval(t);restart();}
  109.     else{
  110.             snk.style.top=posu+"px";
  111.             snk.style.height="20px";            
  112.             snk.style.width="4px";
  113.             snk.style.borderBottomLeftRadius="0px";
  114.             snk.style.borderBottomRightRadius="0px";
  115.             snk.style.borderTopRightRadius="10px";
  116.             snk.style.borderTopLeftRadius="10px";
  117.             lefteye.style.marginLeft="-1px";
  118.             righteye.style.marginLeft="3px";
  119.             righteye.style.marginTop="-3px";
  120.             lefteye.style.marginTop="5px";
  121.             
  122.             bite(posl+2,posu);  //check eating of food
  123.         }
  124. }
  125. /*moves snake to down side*/
  126. function down()
  127. {   var lefteye=document.getElementById("leye");
  128.     var righteye=document.getElementById("reye");
  129.     var snk=document.getElementById("snake");
  130.     posu+=1;
  131.     if(posu>=365){alert("Game Over"+"\nTotal Score="+score);clearInterval(t);restart();}
  132.     else{
  133.             snk.style.top=posu+"px";
  134.             snk.style.height="20px";            
  135.             snk.style.width="4px";
  136.             snk.style.borderBottomLeftRadius="10px";
  137.             snk.style.borderBottomRightRadius="10px";
  138.             snk.style.borderTopLeftRadius="0px";
  139.             snk.style.borderTopRightRadius="0px";
  140.             lefteye.style.marginLeft="-1px";
  141.             righteye.style.marginLeft="3px";
  142.             righteye.style.marginTop="-3px";
  143.             lefteye.style.marginTop="15px";
  144.             
  145.             bite(posl+2,posu+15);   //check eating of food
  146.         }
  147. }
  148. /*   this function checks the eating of food by snake
  149.     It takes the position of snake as argument
  150. */
  151. function bite(left,top)
  152. {  
  153.     for(k=0;k<=7;k++)
  154.     {
  155.         if((i==left-k || i==left+k) && (j==top-k|| j==top+k))
  156.         {
  157.             score++;    //incrementing score by 1
  158.             document.getElementById("score_Value").innerHTML=score;  
  159.             create_food();     //create another food 
  160.         }
  161.     }
  162. }
  163. /*this function restart the game*/
  164. function restart()
  165. {
  166.     posl=250;
  167.     posu=200;
  168.     score=0;
  169.     var lefteye=document.getElementById("leye");
  170.     var righteye=document.getElementById("reye");
  171.     document.getElementById("score_Value").innerHTML=score;
  172.     var snk=document.getElementById("snake");
  173.         snk.style.left=posl+"px";
  174.         snk.style.top=posu+"px";
  175.         snk.style.height="4px";            
  176.         snk.style.width="20px";
  177.         snk.style.borderBottomLeftRadius="0px";
  178.         snk.style.borderBottomRightRadius="10px";
  179.         snk.style.borderTopLeftRadius="0px";
  180.         snk.style.borderTopRightRadius="10px";
  181.         lefteye.style.marginLeft="15px";
  182.         righteye.style.marginLeft="15px";
  183.         righteye.style.marginTop="2px";
  184.         lefteye.style.marginTop="-2px";
  185.     create_food();
  186. }
  187. </script>

Now I'm pasting the whole code and you can copy the code or can also download from here.


  1. <html>
  2. <head>
  3. <title>Snake Game</title>
  4. <!--Styling of page-->
  5. <style>
  6. body{background-color:black}
  7. #gamearea{border:1px solid black;height:500;width:600;margin:80px auto;background-color:darkred;}
  8. #score_container{position:relative;left:220px;top:25px;color:white;}
  9. #score_Value{height:20px;width:100px;margin-top:-18px;margin-left:130px;}
  10. #playarea{height:400px;width:500px;border:2px solid red;border-radius:5px;margin:30px auto;margin-bottom:0px;background-color:lightgreen;}
  11. #snake_food{background:red;height:7px;width:7px;border-radius:100%;position:relative;display:block;}
  12. #snake{background:black;height:4px;width:20px;border-top-right-radius:10px;border-bottom-right-radius:10px;position:relative;padding:4px;
  13.         top:200px;left:250px;}
  14. #leye,#reye{background:red;height:3px;width:3px;border-radius:100%;}
  15. #leye{margin-left:15px;margin-top:-2px;}
  16. #reye{margin-left:15px;margin-top:2px;}
  17. </style>
  18. <script>
  19. /*Global declaring of variables*/
  20. var score=0;   //represent user score
  21. var posl=250;  //represent snake position from left side  
  22. var posu=200;  //represent snake position from upper side
  23. var i,j;       //represents position of food
  24. var t;         //used to hold the program 
  25. var sleep=10;  //represent for how much time program is being holded
  26. /*  creating food for snake */
  27. function create_food()
  28. {
  29.     var food=document.getElementById("snake_food");
  30.     /* Calculating Position*/
  31.     i=Math.floor(Math.random()*(400-10));
  32. j=Math.floor(Math.random()*(350-10));
  33.     /* display food */
  34.     food.style.left=i+"px";
  35. food.style.top=j+"px";
  36. }
  37. //get user input by keyboard
  38. function getkey(e)
  39. {
  40.     /****************************************
  41.             left_arrow key=37
  42.             up_arrow key=38
  43.             right_arrow key=39
  44.             down_arrow key=40
  45.     *****************************************/
  46.         var key=e.which||e.keyCode;  //getting key no.
  47. switch(key)
  48. {
  49. case 37:move(4);break;   //left
  50. case 38:move(3);break;   // up
  51. case 39:move(1);break;   //right
  52. case 40:move(2);break;   //down 
  53. }
  54. }
  55. /*moving of snake*/
  56. function move(x)
  57. {     
  58.     /*used to speed up the snake */ 
  59.       if(score>10){sleep=6;}
  60.       if(score>20){sleep=4;}  
  61.           
  62.     
  63.     if(x==1){clearInterval(t); t=setInterval(right,sleep);}   //moving right
  64.     if(x==2){clearInterval(t); t=setInterval(down,sleep); }   //moving down
  65.     if(x==3){clearInterval(t); t=setInterval(up,sleep);}      //moving up
  66.     if(x==4){clearInterval(t); t=setInterval(left,sleep);}    //moving left
  67. if(x==5){clearInterval(t);}                               //stop snake 
  68.       
  69. }
  70. /*moves snake to right side*/
  71. function right()
  72. {   var lefteye=document.getElementById("leye");
  73.     var righteye=document.getElementById("reye");
  74.     var snk=document.getElementById("snake");
  75.     
  76.     posl+=1;    
  77.          
  78.         if(posl>=472)
  79.             {alert("Game Over"+"\nTotal Score="+score);clearInterval(t);restart();}
  80.        else{    
  81.                 snk.style.left=posl+"px";
  82.                 snk.style.height="4px";            
  83.                 snk.style.width="20px";
  84.                 snk.style.borderBottomLeftRadius="0px";
  85.                 snk.style.borderBottomRightRadius="10px";
  86.                 snk.style.borderTopLeftRadius="0px";
  87.                 snk.style.borderTopRightRadius="10px";
  88.                 lefteye.style.marginLeft="15px";
  89.                 righteye.style.marginLeft="15px";
  90.                 righteye.style.marginTop="2px";
  91.                 lefteye.style.marginTop="-2px";
  92.                 
  93.                 bite(posl+15,posu+4);   //check eating of food
  94.             }
  95. }
  96. /*moves snake to left side*/
  97. function left()
  98. {   var lefteye=document.getElementById("leye");
  99.     var righteye=document.getElementById("reye");
  100.     var snk=document.getElementById("snake");
  101.     posl-=1;   
  102.     if(posl<1){alert("Game Over"+"\nTotal Score="+score);clearInterval(t);restart();}
  103.     else{   
  104.             snk.style.left=posl+"px";
  105.             snk.style.height="4px";            
  106.             snk.style.width="20px";
  107.             snk.style.borderBottomLeftRadius="10px";
  108.             snk.style.borderBottomRightRadius="0px";
  109.             snk.style.borderTopLeftRadius="10px";
  110.             snk.style.borderTopRightRadius="0px";
  111.             lefteye.style.marginLeft="5px";
  112.             righteye.style.marginLeft="5px";
  113.             righteye.style.marginTop="2px";
  114.             lefteye.style.marginTop="-2px";
  115.             
  116.             bite(posl,posu+4);    //check eating of food 
  117.         }
  118. }
  119. /*moves snake to up side*/
  120. function up()
  121. {   var lefteye=document.getElementById("leye");
  122.     var righteye=document.getElementById("reye");
  123.     var snk=document.getElementById("snake");
  124.     posu-=1;
  125.     if(posu<=-10){alert("Game Over"+"\nTotal Score="+score);clearInterval(t);restart();}
  126.     else{
  127.             snk.style.top=posu+"px";
  128.             snk.style.height="20px";            
  129.             snk.style.width="4px";
  130.             snk.style.borderBottomLeftRadius="0px";
  131.             snk.style.borderBottomRightRadius="0px";
  132.             snk.style.borderTopRightRadius="10px";
  133.             snk.style.borderTopLeftRadius="10px";
  134.             lefteye.style.marginLeft="-1px";
  135.             righteye.style.marginLeft="3px";
  136.             righteye.style.marginTop="-3px";
  137.             lefteye.style.marginTop="5px";
  138.             
  139.             bite(posl+2,posu);  //check eating of food
  140.         }
  141. }
  142. /*moves snake to down side*/
  143. function down()
  144. {   var lefteye=document.getElementById("leye");
  145.     var righteye=document.getElementById("reye");
  146.     var snk=document.getElementById("snake");
  147.     posu+=1;
  148.     if(posu>=365){alert("Game Over"+"\nTotal Score="+score);clearInterval(t);restart();}
  149.     else{
  150.             snk.style.top=posu+"px";
  151.             snk.style.height="20px";            
  152.             snk.style.width="4px";
  153.             snk.style.borderBottomLeftRadius="10px";
  154.             snk.style.borderBottomRightRadius="10px";
  155.             snk.style.borderTopLeftRadius="0px";
  156.             snk.style.borderTopRightRadius="0px";
  157.             lefteye.style.marginLeft="-1px";
  158.             righteye.style.marginLeft="3px";
  159.             righteye.style.marginTop="-3px";
  160.             lefteye.style.marginTop="15px";
  161.             
  162.             bite(posl+2,posu+15);   //check eating of food
  163.         }
  164. }
  165. /*   this function checks the eating of food by snake
  166.     It takes the position of snake as argument
  167. */
  168. function bite(left,top)
  169. {  
  170.     for(k=0;k<=7;k++)
  171.     {
  172.         if((i==left-k || i==left+k) && (j==top-k|| j==top+k))
  173.         {
  174.             score++;    //incrementing score by 1
  175.             document.getElementById("score_Value").innerHTML=score;  
  176.             create_food();     //create another food 
  177.         }
  178.     }
  179. }
  180. /*this function restart the game*/
  181. function restart()
  182. {
  183.     posl=250;
  184.     posu=200;
  185.     score=0;
  186.     var lefteye=document.getElementById("leye");
  187.     var righteye=document.getElementById("reye");
  188.     document.getElementById("score_Value").innerHTML=score;
  189.     var snk=document.getElementById("snake");
  190.         snk.style.left=posl+"px";
  191.         snk.style.top=posu+"px";
  192.         snk.style.height="4px";            
  193.         snk.style.width="20px";
  194.         snk.style.borderBottomLeftRadius="0px";
  195.         snk.style.borderBottomRightRadius="10px";
  196.         snk.style.borderTopLeftRadius="0px";
  197.         snk.style.borderTopRightRadius="10px";
  198.         lefteye.style.marginLeft="15px";
  199.         righteye.style.marginLeft="15px";
  200.         righteye.style.marginTop="2px";
  201.         lefteye.style.marginTop="-2px";
  202.     create_food();
  203. }
  204. </script>
  205. </head>
  206. <body onkeydown="getkey(event)" onload="create_food()">
  207.     <!--Creating area for game -->
  208.     <div id="gamearea">
  209.         
  210.         <!--represent user score -->
  211.         <div id="score_container">
  212.             <div id="score_Label"><b>User Score = </b></div>
  213.             <div id="score_Value">0</div>
  214.         </div>
  215.         <!-- creating are where snake move -->
  216.         <div id="playarea">
  217.             <!-- representing snake food -->
  218.             <div id="snake_food"></div>
  219.            
  220.            <!-- representing snake -->
  221.             <div id="snake">
  222.                 <div id="leye"></div>    <!-- representing left eye of snake -->
  223.                 <div id="reye"></div>    <!-- representing right eye of snake -->
  224.             </div>
  225.         </div>
  226.     </div>
  227. </body>
  228.  
  229. </html>

If you have any query about these program then feel free to ask in comment or on social media.