From Scratch to Fun: How to Build a Mouse and Cat Game in JavaScript
Creating a simple "Mouse and Cat" game in JavaScript can be a fun way to practice game development and learn about basic animations, below is an example of how you can make a simple mouse-and-cat chase game using JavaScript and HTML's element.You can get the complete code from Github
In this game:
The cat's moves automatically towards the mouse.
If the cat reaches the mouse, again new mouse will apear in different location and catch count is displayed.
cat.html
1 <html>
2 <head>
3 <title>Cat Games</title>
4 <style>
5 body {
6 margin:0px;
7 padding:0px;
8 }
9
10 #board {
11 width:50%;
12 height:70%;
13 margin: 10px;
14 margin-left:auto;
15 margin-right:auto;
16 position:relative;
17 background:#222831;
18 border:2px solid #E5D9B6;
19 }
20
21 #mouse {
22 position:absolute;
23 background-color:#D988B9;
24 border:2px solid #FACBEA;
25 box-sizing:border-box;
26 text-align:center;
27 }
28
29 #tomcat {
30 position:absolute;
31 background-color:#618264;
32 border:2px solid #79AC78;
33 box-sizing:border-box;
34 text-align:center;
35 }
36
37 #bobcat {
38 position:absolute;
39 background-color:#8EACCD;
40 border:2px solid #D2E0FB;
41 box-sizing:border-box;
42 text-align:center;
43 }
44 </style>
45 </head>
46 <body>
47 <div id="board">
48 <div id="mouse">J</div>
49 <div id="tomcat">T</div>
50 <div id="bobcat">B</div>
51 <div style="color: white;margin: 5px;">
52 <div>Bob Cat Score :<span id="bobcatscore">0</span></div>
53 <div>Tom Cat Score :<span id="tomcatscore">0</span></div>
54 </div>
55 </div>
56 </body>
57 <script>
58 var boardObj;
59 var mouseObj;
60 var tomCatObj;
61 var bobCatObj;
62
63 var boardLeft;
64 var boardTop;
65 var mouseLeft;
66 var mouseTop;
67 var catLeft;
68 var catTop;
69
70 var catList = [];
71 var catCount = 0;
72
73 var bobcatscore = 0;
74 var tomcatscore = 0;
75
76 var validation;
77 var leftPosition = 0;
78 var topPosition = 0;
79
80 var temp;
81 var count;
82 var blockSize = 30;
83
84 function load() {
85 boardObj = document.getElementById("board");
86 mouseObj = document.getElementById("mouse");
87 tomCatObj = document.getElementById("tomcat");
88 catList.push(tomCatObj);
89 bobCatObj = document.getElementById("bobcat");
90 catList.push(bobCatObj);
91
92 catCount = catList.length;
93
94 boardLeft = boardObj.offsetWidth;
95 temp = boardLeft%blockSize;
96 if(temp != 0) {
97 boardLeft = boardLeft - temp;
98 }
99
100 boardTop = boardObj.offsetHeight;
101 temp = boardTop%blockSize;
102 if(temp != 0) {
103 boardTop = boardTop - temp;
104 }
105
106 boardObj.style.width = boardLeft+"px";
107 boardObj.style.height = boardTop+"px";
108
109 mouseObj.style.width = blockSize+"px";
110 mouseObj.style.height = blockSize+"px";
111
112 for(count = 0;count < catCount;count++) {
113 catList[count].style.width = blockSize+"px";
114 catList[count].style.height = blockSize+"px";
115 position();
116 catList[count].style.left = leftPosition+"px";
117 catList[count].style.top = topPosition+"px";
118 }
119
120 mouse();
121 }
122
123 function position() {
124 while(1) {
125 validation = true;
126 leftPosition = Math.floor(Math.random * boardLeft - 1);
127 temp = leftPosition%blockSize;
128 if(temp != 0) {
129 leftPosition = leftPosition - temp;
130 }
131
132 topPosition = Math.floor(Math.random * boardTop - 1);
133 temp = topPosition%blockSize;
134 if(temp != 0) {
135 topPosition = topPosition - temp;
136 }
137
138 if(mouseObj.style.left == leftPosition+"px" && mouseObj.style.top == topPosition+"px") {
139 validation = false;
140 }
141
142 for(temp = 0;temp < catCount;temp++) {
143 if(catList[temp].style.left == leftPosition+"px" && catList[temp].style.top == topPosition+"px") {
144 validation = false;
145 }
146 }
147
148 if(validation == true) {
149 break;
150 }
151 }
152 }
153
154 function mouse() {
155 position();
156 mouseLeft = leftPosition;
157 mouseTop = topPosition;
158 mouseObj.style.left = mouseLeft+"px";
159 mouseObj.style.top = mouseTop+"px";
160
161 var temp;
162 for(temp = 0;temp < catCount;temp++) {
163 position();
164 catList[temp].style.left = leftPosition+"px";
165 catList[temp].style.top = topPosition+"px";
166 }
167 }
168
169 function eat() {
170 catList[count].style.left = mouseLeft+"px";
171 catList[count].style.top = mouseTop+"px";
172 if(tomCatObj == catList[count]) {
173 tomcatscore++;
174 document.getElementById("tomcatscore").innerHTML = tomcatscore;
175 if(count == 0) {
176 catList[0] = bobCatObj;
177 catList[1] = tomCatObj;
178 }
179 }
180 else if(bobCatObj == catList[count]) {
181 bobcatscore++;
182 document.getElementById("bobcatscore").innerHTML = bobcatscore;
183 if(count == 0) {
184 catList[0] = tomCatObj;
185 catList[1] = bobCatObj;
186 }
187 }
188 mouse();
189 }
190
191 function follow() {
192 catList[count].style.left = catLeft+"px";
193 catList[count].style.top = catTop+"px";
194 }
195
196 function run() {
197 for(count = 0;count < catCount;count++) {
198 catTop = catList[count].style.top;
199 catTop = catTop.replace("px","");
200 catTop = parseInt(catTop);
201
202 catLeft = catList[count].style.left;
203 catLeft = catLeft.replace("px","");
204 catLeft = parseInt(catLeft);
205
206 if(catTop == mouseTop || catLeft < mouseLeft || catLeft > mouseLeft) {
207 if(catLeft < mouseLeft) {
208 catLeft = catLeft + blockSize;
209 }
210 else
211 {
212 catLeft = catLeft - blockSize;
213 }
214
215 if(catTop == mouseTop && catLeft == mouseLeft) {
216 eat();
217 break;
218 }
219 else
220 {
221 follow();
222 }
223 }
224 else if(catLeft == mouseLeft || catTop < mouseTop || catTop > mouseTop) {
225 if(catTop < mouseTop) {
226 catTop = catTop + blockSize;
227 }
228 else
229 {
230 catTop = catTop - blockSize;
231 }
232
233 if(catTop == mouseTop && catLeft == mouseLeft) {
234 eat();
235 break;
236 }
237 else
238 {
239 follow();
240 }
241 }
242 }
243 }
244
245 load();
246 var runObj = setInterval(run,100);
247 </script>
248 </html>