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>