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
64 var boardobj;
65 var jerryMouseobj;
66 var bobCatobj;
67 var tomCatobj;
68 
69 //Variable Declaration
70 var portionSize = 20;	//Same portion size should be set to bobCat (width, height) & jerryMouse (width, height) 
71 
72 var boardTop = 400;		//Board top position
73 var boardLeft = 400;	//Board left position
74 
75 var jerryMouseTop = 0;		//Default jerryMouse top position
76 var jerryMouseLeft = 0;		//Default jerryMouse left position
77 
78 var bobCatTop = 0;
79 var bobCatLeft = 0;
80 
81 var tomCatTop = 0;
82 var tomCatLeft = 0;
83 
84 var bobscore = 0;
85 var tomscore = 0;
86 
87 //Start Point
88 starter();
89 var runObj = setInterval(run,100);
90 
91 function 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 
116 function 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 
227 function 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 
256 function 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 
265 function 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>