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 |
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
- <body onkeydown="getkey(event)" onload="create_food()">
- <!--Creating area for game -->
- <div id="gamearea">
- <!--represent user score -->
- <div id="score_container">
- <div id="score_Label"><b>User Score = </b></div>
- <div id="score_Value">0</div>
- </div>
- <!-- creating are where snake move -->
- <div id="playarea">
- <!-- representing snake food -->
- <div id="snake_food"></div>
- <!-- representing snake -->
- <div id="snake">
- <div id="leye"></div> <!-- representing left eye of snake -->
- <div id="reye"></div> <!-- representing right eye of snake -->
- </div>
- </div>
- </div>
- </body>
Now Styling of page with Css.
- <style>
- body{background-color:black}
- #gamearea{border:1px solid black;height:500;width:600;margin:80px auto;background-color:darkred;}
- #score_container{position:relative;left:220px;top:25px;color:white;}
- #score_Value{height:20px;width:100px;margin-top:-18px;margin-left:130px;}
- #playarea{height:400px;width:500px;border:2px solid red;border-radius:5px;margin:30px auto;margin-bottom:0px;background-color:lightgreen;}
- #snake_food{background:red;height:7px;width:7px;border-radius:100%;position:relative;display:block;}
- #snake{background:black;height:4px;width:20px;border-top-right-radius:10px;border-bottom-right-radius:10px;position:relative;padding:4px;
- top:200px;left:250px;}
- #leye,#reye{background:red;height:3px;width:3px;border-radius:100%;}
- #leye{margin-left:15px;margin-top:-2px;}
- #reye{margin-left:15px;margin-top:2px;}
- </style>
Now the main part of game which control the game and Javascript code
- <script>
- /*Global declaring of variables*/
- var score=0; //represent user score
- var posl=250; //represent snake position from left side
- var posu=200; //represent snake position from upper side
- var i,j; //represents position of food
- var t; //used to hold the program
- var sleep=10; //represent for how much time program is being holded
- /* creating food for snake */
- function create_food()
- {
- var food=document.getElementById("snake_food");
- /* Calculating Position*/
- i=Math.floor(Math.random()*(400-10));
- j=Math.floor(Math.random()*(350-10));
- /* display food */
- food.style.left=i+"px";
- food.style.top=j+"px";
- }
- //get user input by keyboard
- function getkey(e)
- {
- /****************************************
- left_arrow key=37
- up_arrow key=38
- right_arrow key=39
- down_arrow key=40
- *****************************************/
- var key=e.which||e.keyCode; //getting key no.
- switch(key)
- {
- case 37:move(4);break; //left
- case 38:move(3);break; // up
- case 39:move(1);break; //right
- case 40:move(2);break; //down
- }
- }
- /*moving of snake*/
- function move(x)
- {
- /*used to speed up the snake */
- if(score>10){sleep=6;}
- if(score>20){sleep=4;}
- if(x==1){clearInterval(t); t=setInterval(right,sleep);} //moving right
- if(x==2){clearInterval(t); t=setInterval(down,sleep); } //moving down
- if(x==3){clearInterval(t); t=setInterval(up,sleep);} //moving up
- if(x==4){clearInterval(t); t=setInterval(left,sleep);} //moving left
- if(x==5){clearInterval(t);} //stop snake
- }
- /*moves snake to right side*/
- function right()
- { var lefteye=document.getElementById("leye");
- var righteye=document.getElementById("reye");
- var snk=document.getElementById("snake");
- posl+=1;
- if(posl>=472)
- {alert("Game Over"+"\nTotal Score="+score);clearInterval(t);restart();}
- else{
- snk.style.left=posl+"px";
- snk.style.height="4px";
- snk.style.width="20px";
- snk.style.borderBottomLeftRadius="0px";
- snk.style.borderBottomRightRadius="10px";
- snk.style.borderTopLeftRadius="0px";
- snk.style.borderTopRightRadius="10px";
- lefteye.style.marginLeft="15px";
- righteye.style.marginLeft="15px";
- righteye.style.marginTop="2px";
- lefteye.style.marginTop="-2px";
- bite(posl+15,posu+4); //check eating of food
- }
- }
- /*moves snake to left side*/
- function left()
- { var lefteye=document.getElementById("leye");
- var righteye=document.getElementById("reye");
- var snk=document.getElementById("snake");
- posl-=1;
- if(posl<1){alert("Game Over"+"\nTotal Score="+score);clearInterval(t);restart();}
- else{
- snk.style.left=posl+"px";
- snk.style.height="4px";
- snk.style.width="20px";
- snk.style.borderBottomLeftRadius="10px";
- snk.style.borderBottomRightRadius="0px";
- snk.style.borderTopLeftRadius="10px";
- snk.style.borderTopRightRadius="0px";
- lefteye.style.marginLeft="5px";
- righteye.style.marginLeft="5px";
- righteye.style.marginTop="2px";
- lefteye.style.marginTop="-2px";
- bite(posl,posu+4); //check eating of food
- }
- }
- /*moves snake to up side*/
- function up()
- { var lefteye=document.getElementById("leye");
- var righteye=document.getElementById("reye");
- var snk=document.getElementById("snake");
- posu-=1;
- if(posu<=-10){alert("Game Over"+"\nTotal Score="+score);clearInterval(t);restart();}
- else{
- snk.style.top=posu+"px";
- snk.style.height="20px";
- snk.style.width="4px";
- snk.style.borderBottomLeftRadius="0px";
- snk.style.borderBottomRightRadius="0px";
- snk.style.borderTopRightRadius="10px";
- snk.style.borderTopLeftRadius="10px";
- lefteye.style.marginLeft="-1px";
- righteye.style.marginLeft="3px";
- righteye.style.marginTop="-3px";
- lefteye.style.marginTop="5px";
- bite(posl+2,posu); //check eating of food
- }
- }
- /*moves snake to down side*/
- function down()
- { var lefteye=document.getElementById("leye");
- var righteye=document.getElementById("reye");
- var snk=document.getElementById("snake");
- posu+=1;
- if(posu>=365){alert("Game Over"+"\nTotal Score="+score);clearInterval(t);restart();}
- else{
- snk.style.top=posu+"px";
- snk.style.height="20px";
- snk.style.width="4px";
- snk.style.borderBottomLeftRadius="10px";
- snk.style.borderBottomRightRadius="10px";
- snk.style.borderTopLeftRadius="0px";
- snk.style.borderTopRightRadius="0px";
- lefteye.style.marginLeft="-1px";
- righteye.style.marginLeft="3px";
- righteye.style.marginTop="-3px";
- lefteye.style.marginTop="15px";
- bite(posl+2,posu+15); //check eating of food
- }
- }
- /* this function checks the eating of food by snake
- It takes the position of snake as argument
- */
- function bite(left,top)
- {
- for(k=0;k<=7;k++)
- {
- if((i==left-k || i==left+k) && (j==top-k|| j==top+k))
- {
- score++; //incrementing score by 1
- document.getElementById("score_Value").innerHTML=score;
- create_food(); //create another food
- }
- }
- }
- /*this function restart the game*/
- function restart()
- {
- posl=250;
- posu=200;
- score=0;
- var lefteye=document.getElementById("leye");
- var righteye=document.getElementById("reye");
- document.getElementById("score_Value").innerHTML=score;
- var snk=document.getElementById("snake");
- snk.style.left=posl+"px";
- snk.style.top=posu+"px";
- snk.style.height="4px";
- snk.style.width="20px";
- snk.style.borderBottomLeftRadius="0px";
- snk.style.borderBottomRightRadius="10px";
- snk.style.borderTopLeftRadius="0px";
- snk.style.borderTopRightRadius="10px";
- lefteye.style.marginLeft="15px";
- righteye.style.marginLeft="15px";
- righteye.style.marginTop="2px";
- lefteye.style.marginTop="-2px";
- create_food();
- }
- </script>
Now I'm pasting the whole code and you can copy the code or can also download from here.
- <html>
- <head>
- <title>Snake Game</title>
- <!--Styling of page-->
- <style>
- body{background-color:black}
- #gamearea{border:1px solid black;height:500;width:600;margin:80px auto;background-color:darkred;}
- #score_container{position:relative;left:220px;top:25px;color:white;}
- #score_Value{height:20px;width:100px;margin-top:-18px;margin-left:130px;}
- #playarea{height:400px;width:500px;border:2px solid red;border-radius:5px;margin:30px auto;margin-bottom:0px;background-color:lightgreen;}
- #snake_food{background:red;height:7px;width:7px;border-radius:100%;position:relative;display:block;}
- #snake{background:black;height:4px;width:20px;border-top-right-radius:10px;border-bottom-right-radius:10px;position:relative;padding:4px;
- top:200px;left:250px;}
- #leye,#reye{background:red;height:3px;width:3px;border-radius:100%;}
- #leye{margin-left:15px;margin-top:-2px;}
- #reye{margin-left:15px;margin-top:2px;}
- </style>
- <script>
- /*Global declaring of variables*/
- var score=0; //represent user score
- var posl=250; //represent snake position from left side
- var posu=200; //represent snake position from upper side
- var i,j; //represents position of food
- var t; //used to hold the program
- var sleep=10; //represent for how much time program is being holded
- /* creating food for snake */
- function create_food()
- {
- var food=document.getElementById("snake_food");
- /* Calculating Position*/
- i=Math.floor(Math.random()*(400-10));
- j=Math.floor(Math.random()*(350-10));
- /* display food */
- food.style.left=i+"px";
- food.style.top=j+"px";
- }
- //get user input by keyboard
- function getkey(e)
- {
- /****************************************
- left_arrow key=37
- up_arrow key=38
- right_arrow key=39
- down_arrow key=40
- *****************************************/
- var key=e.which||e.keyCode; //getting key no.
- switch(key)
- {
- case 37:move(4);break; //left
- case 38:move(3);break; // up
- case 39:move(1);break; //right
- case 40:move(2);break; //down
- }
- }
- /*moving of snake*/
- function move(x)
- {
- /*used to speed up the snake */
- if(score>10){sleep=6;}
- if(score>20){sleep=4;}
- if(x==1){clearInterval(t); t=setInterval(right,sleep);} //moving right
- if(x==2){clearInterval(t); t=setInterval(down,sleep); } //moving down
- if(x==3){clearInterval(t); t=setInterval(up,sleep);} //moving up
- if(x==4){clearInterval(t); t=setInterval(left,sleep);} //moving left
- if(x==5){clearInterval(t);} //stop snake
- }
- /*moves snake to right side*/
- function right()
- { var lefteye=document.getElementById("leye");
- var righteye=document.getElementById("reye");
- var snk=document.getElementById("snake");
- posl+=1;
- if(posl>=472)
- {alert("Game Over"+"\nTotal Score="+score);clearInterval(t);restart();}
- else{
- snk.style.left=posl+"px";
- snk.style.height="4px";
- snk.style.width="20px";
- snk.style.borderBottomLeftRadius="0px";
- snk.style.borderBottomRightRadius="10px";
- snk.style.borderTopLeftRadius="0px";
- snk.style.borderTopRightRadius="10px";
- lefteye.style.marginLeft="15px";
- righteye.style.marginLeft="15px";
- righteye.style.marginTop="2px";
- lefteye.style.marginTop="-2px";
- bite(posl+15,posu+4); //check eating of food
- }
- }
- /*moves snake to left side*/
- function left()
- { var lefteye=document.getElementById("leye");
- var righteye=document.getElementById("reye");
- var snk=document.getElementById("snake");
- posl-=1;
- if(posl<1){alert("Game Over"+"\nTotal Score="+score);clearInterval(t);restart();}
- else{
- snk.style.left=posl+"px";
- snk.style.height="4px";
- snk.style.width="20px";
- snk.style.borderBottomLeftRadius="10px";
- snk.style.borderBottomRightRadius="0px";
- snk.style.borderTopLeftRadius="10px";
- snk.style.borderTopRightRadius="0px";
- lefteye.style.marginLeft="5px";
- righteye.style.marginLeft="5px";
- righteye.style.marginTop="2px";
- lefteye.style.marginTop="-2px";
- bite(posl,posu+4); //check eating of food
- }
- }
- /*moves snake to up side*/
- function up()
- { var lefteye=document.getElementById("leye");
- var righteye=document.getElementById("reye");
- var snk=document.getElementById("snake");
- posu-=1;
- if(posu<=-10){alert("Game Over"+"\nTotal Score="+score);clearInterval(t);restart();}
- else{
- snk.style.top=posu+"px";
- snk.style.height="20px";
- snk.style.width="4px";
- snk.style.borderBottomLeftRadius="0px";
- snk.style.borderBottomRightRadius="0px";
- snk.style.borderTopRightRadius="10px";
- snk.style.borderTopLeftRadius="10px";
- lefteye.style.marginLeft="-1px";
- righteye.style.marginLeft="3px";
- righteye.style.marginTop="-3px";
- lefteye.style.marginTop="5px";
- bite(posl+2,posu); //check eating of food
- }
- }
- /*moves snake to down side*/
- function down()
- { var lefteye=document.getElementById("leye");
- var righteye=document.getElementById("reye");
- var snk=document.getElementById("snake");
- posu+=1;
- if(posu>=365){alert("Game Over"+"\nTotal Score="+score);clearInterval(t);restart();}
- else{
- snk.style.top=posu+"px";
- snk.style.height="20px";
- snk.style.width="4px";
- snk.style.borderBottomLeftRadius="10px";
- snk.style.borderBottomRightRadius="10px";
- snk.style.borderTopLeftRadius="0px";
- snk.style.borderTopRightRadius="0px";
- lefteye.style.marginLeft="-1px";
- righteye.style.marginLeft="3px";
- righteye.style.marginTop="-3px";
- lefteye.style.marginTop="15px";
- bite(posl+2,posu+15); //check eating of food
- }
- }
- /* this function checks the eating of food by snake
- It takes the position of snake as argument
- */
- function bite(left,top)
- {
- for(k=0;k<=7;k++)
- {
- if((i==left-k || i==left+k) && (j==top-k|| j==top+k))
- {
- score++; //incrementing score by 1
- document.getElementById("score_Value").innerHTML=score;
- create_food(); //create another food
- }
- }
- }
- /*this function restart the game*/
- function restart()
- {
- posl=250;
- posu=200;
- score=0;
- var lefteye=document.getElementById("leye");
- var righteye=document.getElementById("reye");
- document.getElementById("score_Value").innerHTML=score;
- var snk=document.getElementById("snake");
- snk.style.left=posl+"px";
- snk.style.top=posu+"px";
- snk.style.height="4px";
- snk.style.width="20px";
- snk.style.borderBottomLeftRadius="0px";
- snk.style.borderBottomRightRadius="10px";
- snk.style.borderTopLeftRadius="0px";
- snk.style.borderTopRightRadius="10px";
- lefteye.style.marginLeft="15px";
- righteye.style.marginLeft="15px";
- righteye.style.marginTop="2px";
- lefteye.style.marginTop="-2px";
- create_food();
- }
- </script>
- </head>
- <body onkeydown="getkey(event)" onload="create_food()">
- <!--Creating area for game -->
- <div id="gamearea">
- <!--represent user score -->
- <div id="score_container">
- <div id="score_Label"><b>User Score = </b></div>
- <div id="score_Value">0</div>
- </div>
- <!-- creating are where snake move -->
- <div id="playarea">
- <!-- representing snake food -->
- <div id="snake_food"></div>
- <!-- representing snake -->
- <div id="snake">
- <div id="leye"></div> <!-- representing left eye of snake -->
- <div id="reye"></div> <!-- representing right eye of snake -->
- </div>
- </div>
- </div>
- </body>
- </html>
If you have any query about these program then feel free to ask in comment or on social media.
0 Comments