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>

No comments:

Post a Comment