Code the Snake Game using HTML and Javascript
Hi friends I am very happy to share the snake game script using javascript. It is really cool and joy, actually the movement of snake is based on CSS px value only. Once you understand this script then can built various board kind games.snake.html
1 <html>
2 <head>
3 <meta charset = "utf-8"/>
4 <title>Snake Games</title>
5 <style>
6 body {
7 margin:0px;
8 padding:0px;
9 }
10
11 #board {
12 width: 50%;
13 height: 50%;
14 position: relative;
15 background: #222831;
16 margin:5px;
17 padding:0px;
18 }
19
20 .snake {
21 width: 20px;
22 height: 20px;
23 position: absolute;
24 background-color: #ccedd2;
25 border: 2px solid #94d3ac;
26 text-align: center;
27 }
28
29 #apple {
30 width: 20px;
31 height: 20px;
32 position: absolute;
33 background-color: #a6acec;
34 border: 2px solid #a56cc1;
35 }
36
37 .clash {
38 background-color: #f1fea4;
39 }
40 </style>
41 </head>
42 <body>
43 <center>
44 <div id="board">
45 <div id="apple"></div>
46 <div class="snake"></div>
47 </div>
48 </center>
49 </body>
50 </html>
51 <script>
52 var boardobj;
53 var appleobj;
54 var snakeobj;
55 var runobj;
56 var newobj;
57
58 var snakeLength = 0;
59 var blockSize = 20;
60 var nextMoveAllow = 1;
61
62 var temp = 0;
63 var tempSnakeLeft;
64 var tempSnakeTop;
65 var secondTemp = 0;
66
67 var boardTop;
68 var boardLeft;
69 var appleTop;
70 var appleLeft;
71 var snakeTop;
72 var snakeLeft;
73
74 function start() {
75 boardobj = document.getElementById("board");
76 appleobj = document.getElementById("apple");
77 snakeobj = document.getElementById("board").getElementsByClassName("snake");
78
79
80 boardLeft = boardobj.offsetWidth;
81 temp = boardLeft%blockSize;
82 if(temp != 0) {
83 boardLeft = boardLeft - temp;
84 }
85 boardTop = boardobj.offsetHeight;
86 temp = boardTop%blockSize;
87 if(temp != 0) {
88 boardTop = boardTop - temp;
89 }
90 boardobj.style.width = boardLeft;
91 boardobj.style.height = boardTop;
92
93 snakeobj[0].style.top = "0px";
94 snakeobj[0].innerHTML = snakeLength;
95 snakeobj[0].style.left = "0px";
96 applelocation();
97 }
98
99 function run() {
100 snakeTop = snakeobj[0].style.top;
101 snakeTop = snakeTop.replace("px","");
102 snakeTop = parseInt(snakeTop);
103
104 snakeLeft = snakeobj[0].style.left;
105 snakeLeft = snakeLeft.replace("px","");
106 snakeLeft = parseInt(snakeLeft);
107
108 if(snakeTop == appleTop || snakeLeft < appleLeft || snakeLeft > appleLeft) {
109 if(snakeLeft < appleLeft)
110 { snakeLeft = snakeLeft + blockSize; }
111 else
112 { snakeLeft = snakeLeft - blockSize; }
113
114 if(snakeLeft < 0)
115 { snakeLeft = boardLeft-blockSize; }
116 else if(snakeLeft == boardLeft)
117 { snakeLeft = 0; }
118
119 if(snakeTop == appleTop && snakeLeft == appleLeft)
120 { eat(); }
121 else
122 { follow(); }
123 }
124 else if(snakeLeft == appleLeft || snakeTop < appleTop || snakeTop > appleTop) {
125 if(snakeTop < appleTop)
126 { snakeTop = snakeTop + blockSize; }
127 else
128 { snakeTop = snakeTop - blockSize; }
129
130 if(snakeTop < 0)
131 { snakeTop = boardTop-blockSize; }
132 else if(snakeTop == boardTop)
133 { snakeTop = 0; }
134
135 if(snakeTop == appleTop && snakeLeft == appleLeft)
136 { eat(); }
137 else
138 { follow(); }
139 }
140 }
141
142 function eat() {
143 snakeLength = snakeLength + 1;
144 newobj = document.createElement("div");
145 newobj.innerHTML = snakeLength;
146 newobj.classList.add("snake");
147 boardobj.appendChild(newobj);
148
149 newobj.style.top = snakeobj[snakeLength-1].style.top;
150 newobj.style.left = snakeobj[snakeLength-1].style.left;
151
152 follow();
153 applelocation();
154 }
155
156 function applelocation() {
157 temp = 1;
158 while(temp <= 1000) {
159 appleTop = Math.floor(Math.random * boardTop - blockSize + 1);
160 temp = appleTop%blockSize;
161 if(temp != 0) {
162 appleTop = appleTop - temp;
163 }
164
165 appleLeft = Math.floor(Math.random * boardLeft - blockSize + 1);
166 temp = appleLeft%blockSize;
167 if(temp != 0) {
168 appleLeft = appleLeft - temp;
169 }
170 temp++;
171
172 secondTemp = snakeLength;
173 while(secondTemp > 0) {
174 if(snakeobj[secondTemp-1].style.left == appleLeft+"px" && snakeobj[secondTemp-1].style.top == appleTop+"px") {
175 break;
176 }
177 secondTemp--;
178 }
179
180 if(secondTemp == 0) {
181 appleobj.style.top = appleTop+"px";
182 appleobj.style.left = appleLeft+"px";
183 break;
184 }
185 }
186
187 if(secondTemp != 0) {
188 clearInterval(runobj);
189 alert("No Space found for Apple !");
190 }
191 }
192
193
194 function follow() {
195 if(snakeLength >= 1) {
196 nextMoveAllow = 1;
197 temp = snakeLength;
198 while(temp > 0) {
199 if(snakeobj[temp-1].style.left == snakeLeft+"px" && snakeobj[temp-1].style.top == snakeTop+"px") {
200 checkothermove();
201 break;
202 }
203 temp--;
204 }
205
206 if(nextMoveAllow == 1) {
207 temp = snakeLength;
208 while(temp > 0) {
209 snakeobj[temp].style.left = snakeobj[temp-1].style.left;
210 snakeobj[temp].style.top = snakeobj[temp-1].style.top;
211 temp--;
212 }
213 }
214 else
215 {
216 snakeobj[0].classList.add("clash");
217 snakeobj[temp-1].classList.add("clash");
218 clearInterval(runobj);
219 alert("Snake Crashed");
220 }
221 }
222 snakeobj[0].style.left = snakeLeft+"px";
223 snakeobj[0].style.top = snakeTop+"px";
224 }
225
226 function checkothermove() {
227
228 secondTemp = 1;
229 snakeTop = snakeobj[0].style.top;
230 snakeTop = snakeTop.replace("px","");
231 snakeTop = parseInt(snakeTop);
232
233 snakeLeft = snakeobj[0].style.left;
234 snakeLeft = snakeLeft.replace("px","");
235 snakeLeft = parseInt(snakeLeft);
236
237 while(secondTemp <= 4) {
238 nextMoveAllow = 1;
239 tempSnakeLeft = snakeLeft;
240 tempSnakeTop = snakeTop;
241
242 if(secondTemp == 1)
243 { tempSnakeTop = tempSnakeTop + blockSize }
244 else if(secondTemp == 2)
245 { tempSnakeTop = tempSnakeTop - blockSize }
246 else if(secondTemp == 3)
247 { tempSnakeLeft = tempSnakeLeft + blockSize }
248 else if(secondTemp == 4)
249 { tempSnakeLeft = tempSnakeLeft - blockSize }
250
251 if(0 <= tempSnakeLeft && tempSnakeLeft < boardLeft && 0 <= tempSnakeTop && tempSnakeTop < boardTop) {
252 temp = snakeLength;
253 while(temp > 0) {
254 if(snakeobj[temp-1].style.left == tempSnakeLeft+"px" && snakeobj[temp-1].style.top == tempSnakeTop+"px") {
255 nextMoveAllow = 0;
256 break;
257 }
258 temp--;
259 }
260 if(nextMoveAllow == 1) {
261 snakeLeft = tempSnakeLeft;
262 snakeTop = tempSnakeTop;
263 break;
264 }
265 }
266 else
267 {
268 nextMoveAllow = 0;
269 }
270 secondTemp++;
271 }
272 }
273
274 start();
275 var runobj = setInterval(run,100);
276 </script>