Hugging Face's logo

Spaces:
velja3
/
cat
Running

App Files Community
velja3 commited on
Commit
167b0c0
·
verified ·
1 Parent(s): 84e90ff

can u add a button for sleep and lights goes off - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1281 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cat
3
- emoji: 📉
4
- colorFrom: purple
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: cat
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1281 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Virtual Cat Companion</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes bounce {
11
+ 0%, 100% { transform: translateY(0); }
12
+ 50% { transform: translateY(-20px); }
13
+ }
14
+ @keyframes shake {
15
+ 0% { transform: rotate(-5deg); }
16
+ 50% { transform: rotate(5deg); }
17
+ 100% { transform: rotate(-5deg); }
18
+ }
19
+ @keyframes eat {
20
+ 0% { transform: scale(1); }
21
+ 50% { transform: scale(1.05) rotate(2deg); }
22
+ 100% { transform: scale(1); }
23
+ }
24
+ @keyframes walk {
25
+ 0% { transform: translateX(0); }
26
+ 50% { transform: translateX(10px); }
27
+ 100% { transform: translateX(0); }
28
+ }
29
+ @keyframes bubble {
30
+ 0% { transform: scale(0); opacity: 0; }
31
+ 50% { transform: scale(1.1); opacity: 1; }
32
+ 100% { transform: scale(1); opacity: 1; }
33
+ }
34
+ .bounce { animation: bounce 1s infinite; }
35
+ .shake { animation: shake 0.5s infinite; }
36
+ .eat { animation: eat 0.5s infinite; }
37
+ .walk { animation: walk 1s infinite; }
38
+ .bubble { animation: bubble 0.5s forwards; }
39
+ .cat-status-bar {
40
+ transition: width 0.5s ease;
41
+ }
42
+ .game-container {
43
+ background: linear-gradient(to bottom, #f0f9ff 0%, #cbebff 100%);
44
+ }
45
+ .cat-bath {
46
+ background: linear-gradient(to bottom, #e0f7ff 0%, #b3e0ff 100%);
47
+ }
48
+ .cat-park {
49
+ background: linear-gradient(to bottom, #e8f5e9 0%, #c8e6c9 100%);
50
+ }
51
+ .cat-room {
52
+ background: linear-gradient(to bottom, #fff3e0 0%, #ffe0b2 100%);
53
+ }
54
+ .hidden {
55
+ display: none !important;
56
+ }
57
+ .tooltip {
58
+ position: relative;
59
+ }
60
+ .tooltip:hover::after {
61
+ content: attr(data-tooltip);
62
+ position: absolute;
63
+ bottom: 100%;
64
+ left: 50%;
65
+ transform: translateX(-50%);
66
+ background: #333;
67
+ color: white;
68
+ padding: 4px 8px;
69
+ border-radius: 4px;
70
+ font-size: 12px;
71
+ white-space: nowrap;
72
+ z-index: 10;
73
+ }
74
+ </style>
75
+ </head>
76
+ <body class="font-sans bg-pink-50 min-h-screen">
77
+ <div class="container mx-auto px-4 py-8 max-w-4xl">
78
+ <!-- Header -->
79
+ <header class="text-center mb-8">
80
+ <h1 class="text-4xl font-bold text-pink-600 mb-2">Virtual Cat Companion</h1>
81
+ <p class="text-gray-600">A cute friend to make you feel better ❤️</p>
82
+ </header>
83
+
84
+ <!-- Name Input Screen -->
85
+ <div id="name-screen" class="bg-white rounded-xl shadow-lg p-8 text-center mb-8">
86
+ <h2 class="text-2xl font-semibold text-pink-500 mb-4">What would you like to name your cat?</h2>
87
+ <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
88
+ <input type="text" id="cat-name-input" placeholder="Enter cat name" class="px-4 py-2 border border-pink-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-400 w-full sm:w-64">
89
+ <button id="name-submit" class="bg-pink-500 hover:bg-pink-600 text-white px-6 py-2 rounded-lg transition duration-200">Create Cat</button>
90
+ </div>
91
+ <div class="mt-6">
92
+ <p class="text-gray-500 mb-2">Choose a color for your cat:</p>
93
+ <div class="flex justify-center gap-3">
94
+ <div class="w-10 h-10 rounded-full bg-orange-300 border-2 border-orange-400 cursor-pointer cat-color" data-color="orange"></div>
95
+ <div class="w-10 h-10 rounded-full bg-gray-300 border-2 border-gray-400 cursor-pointer cat-color" data-color="gray"></div>
96
+ <div class="w-10 h-10 rounded-full bg-white border-2 border-gray-200 cursor-pointer cat-color" data-color="white"></div>
97
+ <div class="w-10 h-10 rounded-full bg-black border-2 border-gray-800 cursor-pointer cat-color" data-color="black"></div>
98
+ <div class="w-10 h-10 rounded-full bg-yellow-100 border-2 border-yellow-200 cursor-pointer cat-color" data-color="cream"></div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+
103
+ <!-- Main Game Screen -->
104
+ <div id="game-screen" class="hidden">
105
+ <!-- Cat Info Bar -->
106
+ <div class="bg-white rounded-xl shadow-md p-4 mb-6 flex flex-col sm:flex-row justify-between items-center">
107
+ <div class="flex items-center mb-3 sm:mb-0">
108
+ <h2 id="cat-name-display" class="text-2xl font-bold text-pink-600 mr-4"></h2>
109
+ <div class="flex items-center">
110
+ <span class="text-yellow-500 mr-1"><i class="fas fa-star"></i></span>
111
+ <span id="happiness-level" class="font-medium">100</span>
112
+ </div>
113
+ </div>
114
+ <div class="flex space-x-4">
115
+ <button id="settings-btn" class="text-gray-500 hover:text-pink-500 transition">
116
+ <i class="fas fa-cog text-xl"></i>
117
+ </button>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Game Area -->
122
+ <div id="game-area" class="game-container rounded-xl shadow-lg overflow-hidden relative h-96 mb-6">
123
+ <!-- Default Room -->
124
+ <div id="cat-room" class="cat-room h-full w-full flex flex-col items-center justify-center p-4">
125
+ <div id="cat-container" class="relative">
126
+ <div id="cat" class="relative">
127
+ <!-- Cat will be dynamically generated here -->
128
+ </div>
129
+ <div id="speech-bubble" class="absolute -top-20 left-1/2 transform -translate-x-1/2 bg-white rounded-lg p-3 shadow-md hidden bubble">
130
+ <p id="cat-speech" class="text-sm"></p>
131
+ </div>
132
+ </div>
133
+ <div id="room-items" class="flex mt-8 gap-4">
134
+ <div class="bg-pink-100 rounded-lg p-3 cursor-pointer hover:bg-pink-200 transition tooltip" data-tooltip="Food Bowl" id="food-btn">
135
+ <i class="fas fa-utensils text-2xl text-pink-600"></i>
136
+ </div>
137
+ <div class="bg-blue-100 rounded-lg p-3 cursor-pointer hover:bg-blue-200 transition tooltip" data-tooltip="Bath Time" id="bath-btn">
138
+ <i class="fas fa-shower text-2xl text-blue-600"></i>
139
+ </div>
140
+ <div class="bg-green-100 rounded-lg p-3 cursor-pointer hover:bg-green-200 transition tooltip" data-tooltip="Go Outside" id="walk-btn">
141
+ <i class="fas fa-tree text-2xl text-green-600"></i>
142
+ </div>
143
+ <div class="bg-yellow-100 rounded-lg p-3 cursor-pointer hover:bg-yellow-200 transition tooltip" data-tooltip="Play Games" id="play-btn">
144
+ <i class="fas fa-gamepad text-2xl text-yellow-600"></i>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Bath Room -->
150
+ <div id="cat-bath" class="cat-bath h-full w-full hidden flex flex-col items-center justify-center p-4">
151
+ <div id="bath-cat" class="relative">
152
+ <!-- Cat with bath effects -->
153
+ </div>
154
+ <div class="flex gap-4 mt-8">
155
+ <button id="use-soap" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition">
156
+ <i class="fas fa-soap mr-2"></i> Use Soap
157
+ </button>
158
+ <button id="rinse" class="bg-blue-400 hover:bg-blue-500 text-white px-4 py-2 rounded-lg transition">
159
+ <i class="fas fa-shower mr-2"></i> Rinse
160
+ </button>
161
+ <button id="dry" class="bg-yellow-400 hover:bg-yellow-500 text-white px-4 py-2 rounded-lg transition">
162
+ <i class="fas fa-wind mr-2"></i> Dry
163
+ </button>
164
+ <button id="exit-bath" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition">
165
+ <i class="fas fa-door-open mr-2"></i> Exit
166
+ </button>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Park Scene -->
171
+ <div id="cat-park" class="cat-park h-full w-full hidden flex flex-col items-center justify-center p-4">
172
+ <div id="walking-cat" class="relative">
173
+ <!-- Cat with walking animation -->
174
+ </div>
175
+ <div class="flex gap-4 mt-8">
176
+ <button id="play-fetch" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg transition">
177
+ <i class="fas fa-dog mr-2"></i> Play Fetch
178
+ </button>
179
+ <button id="chase-butterflies" class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg transition">
180
+ <i class="fas fa-butterfly mr-2"></i> Chase Butterflies
181
+ </button>
182
+ <button id="exit-park" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition">
183
+ <i class="fas fa-door-open mr-2"></i> Go Home
184
+ </button>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Mini Games -->
189
+ <div id="mini-games" class="bg-indigo-50 h-full w-full hidden flex flex-col items-center justify-center p-4">
190
+ <h3 class="text-2xl font-semibold text-indigo-600 mb-6">Choose a Game to Play</h3>
191
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full max-w-md">
192
+ <button id="memory-game-btn" class="bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-4 rounded-lg transition flex flex-col items-center">
193
+ <i class="fas fa-brain text-3xl mb-2"></i>
194
+ <span>Memory Game</span>
195
+ </button>
196
+ <button id="whack-a-mouse-btn" class="bg-red-500 hover:bg-red-600 text-white px-6 py-4 rounded-lg transition flex flex-col items-center">
197
+ <i class="fas fa-chess-pawn text-3xl mb-2"></i>
198
+ <span>Whack-a-Mouse</span>
199
+ </button>
200
+ <button id="laser-pointer-btn" class="bg-yellow-500 hover:bg-yellow-600 text-white px-6 py-4 rounded-lg transition flex flex-col items-center">
201
+ <i class="fas fa-lightbulb text-3xl mb-2"></i>
202
+ <span>Laser Pointer</span>
203
+ </button>
204
+ <button id="exit-games" class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-4 rounded-lg transition flex flex-col items-center">
205
+ <i class="fas fa-home text-3xl mb-2"></i>
206
+ <span>Back Home</span>
207
+ </button>
208
+ </div>
209
+ </div>
210
+
211
+ <!-- Memory Game -->
212
+ <div id="memory-game" class="h-full w-full hidden flex flex-col items-center justify-center p-4 bg-blue-50">
213
+ <h3 class="text-2xl font-semibold text-blue-600 mb-4">Memory Game</h3>
214
+ <p class="text-gray-600 mb-6">Match all the pairs of cat pictures!</p>
215
+ <div id="memory-board" class="grid grid-cols-4 gap-3 mb-6">
216
+ <!-- Cards will be generated here -->
217
+ </div>
218
+ <div class="flex items-center gap-4">
219
+ <span id="memory-score" class="font-bold text-lg">Matches: 0/6</span>
220
+ <button id="exit-memory-game" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition">
221
+ <i class="fas fa-times mr-2"></i> Exit Game
222
+ </button>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- Whack-a-Mouse Game -->
227
+ <div id="whack-a-mouse" class="h-full w-full hidden flex flex-col items-center justify-center p-4 bg-red-50">
228
+ <h3 class="text-2xl font-semibold text-red-600 mb-4">Whack-a-Mouse</h3>
229
+ <p class="text-gray-600 mb-2">Click the mice when they pop up!</p>
230
+ <p id="whack-timer" class="text-xl font-bold mb-4">Time: 30s</p>
231
+ <div id="whack-score-display" class="text-xl font-bold mb-6">Score: 0</div>
232
+ <div id="whack-game-area" class="relative w-64 h-64 bg-amber-100 rounded-full border-4 border-amber-300 mb-6">
233
+ <!-- Holes and mice will appear here -->
234
+ </div>
235
+ <button id="exit-whack-game" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition">
236
+ <i class="fas fa-times mr-2"></i> Exit Game
237
+ </button>
238
+ </div>
239
+
240
+ <!-- Laser Pointer Game -->
241
+ <div id="laser-pointer" class="h-full w-full hidden flex flex-col items-center justify-center p-4 bg-yellow-50">
242
+ <h3 class="text-2xl font-semibold text-yellow-600 mb-4">Laser Pointer</h3>
243
+ <p class="text-gray-600 mb-6">Move your mouse to make the cat chase the laser!</p>
244
+ <div id="laser-game-area" class="relative w-full h-64 bg-gray-100 rounded-lg mb-6">
245
+ <div id="laser-dot" class="w-4 h-4 bg-red-500 rounded-full absolute hidden"></div>
246
+ <div id="laser-cat" class="absolute bottom-0 left-1/2 transform -translate-x-1/2">
247
+ <!-- Cat will be here -->
248
+ </div>
249
+ </div>
250
+ <div class="flex items-center gap-4">
251
+ <span id="laser-score" class="font-bold text-lg">Points: 0</span>
252
+ <button id="exit-laser-game" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition">
253
+ <i class="fas fa-times mr-2"></i> Exit Game
254
+ </button>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- Cat Status Bars -->
260
+ <div class="bg-white rounded-xl shadow-md p-4 mb-6">
261
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
262
+ <div>
263
+ <div class="flex justify-between mb-1">
264
+ <span class="font-medium text-gray-700"><i class="fas fa-heart text-red-500 mr-2"></i> Happiness</span>
265
+ <span id="happiness-percent" class="font-medium">100%</span>
266
+ </div>
267
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
268
+ <div id="happiness-bar" class="cat-status-bar bg-pink-500 h-2.5 rounded-full" style="width: 100%"></div>
269
+ </div>
270
+ </div>
271
+ <div>
272
+ <div class="flex justify-between mb-1">
273
+ <span class="font-medium text-gray-700"><i class="fas fa-utensils text-yellow-500 mr-2"></i> Hunger</span>
274
+ <span id="hunger-percent" class="font-medium">0%</span>
275
+ </div>
276
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
277
+ <div id="hunger-bar" class="cat-status-bar bg-yellow-500 h-2.5 rounded-full" style="width: 0%"></div>
278
+ </div>
279
+ </div>
280
+ <div>
281
+ <div class="flex justify-between mb-1">
282
+ <span class="font-medium text-gray-700"><i class="fas fa-shower text-blue-500 mr-2"></i> Cleanliness</span>
283
+ <span id="clean-percent" class="font-medium">100%</span>
284
+ </div>
285
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
286
+ <div id="clean-bar" class="cat-status-bar bg-blue-500 h-2.5 rounded-full" style="width: 100%"></div>
287
+ </div>
288
+ </div>
289
+ <div>
290
+ <div class="flex justify-between mb-1">
291
+ <span class="font-medium text-gray-700"><i class="fas fa-bolt text-green-500 mr-2"></i> Energy</span>
292
+ <span id="energy-percent" class="font-medium">100%</span>
293
+ </div>
294
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
295
+ <div id="energy-bar" class="cat-status-bar bg-green-500 h-2.5 rounded-full" style="width: 100%"></div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- Food Selection -->
302
+ <div id="food-selection" class="hidden bg-white rounded-xl shadow-md p-4 mb-6">
303
+ <h3 class="text-xl font-semibold text-gray-700 mb-4">What would you like to feed your cat?</h3>
304
+ <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
305
+ <div class="food-item bg-pink-50 rounded-lg p-4 text-center cursor-pointer hover:bg-pink-100 transition" data-food="fish" data-energy="10">
306
+ <i class="fas fa-fish text-3xl text-blue-500 mb-2"></i>
307
+ <p class="font-medium">Fish</p>
308
+ </div>
309
+ <div class="food-item bg-yellow-50 rounded-lg p-4 text-center cursor-pointer hover:bg-yellow-100 transition" data-food="chicken" data-energy="15">
310
+ <i class="fas fa-drumstick-bite text-3xl text-yellow-600 mb-2"></i>
311
+ <p class="font-medium">Chicken</p>
312
+ </div>
313
+ <div class="food-item bg-green-50 rounded-lg p-4 text-center cursor-pointer hover:bg-green-100 transition" data-food="treat" data-energy="5">
314
+ <i class="fas fa-cookie text-3xl text-brown-500 mb-2"></i>
315
+ <p class="font-medium">Treat</p>
316
+ </div>
317
+ <div class="food-item bg-blue-50 rounded-lg p-4 text-center cursor-pointer hover:bg-blue-100 transition" data-food="milk" data-energy="7">
318
+ <i class="fas fa-wine-bottle text-3xl text-blue-300 mb-2"></i>
319
+ <p class="font-medium">Milk</p>
320
+ </div>
321
+ </div>
322
+ <button id="cancel-food" class="mt-4 bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition">
323
+ <i class="fas fa-times mr-2"></i> Cancel
324
+ </button>
325
+ </div>
326
+ </div>
327
+
328
+ <!-- Settings Modal -->
329
+ <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
330
+ <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
331
+ <h3 class="text-xl font-semibold mb-4">Settings</h3>
332
+ <div class="mb-4">
333
+ <label class="block text-gray-700 mb-2">Change Cat Name</label>
334
+ <div class="flex">
335
+ <input type="text" id="rename-input" class="px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-pink-400 w-full">
336
+ <button id="rename-btn" class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-r-lg transition">Change</button>
337
+ </div>
338
+ </div>
339
+ <div class="mb-6">
340
+ <label class="block text-gray-700 mb-2">Change Cat Color</label>
341
+ <div class="flex gap-3">
342
+ <div class="w-10 h-10 rounded-full bg-orange-300 border-2 border-orange-400 cursor-pointer cat-color-setting" data-color="orange"></div>
343
+ <div class="w-10 h-10 rounded-full bg-gray-300 border-2 border-gray-400 cursor-pointer cat-color-setting" data-color="gray"></div>
344
+ <div class="w-10 h-10 rounded-full bg-white border-2 border-gray-200 cursor-pointer cat-color-setting" data-color="white"></div>
345
+ <div class="w-10 h-10 rounded-full bg-black border-2 border-gray-800 cursor-pointer cat-color-setting" data-color="black"></div>
346
+ <div class="w-10 h-10 rounded-full bg-yellow-100 border-2 border-yellow-200 cursor-pointer cat-color-setting" data-color="cream"></div>
347
+ </div>
348
+ </div>
349
+ <div class="flex justify-between">
350
+ <button id="reset-game" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition">
351
+ <i class="fas fa-trash-alt mr-2"></i> Reset Game
352
+ </button>
353
+ <button id="close-settings" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition">
354
+ <i class="fas fa-times mr-2"></i> Close
355
+ </button>
356
+ </div>
357
+ </div>
358
+ </div>
359
+
360
+ <!-- Reset Confirmation Modal -->
361
+ <div id="reset-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
362
+ <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
363
+ <h3 class="text-xl font-semibold mb-4">Reset Game</h3>
364
+ <p class="text-gray-700 mb-6">Are you sure you want to reset your game? All progress will be lost.</p>
365
+ <div class="flex justify-end gap-4">
366
+ <button id="cancel-reset" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition">
367
+ Cancel
368
+ </button>
369
+ <button id="confirm-reset" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition">
370
+ Reset
371
+ </button>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+
377
+ <script>
378
+ // Game State
379
+ const gameState = {
380
+ catName: "",
381
+ catColor: "orange",
382
+ happiness: 100,
383
+ hunger: 0,
384
+ cleanliness: 100,
385
+ energy: 100,
386
+ lastFed: null,
387
+ lastPlayed: null,
388
+ lastCleaned: null,
389
+ speechTimeout: null,
390
+ needs: {
391
+ hungry: false,
392
+ dirty: false,
393
+ lonely: false,
394
+ tired: false
395
+ },
396
+ gameActive: false
397
+ };
398
+
399
+ // DOM Elements
400
+ const nameScreen = document.getElementById('name-screen');
401
+ const gameScreen = document.getElementById('game-screen');
402
+ const catNameInput = document.getElementById('cat-name-input');
403
+ const nameSubmit = document.getElementById('name-submit');
404
+ const catNameDisplay = document.getElementById('cat-name-display');
405
+ const catContainer = document.getElementById('cat');
406
+ const bathCat = document.getElementById('bath-cat');
407
+ const walkingCat = document.getElementById('walking-cat');
408
+ const laserCat = document.getElementById('laser-cat');
409
+ const speechBubble = document.getElementById('speech-bubble');
410
+ const catSpeech = document.getElementById('cat-speech');
411
+ const happinessBar = document.getElementById('happiness-bar');
412
+ const hungerBar = document.getElementById('hunger-bar');
413
+ const cleanBar = document.getElementById('clean-bar');
414
+ const energyBar = document.getElementById('energy-bar');
415
+ const happinessPercent = document.getElementById('happiness-percent');
416
+ const hungerPercent = document.getElementById('hunger-percent');
417
+ const cleanPercent = document.getElementById('clean-percent');
418
+ const energyPercent = document.getElementById('energy-percent');
419
+ const happinessLevel = document.getElementById('happiness-level');
420
+ const foodBtn = document.getElementById('food-btn');
421
+ const bathBtn = document.getElementById('bath-btn');
422
+ const walkBtn = document.getElementById('walk-btn');
423
+ const playBtn = document.getElementById('play-btn');
424
+ const catRoom = document.getElementById('cat-room');
425
+ const catBath = document.getElementById('cat-bath');
426
+ const catPark = document.getElementById('cat-park');
427
+ const miniGames = document.getElementById('mini-games');
428
+ const foodSelection = document.getElementById('food-selection');
429
+ const cancelFood = document.getElementById('cancel-food');
430
+ const useSoap = document.getElementById('use-soap');
431
+ const rinse = document.getElementById('rinse');
432
+ const dry = document.getElementById('dry');
433
+ const exitBath = document.getElementById('exit-bath');
434
+ const playFetch = document.getElementById('play-fetch');
435
+ const chaseButterflies = document.getElementById('chase-butterflies');
436
+ const exitPark = document.getElementById('exit-park');
437
+ const exitGames = document.getElementById('exit-games');
438
+ const memoryGameBtn = document.getElementById('memory-game-btn');
439
+ const whackAMouseBtn = document.getElementById('whack-a-mouse-btn');
440
+ const laserPointerBtn = document.getElementById('laser-pointer-btn');
441
+ const memoryGame = document.getElementById('memory-game');
442
+ const whackAMouse = document.getElementById('whack-a-mouse');
443
+ const laserPointer = document.getElementById('laser-pointer');
444
+ const memoryBoard = document.getElementById('memory-board');
445
+ const memoryScore = document.getElementById('memory-score');
446
+ const exitMemoryGame = document.getElementById('exit-memory-game');
447
+ const whackGameArea = document.getElementById('whack-game-area');
448
+ const whackTimer = document.getElementById('whack-timer');
449
+ const whackScoreDisplay = document.getElementById('whack-score-display');
450
+ const exitWhackGame = document.getElementById('exit-whack-game');
451
+ const laserGameArea = document.getElementById('laser-game-area');
452
+ const laserDot = document.getElementById('laser-dot');
453
+ const laserScore = document.getElementById('laser-score');
454
+ const exitLaserGame = document.getElementById('exit-laser-game');
455
+ const settingsBtn = document.getElementById('settings-btn');
456
+ const settingsModal = document.getElementById('settings-modal');
457
+ const closeSettings = document.getElementById('close-settings');
458
+ const renameInput = document.getElementById('rename-input');
459
+ const renameBtn = document.getElementById('rename-btn');
460
+ const resetGame = document.getElementById('reset-game');
461
+ const resetModal = document.getElementById('reset-modal');
462
+ const cancelReset = document.getElementById('cancel-reset');
463
+ const confirmReset = document.getElementById('confirm-reset');
464
+ const colorButtons = document.querySelectorAll('.cat-color');
465
+ const colorSettingButtons = document.querySelectorAll('.cat-color-setting');
466
+ const foodItems = document.querySelectorAll('.food-item');
467
+
468
+ // Initialize game
469
+ function initGame() {
470
+ // Load saved game if exists
471
+ const savedGame = localStorage.getItem('virtualCatGame');
472
+ if (savedGame) {
473
+ const parsedGame = JSON.parse(savedGame);
474
+ Object.assign(gameState, parsedGame);
475
+
476
+ // Show game screen
477
+ nameScreen.classList.add('hidden');
478
+ gameScreen.classList.remove('hidden');
479
+
480
+ // Set cat name and color
481
+ catNameDisplay.textContent = gameState.catName;
482
+ renameInput.value = gameState.catName;
483
+ updateCatColor();
484
+
485
+ // Update stats
486
+ updateStats();
487
+ gameState.gameActive = true;
488
+ startNeedsDecay();
489
+ }
490
+ }
491
+
492
+ // Start the game
493
+ nameSubmit.addEventListener('click', () => {
494
+ const name = catNameInput.value.trim();
495
+ if (name) {
496
+ gameState.catName = name;
497
+ catNameDisplay.textContent = name;
498
+ renameInput.value = name;
499
+
500
+ nameScreen.classList.add('hidden');
501
+ gameScreen.classList.remove('hidden');
502
+
503
+ updateCatColor();
504
+ gameState.gameActive = true;
505
+ saveGame();
506
+ startNeedsDecay();
507
+
508
+ // Welcome message
509
+ setTimeout(() => {
510
+ makeCatTalk(`Hi ${name}! I'm so happy to meet you!`);
511
+ }, 1000);
512
+ }
513
+ });
514
+
515
+ // Cat color selection
516
+ colorButtons.forEach(button => {
517
+ button.addEventListener('click', () => {
518
+ gameState.catColor = button.dataset.color;
519
+ updateCatColor();
520
+ });
521
+ });
522
+
523
+ colorSettingButtons.forEach(button => {
524
+ button.addEventListener('click', () => {
525
+ gameState.catColor = button.dataset.color;
526
+ updateCatColor();
527
+ saveGame();
528
+ });
529
+ });
530
+
531
+ // Update cat color
532
+ function updateCatColor() {
533
+ let catColorClass = '';
534
+ switch(gameState.catColor) {
535
+ case 'orange':
536
+ catColorClass = 'bg-orange-300';
537
+ break;
538
+ case 'gray':
539
+ catColorClass = 'bg-gray-300';
540
+ break;
541
+ case 'white':
542
+ catColorClass = 'bg-white';
543
+ break;
544
+ case 'black':
545
+ catColorClass = 'bg-gray-800';
546
+ break;
547
+ case 'cream':
548
+ catColorClass = 'bg-yellow-100';
549
+ break;
550
+ }
551
+
552
+ // Update main cat
553
+ catContainer.innerHTML = `
554
+ <div class="relative w-32 h-24 ${catColorClass} rounded-tl-full rounded-tr-full rounded-br-full rounded-bl-full">
555
+ <div class="absolute -top-2 -left-2 w-8 h-6 ${catColorClass} rounded-full transform rotate-45"></div>
556
+ <div class="absolute -top-2 -right-2 w-8 h-6 ${catColorClass} rounded-full transform -rotate-45"></div>
557
+ <div class="absolute top-6 left-4 w-4 h-4 bg-white rounded-full"></div>
558
+ <div class="absolute top-6 right-4 w-4 h-4 bg-white rounded-full"></div>
559
+ <div class="absolute top-7 left-5 w-2 h-2 bg-black rounded-full"></div>
560
+ <div class="absolute top-7 right-5 w-2 h-2 bg-black rounded-full"></div>
561
+ <div class="absolute top-10 left-1/2 transform -translate-x-1/2 w-3 h-2 bg-pink-300 rounded-full"></div>
562
+ <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 w-24 h-8 ${catColorClass} rounded-b-full"></div>
563
+ <div class="absolute -bottom-8 left-6 w-4 h-6 ${catColorClass} rounded-b-full"></div>
564
+ <div class="absolute -bottom-8 right-6 w-4 h-6 ${catColorClass} rounded-b-full"></div>
565
+ </div>
566
+ `;
567
+
568
+ // Update bath cat
569
+ bathCat.innerHTML = `
570
+ <div class="relative w-32 h-24 ${catColorClass} rounded-tl-full rounded-tr-full rounded-br-full rounded-bl-full">
571
+ <div class="absolute -top-2 -left-2 w-8 h-6 ${catColorClass} rounded-full transform rotate-45"></div>
572
+ <div class="absolute -top-2 -right-2 w-8 h-6 ${catColorClass} rounded-full transform -rotate-45"></div>
573
+ <div class="absolute top-6 left-4 w-4 h-4 bg-white rounded-full"></div>
574
+ <div class="absolute top-6 right-4 w-4 h-4 bg-white rounded-full"></div>
575
+ <div class="absolute top-7 left-5 w-2 h-2 bg-black rounded-full"></div>
576
+ <div class="absolute top-7 right-5 w-2 h-2 bg-black rounded-full"></div>
577
+ <div class="absolute top-10 left-1/2 transform -translate-x-1/2 w-3 h-2 bg-pink-300 rounded-full"></div>
578
+ <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 w-24 h-8 ${catColorClass} rounded-b-full"></div>
579
+ <div class="absolute -bottom-8 left-6 w-4 h-6 ${catColorClass} rounded-b-full"></div>
580
+ <div class="absolute -bottom-8 right-6 w-4 h-6 ${catColorClass} rounded-b-full"></div>
581
+ </div>
582
+ `;
583
+
584
+ // Update walking cat
585
+ walkingCat.innerHTML = `
586
+ <div class="relative w-32 h-24 ${catColorClass} rounded-tl-full rounded-tr-full rounded-br-full rounded-bl-full walk">
587
+ <div class="absolute -top-2 -left-2 w-8 h-6 ${catColorClass} rounded-full transform rotate-45"></div>
588
+ <div class="absolute -top-2 -right-2 w-8 h-6 ${catColorClass} rounded-full transform -rotate-45"></div>
589
+ <div class="absolute top-6 left-4 w-4 h-4 bg-white rounded-full"></div>
590
+ <div class="absolute top-6 right-4 w-4 h-4 bg-white rounded-full"></div>
591
+ <div class="absolute top-7 left-5 w-2 h-2 bg-black rounded-full"></div>
592
+ <div class="absolute top-7 right-5 w-2 h-2 bg-black rounded-full"></div>
593
+ <div class="absolute top-10 left-1/2 transform -translate-x-1/2 w-3 h-2 bg-pink-300 rounded-full"></div>
594
+ <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 w-24 h-8 ${catColorClass} rounded-b-full"></div>
595
+ <div class="absolute -bottom-8 left-6 w-4 h-6 ${catColorClass} rounded-b-full"></div>
596
+ <div class="absolute -bottom-8 right-6 w-4 h-6 ${catColorClass} rounded-b-full"></div>
597
+ </div>
598
+ `;
599
+
600
+ // Update laser cat
601
+ laserCat.innerHTML = `
602
+ <div class="relative w-32 h-24 ${catColorClass} rounded-tl-full rounded-tr-full rounded-br-full rounded-bl-full">
603
+ <div class="absolute -top-2 -left-2 w-8 h-6 ${catColorClass} rounded-full transform rotate-45"></div>
604
+ <div class="absolute -top-2 -right-2 w-8 h-6 ${catColorClass} rounded-full transform -rotate-45"></div>
605
+ <div class="absolute top-6 left-4 w-4 h-4 bg-white rounded-full"></div>
606
+ <div class="absolute top-6 right-4 w-4 h-4 bg-white rounded-full"></div>
607
+ <div class="absolute top-7 left-5 w-2 h-2 bg-black rounded-full"></div>
608
+ <div class="absolute top-7 right-5 w-2 h-2 bg-black rounded-full"></div>
609
+ <div class="absolute top-10 left-1/2 transform -translate-x-1/2 w-3 h-2 bg-pink-300 rounded-full"></div>
610
+ <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 w-24 h-8 ${catColorClass} rounded-b-full"></div>
611
+ <div class="absolute -bottom-8 left-6 w-4 h-6 ${catColorClass} rounded-b-full"></div>
612
+ <div class="absolute -bottom-8 right-6 w-4 h-6 ${catColorClass} rounded-b-full"></div>
613
+ </div>
614
+ `;
615
+ }
616
+
617
+ // Make cat talk
618
+ function makeCatTalk(message) {
619
+ if (gameState.speechTimeout) {
620
+ clearTimeout(gameState.speechTimeout);
621
+ }
622
+
623
+ catSpeech.textContent = message;
624
+ speechBubble.classList.remove('hidden');
625
+ speechBubble.classList.add('bubble');
626
+
627
+ // Remove bubble after 3 seconds
628
+ gameState.speechTimeout = setTimeout(() => {
629
+ speechBubble.classList.add('hidden');
630
+ }, 3000);
631
+ }
632
+
633
+ // Update stats display
634
+ function updateStats() {
635
+ happinessBar.style.width = `${gameState.happiness}%`;
636
+ hungerBar.style.width = `${gameState.hunger}%`;
637
+ cleanBar.style.width = `${gameState.cleanliness}%`;
638
+ energyBar.style.width = `${gameState.energy}%`;
639
+
640
+ happinessPercent.textContent = `${gameState.happiness}%`;
641
+ hungerPercent.textContent = `${gameState.hunger}%`;
642
+ cleanPercent.textContent = `${gameState.cleanliness}%`;
643
+ energyPercent.textContent = `${gameState.energy}%`;
644
+
645
+ happinessLevel.textContent = gameState.happiness;
646
+
647
+ // Check needs
648
+ checkNeeds();
649
+ }
650
+
651
+ // Check cat needs
652
+ function checkNeeds() {
653
+ gameState.needs.hungry = gameState.hunger > 70;
654
+ gameState.needs.dirty = gameState.cleanliness < 30;
655
+ gameState.needs.lonely = gameState.happiness < 30;
656
+ gameState.needs.tired = gameState.energy < 20;
657
+
658
+ // Make cat complain about needs
659
+ if (gameState.needs.hungry && Math.random() > 0.7) {
660
+ makeCatTalk("I'm so hungry...");
661
+ } else if (gameState.needs.dirty && Math.random() > 0.7) {
662
+ makeCatTalk("I feel dirty...");
663
+ } else if (gameState.needs.lonely && Math.random() > 0.7) {
664
+ makeCatTalk("Play with me!");
665
+ } else if (gameState.needs.tired && Math.random() > 0.7) {
666
+ makeCatTalk("I'm so tired...");
667
+ } else if (Math.random() > 0.95) {
668
+ const randomMessages = [
669
+ "I love you!",
670
+ "Pet me please!",
671
+ "You're the best!",
672
+ "Meow!",
673
+ "Purrrrr...",
674
+ `Hi ${gameState.catName}!`
675
+ ];
676
+ makeCatTalk(randomMessages[Math.floor(Math.random() * randomMessages.length)]);
677
+ }
678
+ }
679
+
680
+ // Start needs decay
681
+ function startNeedsDecay() {
682
+ setInterval(() => {
683
+ if (!gameState.gameActive) return;
684
+
685
+ // Happiness decays slowly over time
686
+ if (gameState.happiness > 0) {
687
+ gameState.happiness = Math.max(0, gameState.happiness - 0.2);
688
+ }
689
+
690
+ // Hunger increases over time
691
+ if (gameState.hunger < 100) {
692
+ gameState.hunger = Math.min(100, gameState.hunger + 0.3);
693
+ }
694
+
695
+ // Cleanliness decreases over time
696
+ if (gameState.cleanliness > 0) {
697
+ gameState.cleanliness = Math.max(0, gameState.cleanliness - 0.1);
698
+ }
699
+
700
+ // Energy recovers slowly when not playing
701
+ if (gameState.energy < 100) {
702
+ gameState.energy = Math.min(100, gameState.energy + 0.1);
703
+ }
704
+
705
+ updateStats();
706
+ saveGame();
707
+ }, 1000);
708
+ }
709
+
710
+ // Save game state
711
+ function saveGame() {
712
+ localStorage.setItem('virtualCatGame', JSON.stringify(gameState));
713
+ }
714
+
715
+ // Food button
716
+ foodBtn.addEventListener('click', () => {
717
+ catRoom.classList.add('hidden');
718
+ foodSelection.classList.remove('hidden');
719
+ });
720
+
721
+ // Food selection
722
+ foodItems.forEach(item => {
723
+ item.addEventListener('click', () => {
724
+ const foodType = item.dataset.food;
725
+ const energyGain = parseInt(item.dataset.energy);
726
+
727
+ // Reduce hunger
728
+ gameState.hunger = Math.max(0, gameState.hunger - 30);
729
+
730
+ // Increase energy
731
+ gameState.energy = Math.min(100, gameState.energy + energyGain);
732
+
733
+ // Small happiness boost
734
+ gameState.happiness = Math.min(100, gameState.happiness + 5);
735
+
736
+ // Update stats
737
+ updateStats();
738
+ saveGame();
739
+
740
+ // Show eating animation
741
+ catContainer.classList.add('eat');
742
+ makeCatTalk(`Yummy ${foodType}!`);
743
+
744
+ // Hide food selection
745
+ foodSelection.classList.add('hidden');
746
+ catRoom.classList.remove('hidden');
747
+
748
+ // Stop eating animation after 2 seconds
749
+ setTimeout(() => {
750
+ catContainer.classList.remove('eat');
751
+ }, 2000);
752
+ });
753
+ });
754
+
755
+ // Cancel food
756
+ cancelFood.addEventListener('click', () => {
757
+ foodSelection.classList.add('hidden');
758
+ catRoom.classList.remove('hidden');
759
+ });
760
+
761
+ // Bath button
762
+ bathBtn.addEventListener('click', () => {
763
+ catRoom.classList.add('hidden');
764
+ catBath.classList.remove('hidden');
765
+ makeCatTalk("Do I really need a bath?");
766
+ });
767
+
768
+ // Use soap
769
+ useSoap.addEventListener('click', () => {
770
+ makeCatTalk("Bubbles everywhere!");
771
+ bathCat.innerHTML += `
772
+ <div class="absolute top-0 left-0 w-full h-full flex justify-center items-center">
773
+ <div class="bubble w-8 h-8 bg-white rounded-full opacity-70"></div>
774
+ <div class="bubble w-6 h-6 bg-white rounded-full opacity-70" style="animation-delay: 0.2s"></div>
775
+ <div class="bubble w-5 h-5 bg-white rounded-full opacity-70" style="animation-delay: 0.4s"></div>
776
+ </div>
777
+ `;
778
+
779
+ // Increase cleanliness
780
+ gameState.cleanliness = Math.min(100, gameState.cleanliness + 20);
781
+ updateStats();
782
+ saveGame();
783
+ });
784
+
785
+ // Rinse
786
+ rinse.addEventListener('click', () => {
787
+ makeCatTalk("That feels nice!");
788
+ bathCat.innerHTML += `
789
+ <div class="absolute top-0 left-0 w-full h-full flex justify-center items-center">
790
+ <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-4 h-16 bg-blue-200 rounded-full"></div>
791
+ </div>
792
+ `;
793
+
794
+ // Increase cleanliness more
795
+ gameState.cleanliness = Math.min(100, gameState.cleanliness + 30);
796
+ updateStats();
797
+ saveGame();
798
+ });
799
+
800
+ // Dry
801
+ dry.addEventListener('click', () => {
802
+ makeCatTalk("Ahhh, all dry now!");
803
+
804
+ // Max cleanliness
805
+ gameState.cleanliness = 100;
806
+ updateStats();
807
+ saveGame();
808
+
809
+ // Exit bath after drying
810
+ setTimeout(() => {
811
+ catBath.classList.add('hidden');
812
+ catRoom.classList.remove('hidden');
813
+ }, 1000);
814
+ });
815
+
816
+ // Exit bath
817
+ exitBath.addEventListener('click', () => {
818
+ catBath.classList.add('hidden');
819
+ catRoom.classList.remove('hidden');
820
+ });
821
+
822
+ // Walk button
823
+ walkBtn.addEventListener('click', () => {
824
+ if (gameState.energy < 20) {
825
+ makeCatTalk("I'm too tired to go outside...");
826
+ return;
827
+ }
828
+
829
+ catRoom.classList.add('hidden');
830
+ catPark.classList.remove('hidden');
831
+ makeCatTalk("Yay! Outside time!");
832
+
833
+ // Small happiness boost
834
+ gameState.happiness = Math.min(100, gameState.happiness + 10);
835
+ updateStats();
836
+ saveGame();
837
+ });
838
+
839
+ // Play fetch
840
+ playFetch.addEventListener('click', () => {
841
+ if (gameState.energy < 15) {
842
+ makeCatTalk("I need to rest first...");
843
+ return;
844
+ }
845
+
846
+ makeCatTalk("Throw the ball! Throw the ball!");
847
+
848
+ // Add ball to park
849
+ const ball = document.createElement('div');
850
+ ball.className = 'absolute bottom-10 left-1/2 transform -translate-x-1/2 w-8 h-8 bg-red-500 rounded-full bounce';
851
+ walkingCat.parentNode.appendChild(ball);
852
+
853
+ // Reduce energy but increase happiness
854
+ gameState.energy = Math.max(0, gameState.energy - 15);
855
+ gameState.happiness = Math.min(100, gameState.happiness + 15);
856
+ updateStats();
857
+ saveGame();
858
+
859
+ // Remove ball after animation
860
+ setTimeout(() => {
861
+ ball.remove();
862
+ }, 2000);
863
+ });
864
+
865
+ // Chase butterflies
866
+ chaseButterflies.addEventListener('click', () => {
867
+ if (gameState.energy < 10) {
868
+ makeCatTalk("Maybe later...");
869
+ return;
870
+ }
871
+
872
+ makeCatTalk("Butterflies! I must catch them!");
873
+
874
+ // Add butterflies
875
+ for (let i = 0; i < 3; i++) {
876
+ const butterfly = document.createElement('div');
877
+ butterfly.className = `absolute top-${10 + i*10} left-${20 + i*20} text-2xl text-pink-400 fas fa-butterfly`;
878
+ butterfly.style.animation = `fly${i+1} 3s infinite`;
879
+ walkingCat.parentNode.appendChild(butterfly);
880
+
881
+ // Add fly animation
882
+ const style = document.createElement('style');
883
+ style.textContent = `
884
+ @keyframes fly${i+1} {
885
+ 0% { transform: translate(0, 0); }
886
+ 25% { transform: translate(${20 + i*10}px, ${10 + i*5}px); }
887
+ 50% { transform: translate(${40 + i*20}px, 0); }
888
+ 75% { transform: translate(${20 + i*10}px, ${-10 - i*5}px); }
889
+ 100% { transform: translate(0, 0); }
890
+ }
891
+ `;
892
+ document.head.appendChild(style);
893
+ }
894
+
895
+ // Reduce energy but increase happiness more
896
+ gameState.energy = Math.max(0, gameState.energy - 10);
897
+ gameState.happiness = Math.min(100, gameState.happiness + 20);
898
+ updateStats();
899
+ saveGame();
900
+
901
+ // Remove butterflies after some time
902
+ setTimeout(() => {
903
+ const butterflies = document.querySelectorAll('.fa-butterfly');
904
+ butterflies.forEach(b => b.remove());
905
+ }, 3000);
906
+ });
907
+
908
+ // Exit park
909
+ exitPark.addEventListener('click', () => {
910
+ catPark.classList.add('hidden');
911
+ catRoom.classList.remove('hidden');
912
+ });
913
+
914
+ // Play button
915
+ playBtn.addEventListener('click', () => {
916
+ catRoom.classList.add('hidden');
917
+ miniGames.classList.remove('hidden');
918
+ });
919
+
920
+ // Exit games
921
+ exitGames.addEventListener('click', () => {
922
+ miniGames.classList.add('hidden');
923
+ catRoom.classList.remove('hidden');
924
+ });
925
+
926
+ // Memory game
927
+ memoryGameBtn.addEventListener('click', () => {
928
+ if (gameState.energy < 20) {
929
+ makeCatTalk("I'm too tired to play right now...");
930
+ miniGames.classList.add('hidden');
931
+ catRoom.classList.remove('hidden');
932
+ return;
933
+ }
934
+
935
+ miniGames.classList.add('hidden');
936
+ memoryGame.classList.remove('hidden');
937
+ setupMemoryGame();
938
+ });
939
+
940
+ // Setup memory game
941
+ function setupMemoryGame() {
942
+ memoryBoard.innerHTML = '';
943
+ const emojis = ['😺', '🐱', '😸', '🐈', '😹', '🐾'];
944
+ const cards = [...emojis, ...emojis].sort(() => 0.5 - Math.random());
945
+
946
+ let flippedCards = [];
947
+ let matchedPairs = 0;
948
+
949
+ cards.forEach((emoji, index) => {
950
+ const card = document.createElement('div');
951
+ card.className = 'w-16 h-16 bg-white rounded-lg flex items-center justify-center text-3xl cursor-pointer shadow-md hover:bg-gray-100 transition';
952
+ card.dataset.emoji = emoji;
953
+ card.dataset.index = index;
954
+ card.innerHTML = '<div class="w-full h-full bg-pink-400 rounded-lg flex items-center justify-center">?</div>';
955
+
956
+ card.addEventListener('click', () => {
957
+ if (flippedCards.length < 2 && !card.classList.contains('flipped') && !card.classList.contains('matched')) {
958
+ flipCard(card);
959
+
960
+ if (flippedCards.length === 2) {
961
+ checkForMatch();
962
+ }
963
+ }
964
+ });
965
+
966
+ memoryBoard.appendChild(card);
967
+ });
968
+
969
+ memoryScore.textContent = 'Matches: 0/6';
970
+
971
+ function flipCard(card) {
972
+ card.classList.add('flipped');
973
+ card.innerHTML = card.dataset.emoji;
974
+ flippedCards.push(card);
975
+ }
976
+
977
+ function checkForMatch() {
978
+ const [card1, card2] = flippedCards;
979
+
980
+ if (card1.dataset.emoji === card2.dataset.emoji) {
981
+ card1.classList.add('matched');
982
+ card2.classList.add('matched');
983
+ matchedPairs++;
984
+ memoryScore.textContent = `Matches: ${matchedPairs}/6`;
985
+ flippedCards = [];
986
+
987
+ if (matchedPairs === 6) {
988
+ // Game completed
989
+ gameState.happiness = Math.min(100, gameState.happiness + 25);
990
+ gameState.energy = Math.max(0, gameState.energy - 20);
991
+ updateStats();
992
+ saveGame();
993
+
994
+ setTimeout(() => {
995
+ makeCatTalk("I won! That was fun!");
996
+ memoryGame.classList.add('hidden');
997
+ catRoom.classList.remove('hidden');
998
+ }, 1000);
999
+ }
1000
+ } else {
1001
+ setTimeout(() => {
1002
+ card1.innerHTML = '<div class="w-full h-full bg-pink-400 rounded-lg flex items-center justify-center">?</div>';
1003
+ card2.innerHTML = '<div class="w-full h-full bg-pink-400 rounded-lg flex items-center justify-center">?</div>';
1004
+ card1.classList.remove('flipped');
1005
+ card2.classList.remove('flipped');
1006
+ flippedCards = [];
1007
+ }, 1000);
1008
+ }
1009
+ }
1010
+ }
1011
+
1012
+ // Exit memory game
1013
+ exitMemoryGame.addEventListener('click', () => {
1014
+ memoryGame.classList.add('hidden');
1015
+ catRoom.classList.remove('hidden');
1016
+ });
1017
+
1018
+ // Whack-a-mouse game
1019
+ whackAMouseBtn.addEventListener('click', () => {
1020
+ if (gameState.energy < 25) {
1021
+ makeCatTalk("I need a nap first...");
1022
+ miniGames.classList.add('hidden');
1023
+ catRoom.classList.remove('hidden');
1024
+ return;
1025
+ }
1026
+
1027
+ miniGames.classList.add('hidden');
1028
+ whackAMouse.classList.remove('hidden');
1029
+ setupWhackGame();
1030
+ });
1031
+
1032
+ // Setup whack-a-mouse game
1033
+ function setupWhackGame() {
1034
+ whackGameArea.innerHTML = '';
1035
+ let score = 0;
1036
+ let timeLeft = 30;
1037
+ whackScoreDisplay.textContent = 'Score: 0';
1038
+ whackTimer.textContent = `Time: ${timeLeft}s`;
1039
+
1040
+ // Create holes
1041
+ for (let i = 0; i < 6; i++) {
1042
+ const hole = document.createElement('div');
1043
+ hole.className = 'absolute w-10 h-10 bg-gray-700 rounded-full';
1044
+
1045
+ // Position holes in a circle
1046
+ const angle = (i / 6) * Math.PI * 2;
1047
+ const radius = 80;
1048
+ hole.style.left = `calc(50% + ${Math.cos(angle) * radius}px - 20px)`;
1049
+ hole.style.top = `calc(50% + ${Math.sin(angle) * radius}px - 20px)`;
1050
+
1051
+ whackGameArea.appendChild(hole);
1052
+ }
1053
+
1054
+ // Game timer
1055
+ const timer = setInterval(() => {
1056
+ timeLeft--;
1057
+ whackTimer.textContent = `Time: ${timeLeft}s`;
1058
+
1059
+ if (timeLeft <= 0) {
1060
+ clearInterval(timer);
1061
+ clearInterval(mouseInterval);
1062
+
1063
+ // Game over
1064
+ gameState.happiness = Math.min(100, gameState.happiness + score * 2);
1065
+ gameState.energy = Math.max(0, gameState.energy - 25);
1066
+ updateStats();
1067
+ saveGame();
1068
+
1069
+ setTimeout(() => {
1070
+ makeCatTalk(`I got ${score} mice!`);
1071
+ whackAMouse.classList.add('hidden');
1072
+ catRoom.classList.remove('hidden');
1073
+ }, 1000);
1074
+ }
1075
+ }, 1000);
1076
+
1077
+ // Mouse appearing
1078
+ let mouseInterval = setInterval(() => {
1079
+ if (timeLeft <= 0) return;
1080
+
1081
+ const holes = document.querySelectorAll('#whack-game-area > div');
1082
+ const randomHole = holes[Math.floor(Math.random() * holes.length)];
1083
+
1084
+ // Create mouse
1085
+ const mouse = document.createElement('div');
1086
+ mouse.className = 'absolute w-8 h-6 bg-gray-500 rounded-full cursor-pointer';
1087
+ mouse.style.left = '6px';
1088
+ mouse.style.top = '-10px';
1089
+
1090
+ // Add mouse to hole
1091
+ randomHole.appendChild(mouse);
1092
+
1093
+ // Click to whack
1094
+ mouse.addEventListener('click', () => {
1095
+ score++;
1096
+ whackScoreDisplay.textContent = `Score: ${score}`;
1097
+
1098
+ // Show whacked mouse
1099
+ mouse.className = 'absolute w-8 h-6 bg-red-500 rounded-full';
1100
+ mouse.innerHTML = '<div class="absolute top-0 left-0 w-full h-full flex justify-center items-center text-white">X</div>';
1101
+
1102
+ setTimeout(() => {
1103
+ mouse.remove();
1104
+ }, 500);
1105
+ });
1106
+
1107
+ // Mouse disappears after some time
1108
+ setTimeout(() => {
1109
+ if (mouse.parentNode) {
1110
+ mouse.remove();
1111
+ }
1112
+ }, 1000);
1113
+ }, 800);
1114
+ }
1115
+
1116
+ // Exit whack game
1117
+ exitWhackGame.addEventListener('click', () => {
1118
+ whackAMouse.classList.add('hidden');
1119
+ catRoom.classList.remove('hidden');
1120
+ });
1121
+
1122
+ // Laser pointer game
1123
+ laserPointerBtn.addEventListener('click', () => {
1124
+ if (gameState.energy < 15) {
1125
+ makeCatTalk("Maybe after a short nap...");
1126
+ miniGames.classList.add('hidden');
1127
+ catRoom.classList.remove('hidden');
1128
+ return;
1129
+ }
1130
+
1131
+ miniGames.classList.add('hidden');
1132
+ laserPointer.classList.remove('hidden');
1133
+ setupLaserGame();
1134
+ });
1135
+
1136
+ // Setup laser pointer game
1137
+ function setupLaserGame() {
1138
+ let score = 0;
1139
+ let gameTime = 20;
1140
+ laserScore.textContent = 'Points: 0';
1141
+
1142
+ // Show laser dot
1143
+ laserDot.classList.remove('hidden');
1144
+
1145
+ // Move laser with mouse
1146
+ laserGameArea.addEventListener('mousemove', (e) => {
1147
+ const rect = laserGameArea.getBoundingClientRect();
1148
+ const x = e.clientX - rect.left;
1149
+ const y = e.clientY - rect.top;
1150
+
1151
+ laserDot.style.left = `${x - 8}px`;
1152
+ laserDot.style.top = `${y - 8}px`;
1153
+
1154
+ // Move cat towards laser
1155
+ const catRect = laserCat.getBoundingClientRect();
1156
+ const catX = catRect.left - rect.left + catRect.width / 2;
1157
+ const catY = catRect.top - rect.top + catRect.height / 2;
1158
+
1159
+ const dx = x - catX;
1160
+ const dy = y - catY;
1161
+ const distance = Math.sqrt(dx * dx + dy * dy);
1162
+
1163
+ if (distance < 100) {
1164
+ // Cat is close to laser
1165
+ const angle = Math.atan2(dy, dx);
1166
+ const moveX = Math.cos(angle) * 5;
1167
+ const moveY = Math.sin(angle) * 5;
1168
+
1169
+ laserCat.style.transform = `translateX(-50%) translate(${moveX}px, ${moveY}px)`;
1170
+
1171
+ // Increase score when cat is chasing
1172
+ score++;
1173
+ laserScore.textContent = `Points: ${score}`;
1174
+ }
1175
+ });
1176
+
1177
+ // Game timer
1178
+ const timer = setInterval(() => {
1179
+ gameTime--;
1180
+
1181
+ if (gameTime <= 0) {
1182
+ clearInterval(timer);
1183
+
1184
+ // Game over
1185
+ gameState.happiness = Math.min(100, gameState.happiness + score / 10);
1186
+ gameState.energy = Math.max(0, gameState.energy - 15);
1187
+ updateStats();
1188
+ saveGame();
1189
+
1190
+ laserDot.classList.add('hidden');
1191
+
1192
+ setTimeout(() => {
1193
+ makeCatTalk("That was exhausting but fun!");
1194
+ laserPointer.classList.add('hidden');
1195
+ catRoom.classList.remove('hidden');
1196
+ }, 1000);
1197
+ }
1198
+ }, 1000);
1199
+ }
1200
+
1201
+ // Exit laser game
1202
+ exitLaserGame.addEventListener('click', () => {
1203
+ laserPointer.classList.add('hidden');
1204
+ catRoom.classList.remove('hidden');
1205
+ });
1206
+
1207
+ // Settings button
1208
+ settingsBtn.addEventListener('click', () => {
1209
+ settingsModal.classList.remove('hidden');
1210
+ });
1211
+
1212
+ // Close settings
1213
+ closeSettings.addEventListener('click', () => {
1214
+ settingsModal.classList.add('hidden');
1215
+ });
1216
+
1217
+ // Rename cat
1218
+ renameBtn.addEventListener('click', () => {
1219
+ const newName = renameInput.value.trim();
1220
+ if (newName) {
1221
+ gameState.catName = newName;
1222
+ catNameDisplay.textContent = newName;
1223
+ saveGame();
1224
+ makeCatTalk(`I like my new name, ${newName}!`);
1225
+ }
1226
+ });
1227
+
1228
+ // Reset game
1229
+ resetGame.addEventListener('click', () => {
1230
+ settingsModal.classList.add('hidden');
1231
+ resetModal.classList.remove('hidden');
1232
+ });
1233
+
1234
+ // Cancel reset
1235
+ cancelReset.addEventListener('click', () => {
1236
+ resetModal.classList.add('hidden');
1237
+ });
1238
+
1239
+ // Confirm reset
1240
+ confirmReset.addEventListener('click', () => {
1241
+ localStorage.removeItem('virtualCatGame');
1242
+ resetModal.classList.add('hidden');
1243
+ gameScreen.classList.add('hidden');
1244
+ nameScreen.classList.remove('hidden');
1245
+ catNameInput.value = '';
1246
+ gameState.catName = "";
1247
+ gameState.happiness = 100;
1248
+ gameState.hunger = 0;
1249
+ gameState.cleanliness = 100;
1250
+ gameState.energy = 100;
1251
+ gameState.gameActive = false;
1252
+ });
1253
+
1254
+ // Pet the cat
1255
+ catContainer.addEventListener('click', () => {
1256
+ if (!catContainer.classList.contains('shake')) {
1257
+ catContainer.classList.add('shake');
1258
+ gameState.happiness = Math.min(100, gameState.happiness + 5);
1259
+ updateStats();
1260
+ saveGame();
1261
+
1262
+ setTimeout(() => {
1263
+ catContainer.classList.remove('shake');
1264
+ }, 500);
1265
+
1266
+ const happyMessages = [
1267
+ "Purrrrr...",
1268
+ "That feels nice!",
1269
+ "More pets please!",
1270
+ "I love you!",
1271
+ "You're the best!"
1272
+ ];
1273
+ makeCatTalk(happyMessages[Math.floor(Math.random() * happyMessages.length)]);
1274
+ }
1275
+ });
1276
+
1277
+ // Initialize the game
1278
+ initGame();
1279
+ </script>
1280
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=velja3/cat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1281
+ </html>