Code the Snake Game using HTML and Javascript

Hi friends I am very happy to share the snake game script. It is really cool and joy, actually the movement of snake is based on CSS px value.
snake.html
1 <!DOCTYPE html>
2 <html>
3     <head> 
4         <meta charset = "utf-8"/> 
5         <title>Snake Games</title>
6         <style>
7         #board {
8         width: 400px;
9         height: 400px;
10         position: relative;
11         background: black;
12         }
13 
14         .snake {
15         width: 20px;
16         height: 20px;
17         position: absolute;
18         background-color: green;
19         text-align: center;
20         }
21 
22         #apple {
23         width: 20px;
24         height: 20px;
25         position: absolute;
26         background-color: red;
27         top:120px;
28         left:80px;
29         }
30         </style>
31     </head>
32     <body>    
33         <div id="board">
34             <div id="apple"></div>
35             <div class="snake"></div>
36         </div>
37         <div>
38         <p>Created by <a href = "https://www.algoberry.com" target="_blank">Algoberry</a></p> 
39         </div>
40     </body>
41 </html>
42 <script>
43 
44 //Object Declaration
45 var boardobj;
46 var appleobj;
47 var snakeobj;
48 
49 //Variable Declaration
50 var portionSize = 20;    //Same portion size should be set to snake (width, height) & apple (width, height) 
51 
52 var boardTop = 400;        //Board top position
53 var boardLeft = 400;    //Board left position
54 
55 var appleTop = 120;        //Default apple top position
56 var appleLeft = 80;        //Default apple left position
57 
58 var getSnakeTop = 0;
59 var getSnakeLeft = 0;
60 
61 var counter = 0;
62 var snakeLength = 0;
63 
64 function starter() {
65     boardobj = document.getElementById("board");
66     appleobj = document.getElementById("apple");
67     snakeobj = document.getElementById("board").getElementsByClassName("snake");
68     snakeobj[0].style.top = "0px";
69     snakeobj[0].innerHTML = snakeLength;
70     snakeobj[0].style.left = "0px";
71 }
72 
73 function run() {
74     //Get current snake position
75     getSnakeTop = snakeobj[0].style.top;
76     getSnakeTop = getSnakeTop.replace("px","");
77     getSnakeTop = parseInt(getSnakeTop);
78     
79     getSnakeLeft = snakeobj[0].style.left;
80     getSnakeLeft = getSnakeLeft.replace("px","");
81     getSnakeLeft = parseInt(getSnakeLeft);
82     
83     if(getSnakeTop == appleTop || getSnakeLeft < appleLeft || getSnakeLeft > appleLeft) { //snake and apple are present in same column
84         //---
85         if(getSnakeLeft < appleLeft) {
86             getSnakeLeft = getSnakeLeft + portionSize;
87         }
88         else
89         {
90             getSnakeLeft = getSnakeLeft - portionSize;
91         }
92         if(getSnakeLeft < 0) {    
93             getSnakeLeft = boardLeft-portionSize; 
94         }
95         else if(getSnakeLeft == boardLeft) {
96             getSnakeLeft = 0;
97         }
98     
99         if(getSnakeTop == appleTop && getSnakeLeft == appleLeft) {
100             eat();
101         }
102         else
103         {
104             follow();
105             snakeobj[0].style.left = getSnakeLeft+"px";
106         }
107         //---
108     }
109     else if(getSnakeLeft == appleLeft || getSnakeTop < appleTop || getSnakeTop > appleTop) { //snake and apple are present in same row
110         //---
111         if(getSnakeTop < appleTop) {
112             getSnakeTop = getSnakeTop + portionSize;
113         }
114         else
115         {
116             getSnakeTop = getSnakeTop - portionSize;
117         }
118         if(getSnakeTop < 0) {    
119             getSnakeTop = boardTop-portionSize; 
120         }
121         else if(getSnakeTop == boardTop) {    
122             getSnakeTop = 0; 
123         }
124         
125         if(getSnakeTop == appleTop && getSnakeLeft == appleLeft) {
126             eat();
127         }
128         else
129         {
130             follow();
131             snakeobj[0].style.top = getSnakeTop+"px";
132         }
133         //---
134     }
135 }
136 
137 function follow() {
138     if(snakeLength >= 1) {
139         counter = snakeLength;
140         while(counter > 0) {
141             if(snakeobj[counter-1].style.left == getSnakeLeft+"px" && snakeobj[counter-1].style.top == getSnakeTop+"px") {
142                 snakeobj[0].style.backgroundColor = "blue";
143                 snakeobj[counter-1].style.backgroundColor = "blue";
144                 clearInterval(runObj);
145                 alert("Snake Clashed");
146                 break;
147             }
148             else
149             {
150                 snakeobj[counter].style.left = snakeobj[counter-1].style.left;
151                 snakeobj[counter].style.top = snakeobj[counter-1].style.top;
152                 counter = counter - 1;
153             }
154         }
155     }
156 }
157 
158 function eat() {
159     //Increase snake body after ate apple.
160     snakeLength = snakeLength + 1;
161     newobj = document.createElement("div");
162     newobj.innerHTML = snakeLength;
163     newobj.classList.add("snake");
164     boardobj.appendChild(newobj);
165     
166     newobj.style.top = snakeobj[snakeLength-1].style.top;
167     newobj.style.left = snakeobj[snakeLength-1].style.left;
168     
169     follow();
170     
171     snakeobj[0].style.top = appleTop+"px";
172     snakeobj[0].style.left = appleLeft+"px";
173     
174     //Set new place for apple
175     appleTop = Math.floor((Math.random() * (boardTop - portionSize)) + 1);
176     appleTop = appleTop%portionSize;
177     if(appleTop >= 1) {
178     appleTop = portionSize*appleTop;
179     }
180     appleLeft = Math.floor((Math.random() * (boardLeft - portionSize)) + 1);
181     appleLeft = appleLeft%portionSize;
182     if(appleLeft >= 1) {
183     appleLeft = portionSize*appleLeft;
184     }
185     appleobj.style.top = appleTop+"px";
186     appleobj.style.left = appleLeft+"px";
187 }
188 
189 //Start Point
190 starter();
191 var runObj = setInterval(run,100);
192 </script>

No comments:

Post a Comment