Home Tools

Cats and Mouse Game with Javascript

Create a javascript game to chase the Jerry mouse by two cats (Tom & Bob).Once mouse catched then again cats and mouse position will be reset for next run.
cat.html
1<!DOCTYPE html>
2<html>
3	<head> 
4		<meta charset = "utf-8"/> 
5		<title>Cat Games</title>
6		<style>
7		#board {
8		width: 400px;
9		height: 400px;
10		position: relative;
11		background: black;
12		margin-bottom:20px;
13		}
14
15		#bobCat {
16		width: 20px;
17		height: 20px;
18		position: absolute;
19		background-color: brown;
20		text-align: center;
21		}
22		
23		#tomCat {
24		width: 20px;
25		height: 20px;
26		position: absolute;
27		background-color: blue;
28		text-align: center;
29		}
30
31		#jerryMouse {
32		width: 20px;
33		height: 20px;
34		position: absolute;
35		background-color: yellow;
36		text-align: center;
37		}
38		
39		#bobscore {
40		font-weight:bold;
41		}
42
43		#tomscore {
44		font-weight:bold;
45		}
46		</style>
47	</head>
48	<body>	
49		<div id="board">
50			<div id="jerryMouse"></div>
51			<div id="tomCat"></div>
52			<div id="bobCat"></div>
53		</div>
54		<div>Bob Score :<span id="bobscore">0</span></div>
55		<div>Tom Score :<span id="tomscore">0</span></div>
56		<div>
57		<p>Created by <a href = "https://www.algoberry.com" target="_blank">Algoberry</a></p> 
58		</div>
59	</body>
60</html>
61<script>
62
63//Object Declaration
64var boardobj;
65var jerryMouseobj;
66var bobCatobj;
67var tomCatobj;
68
69//Variable Declaration
70var portionSize = 20;	//Same portion size should be set to bobCat (width, height) & jerryMouse (width, height) 
71
72var boardTop = 400;		//Board top position
73var boardLeft = 400;	//Board left position
74
75var jerryMouseTop = 0;		//Default jerryMouse top position
76var jerryMouseLeft = 0;		//Default jerryMouse left position
77
78var bobCatTop = 0;
79var bobCatLeft = 0;
80
81var tomCatTop = 0;
82var tomCatLeft = 0;
83
84var bobscore = 0;
85var tomscore = 0;
86
87//Start Point
88starter();
89var runObj = setInterval(run,100);
90
91function starter() {
92	boardobj = document.getElementById("board");
93	
94	jerryMouseobj = document.getElementById("jerryMouse");
95	jerryMouseTop = getTop();
96	jerryMouseLeft = getLeft();
97	jerryMouseobj.style.top = jerryMouseTop+"px";
98	jerryMouseobj.style.left = jerryMouseLeft+"px";
99	jerryMouseobj.innerHTML = "J";
100	
101	bobCatobj = document.getElementById("bobCat");
102	bobCatTop = getTop();
103	bobCatLeft = getLeft();
104	bobCatobj.style.top = bobCatTop+"px";
105	bobCatobj.style.left = bobCatLeft+"px";
106	bobCatobj.innerHTML = "B";
107	
108	tomCatobj = document.getElementById("tomCat");
109	tomCatTop = getTop();
110	tomCatLeft = getLeft();
111	tomCatobj.style.top = tomCatTop+"px";
112	tomCatobj.style.left = tomCatLeft+"px";
113	tomCatobj.innerHTML = "T";
114}
115
116function run() {
117	//Get current bobCat position
118	bobCatTop = bobCatobj.style.top;
119	bobCatTop = bobCatTop.replace("px","");
120	bobCatTop = parseInt(bobCatTop);
121	
122	bobCatLeft = bobCatobj.style.left;
123	bobCatLeft = bobCatLeft.replace("px","");
124	bobCatLeft = parseInt(bobCatLeft);
125	
126	//Get current tomCat position
127	tomCatTop = tomCatobj.style.top;
128	tomCatTop = tomCatTop.replace("px","");
129	tomCatTop = parseInt(tomCatTop);
130
131	tomCatLeft = tomCatobj.style.left;
132	tomCatLeft = tomCatLeft.replace("px","");
133	tomCatLeft = parseInt(tomCatLeft);
134
135	
136	if(bobCatTop == jerryMouseTop || bobCatLeft < jerryMouseLeft || bobCatLeft > jerryMouseLeft) { //bobCat and jerryMouse are present in same column
137		//---
138		if(bobCatLeft < jerryMouseLeft) {
139			bobCatLeft = bobCatLeft + portionSize;
140		}
141		else
142		{
143			bobCatLeft = bobCatLeft - portionSize;
144		}
145		if(bobCatLeft < 0) {	
146			bobCatLeft = boardLeft-portionSize; 
147		}
148		else if(bobCatLeft == boardLeft) {
149			bobCatLeft = 0;
150		}
151	
152		bobCatobj.style.left = bobCatLeft+"px";
153		if(bobCatTop == jerryMouseTop && bobCatLeft == jerryMouseLeft) {
154			eat();
155		}
156		//---
157	}
158	else if(bobCatLeft == jerryMouseLeft || bobCatTop < jerryMouseTop || bobCatTop > jerryMouseTop) { //bobCat and jerryMouse are present in same row
159		//---
160		if(bobCatTop < jerryMouseTop) {
161			bobCatTop = bobCatTop + portionSize;
162		}
163		else
164		{
165			bobCatTop = bobCatTop - portionSize;
166		}
167		if(bobCatTop < 0) {	
168			bobCatTop = boardTop-portionSize; 
169		}
170		else if(bobCatTop == boardTop) {	
171			bobCatTop = 0; 
172		}
173		
174		bobCatobj.style.top = bobCatTop+"px";
175		if(bobCatTop == jerryMouseTop && bobCatLeft == jerryMouseLeft) {
176			eat();
177		}
178		//---
179	}
180	
181	if(tomCatTop == jerryMouseTop || tomCatLeft < jerryMouseLeft || tomCatLeft > jerryMouseLeft) { //tomCat and jerryMouse are present in same column
182		//---
183		if(tomCatLeft < jerryMouseLeft) {
184			tomCatLeft = tomCatLeft + portionSize;
185		}
186		else
187		{
188			tomCatLeft = tomCatLeft - portionSize;
189		}
190		if(tomCatLeft < 0) {	
191			tomCatLeft = boardLeft-portionSize; 
192		}
193		else if(tomCatLeft == boardLeft) {
194			tomCatLeft = 0;
195		}
196
197		tomCatobj.style.left = tomCatLeft+"px";
198		if(tomCatTop == jerryMouseTop && tomCatLeft == jerryMouseLeft) {
199			eat();
200		}
201		//---
202	}
203	else if(tomCatLeft == jerryMouseLeft || tomCatTop < jerryMouseTop || tomCatTop > jerryMouseTop) { //tomCat and jerryMouse are present in same row
204		//---
205		if(tomCatTop < jerryMouseTop) {
206			tomCatTop = tomCatTop + portionSize;
207		}
208		else
209		{
210			tomCatTop = tomCatTop - portionSize;
211		}
212		if(tomCatTop < 0) {	
213			tomCatTop = boardTop-portionSize; 
214		}
215		else if(tomCatTop == boardTop) {	
216			tomCatTop = 0; 
217		}
218		
219		tomCatobj.style.top = tomCatTop+"px";
220		if(tomCatTop == jerryMouseTop && tomCatLeft == jerryMouseLeft) {
221			eat();
222		}
223		//---
224	}
225}
226
227function eat() {
228	if(jerryMouseobj.style.left == bobCatobj.style.left && jerryMouseobj.style.top == bobCatobj.style.top) {
229		bobscore = bobscore + 1;
230		document.getElementById("bobscore").innerHTML = bobscore;
231		//alert("Bob Win");
232	}
233	else if(jerryMouseobj.style.left == tomCatobj.style.left && jerryMouseobj.style.top == tomCatobj.style.top) {
234		tomscore = tomscore + 1;
235		document.getElementById("tomscore").innerHTML = tomscore;
236		//alert("Tom Win");
237	}
238	
239	//Set new place for jerryMouse, bob cat & tom cat
240	jerryMouseTop = getTop();
241	jerryMouseLeft = getLeft();
242	jerryMouseobj.style.top = jerryMouseTop+"px";
243	jerryMouseobj.style.left = jerryMouseLeft+"px";
244
245	bobCatTop = getTop();
246	bobCatLeft = getLeft();
247	bobCatobj.style.top = bobCatTop+"px";
248	bobCatobj.style.left = bobCatLeft+"px";
249	
250	tomCatTop = getTop();
251	tomCatLeft = getLeft();
252	tomCatobj.style.top = tomCatTop+"px";
253	tomCatobj.style.left = tomCatLeft+"px";
254}
255
256function getTop() {
257	var pos = Math.floor(Math.random * boardTop - portionSize + 1);
258	pos = pos%portionSize;
259	if(pos >= 1) {
260	pos = portionSize*pos;
261	}
262	return pos;
263}
264
265function getLeft() {
266	var pos = Math.floor(Math.random * boardLeft - portionSize + 1);
267	pos = pos%portionSize;
268	if(pos >= 1) {
269	pos = portionSize*pos;
270	}
271	return pos;
272}
273</script>