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>