Home Tools

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>