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<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>
52var boardobj;
53var appleobj;
54var snakeobj;
55var runobj;
56var newobj;
57
58var snakeLength = 0;
59var blockSize = 20;
60var nextMoveAllow = 1;
61
62var temp = 0;
63var tempSnakeLeft;
64var tempSnakeTop;
65var secondTemp = 0;
66
67var boardTop;
68var boardLeft;
69var appleTop;
70var appleLeft;
71var snakeTop;
72var snakeLeft;
73
74function 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
99function 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
142function 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
156function 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
194function 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 Clashed");
220 }
221 }
222 snakeobj[0].style.left = snakeLeft+"px";
223 snakeobj[0].style.top = snakeTop+"px";
224}
225
226function 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
274start();
275var runobj = setInterval(run,100);
276</script>