Hugging Face's logo

Spaces:
kolaslab
/
calculator
Running

App Files Community
kolaslab commited on
Commit
fcba6f7
·
verified ·
1 Parent(s): 815e811

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +95 -287
index.html CHANGED
@@ -1,315 +1,123 @@
1
  <!DOCTYPE html>
2
- <html>
3
  <head>
4
  <meta charset="UTF-8">
5
- <title>Space Shooter</title>
 
 
6
  <style>
7
  body {
8
- margin: 0;
9
- overflow: hidden;
10
- background: black;
11
  display: flex;
12
  justify-content: center;
13
  align-items: center;
14
  height: 100vh;
15
- font-family: Arial;
16
- color: white;
17
- }
18
-
19
- #gameCanvas {
20
- border: 2px solid white;
21
- background-image:
22
- radial-gradient(white 1px, transparent 0),
23
- radial-gradient(white 1px, transparent 0);
24
- background-size: 50px 50px;
25
- background-position: 0 0, 25px 25px;
26
- display: none;
27
- }
28
-
29
- #menu {
30
- text-align: center;
31
  }
32
-
33
- .difficulty-btn {
34
- padding: 10px 20px;
35
- margin: 10px;
36
- font-size: 18px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37
  cursor: pointer;
38
- background: #333;
39
- color: white;
40
- border: 2px solid white;
41
- border-radius: 5px;
42
  }
43
-
44
- .difficulty-btn:hover {
45
- background: #555;
46
  }
47
-
48
- #score {
49
- position: absolute;
50
- top: 20px;
51
- left: 20px;
52
- font-size: 24px;
53
  }
54
-
55
- #gameOver {
56
- position: absolute;
57
- font-size: 48px;
58
- text-align: center;
59
- display: none;
60
  }
61
  </style>
62
  </head>
63
  <body>
64
- <div id="menu">
65
- <h1>Space Shooter</h1>
66
- <h2>Select Difficulty:</h2>
67
- <button class="difficulty-btn" onclick="startGame('easy')">Easy</button>
68
- <button class="difficulty-btn" onclick="startGame('medium')">Medium</button>
69
- <button class="difficulty-btn" onclick="startGame('hard')">Hard</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
70
  </div>
71
- <div id="score">Score: <span id="scoreValue">0</span></div>
72
- <canvas id="gameCanvas" width="800" height="600"></canvas>
73
- <div id="gameOver">Game Over!<br>Press R to Restart</div>
74
-
75
  <script>
76
- const canvas = document.getElementById('gameCanvas');
77
- const ctx = canvas.getContext('2d');
78
- const scoreEl = document.getElementById('scoreValue');
79
- const gameOverEl = document.getElementById('gameOver');
80
- const menuEl = document.getElementById('menu');
81
-
82
- let audioCtx;
83
- let player = {
84
- x: canvas.width/2,
85
- y: 500,
86
- speed: 5,
87
- size: 30
88
- };
89
- let bullets = [];
90
- let enemies = [];
91
- let score = 0;
92
- let gameOver = false;
93
- let keys = {
94
- left: false,
95
- right: false
96
- };
97
-
98
- let gameConfig = {
99
- easy: {
100
- enemySpeed: 2,
101
- spawnRate: 0.01,
102
- playerSpeed: 5
103
- },
104
- medium: {
105
- enemySpeed: 3,
106
- spawnRate: 0.02,
107
- playerSpeed: 6
108
- },
109
- hard: {
110
- enemySpeed: 4,
111
- spawnRate: 0.03,
112
- playerSpeed: 7
113
- }
114
- };
115
-
116
- let currentConfig;
117
-
118
- function startGame(difficulty) {
119
- menuEl.style.display = 'none';
120
- canvas.style.display = 'block';
121
- currentConfig = gameConfig[difficulty];
122
- player.speed = currentConfig.playerSpeed;
123
- resetGame();
124
- if (!audioCtx) {
125
- audio = setupAudio();
126
- }
127
- }
128
-
129
- function setupAudio() {
130
- audioCtx = new (window.AudioContext || window.webkitAudioContext)();
131
-
132
- function playNote(freq, startTime, duration) {
133
- const osc = audioCtx.createOscillator();
134
- const gain = audioCtx.createGain();
135
-
136
- osc.connect(gain);
137
- gain.connect(audioCtx.destination);
138
-
139
- osc.type = 'square';
140
- osc.frequency.setValueAtTime(freq, startTime);
141
-
142
- gain.gain.setValueAtTime(0.1, startTime);
143
- gain.gain.exponentialRampToValueAtTime(0.01, startTime + duration);
144
-
145
- osc.start(startTime);
146
- osc.stop(startTime + duration);
147
- }
148
-
149
- function playBGM() {
150
- const notes = [440, 523, 659, 784];
151
- setInterval(() => {
152
- if (!gameOver) {
153
- playNote(notes[Math.floor(Math.random() * notes.length)],
154
- audioCtx.currentTime,
155
- 0.1);
156
  }
157
- }, 200);
158
- }
159
-
160
- function playShoot() {
161
- playNote(880, audioCtx.currentTime, 0.1);
162
- }
163
-
164
- playBGM();
165
- return { playShoot };
166
- }
167
-
168
- function drawPlayer() {
169
- ctx.fillStyle = 'yellow';
170
- ctx.beginPath();
171
- for (let i = 0; i < 5; i++) {
172
- const angle = (i * 4 * Math.PI) / 5 - Math.PI / 2;
173
- const x = player.x + player.size * Math.cos(angle);
174
- const y = player.y + player.size * Math.sin(angle);
175
- i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
176
- }
177
- ctx.closePath();
178
- ctx.fill();
179
- }
180
-
181
- function createEnemy() {
182
- if (Math.random() < currentConfig.spawnRate) {
183
- enemies.push({
184
- x: Math.random() * (canvas.width - 30) + 15,
185
- y: -30,
186
- speed: currentConfig.enemySpeed
187
- });
188
- }
189
- }
190
-
191
- function updatePlayer() {
192
- if (keys.left) {
193
- player.x = Math.max(player.size, player.x - player.speed);
194
- }
195
- if (keys.right) {
196
- player.x = Math.min(canvas.width - player.size, player.x + player.speed);
197
- }
198
- }
199
-
200
- function updateGame() {
201
- updatePlayer();
202
-
203
- bullets = bullets.filter(bullet => {
204
- bullet.y -= 8;
205
- return bullet.y > 0;
206
- });
207
-
208
- enemies = enemies.filter(enemy => {
209
- enemy.y += enemy.speed;
210
-
211
- if (Math.abs(enemy.x - player.x) < 30 &&
212
- Math.abs(enemy.y - player.y) < 30) {
213
- gameOver = true;
214
- gameOverEl.style.display = 'block';
215
  }
216
-
217
- return enemy.y < canvas.height;
218
  });
219
-
220
- bullets.forEach((bullet, bi) => {
221
- enemies.forEach((enemy, ei) => {
222
- if (Math.abs(bullet.x - enemy.x) < 30 &&
223
- Math.abs(bullet.y - enemy.y) < 30) {
224
- bullets.splice(bi, 1);
225
- enemies.splice(ei, 1);
226
- score += 100;
227
- scoreEl.textContent = score;
228
- }
229
- });
230
- });
231
-
232
- createEnemy();
233
- }
234
-
235
- function draw() {
236
- ctx.clearRect(0, 0, canvas.width, canvas.height);
237
-
238
- drawPlayer();
239
-
240
- ctx.fillStyle = 'white';
241
- bullets.forEach(bullet => {
242
- ctx.fillRect(bullet.x - 2, bullet.y - 8, 4, 16);
243
- });
244
-
245
- ctx.font = '30px Arial';
246
- enemies.forEach(enemy => {
247
- ctx.fillText('🐱', enemy.x - 15, enemy.y + 10);
248
- });
249
- }
250
-
251
- function gameLoop() {
252
- if (!gameOver) {
253
- updateGame();
254
- draw();
255
- requestAnimationFrame(gameLoop);
256
- }
257
- }
258
-
259
- function resetGame() {
260
- player.x = canvas.width/2;
261
- bullets = [];
262
- enemies = [];
263
- score = 0;
264
- gameOver = false;
265
- scoreEl.textContent = '0';
266
- gameOverEl.style.display = 'none';
267
- gameLoop();
268
- }
269
-
270
- function returnToMenu() {
271
- canvas.style.display = 'none';
272
- menuEl.style.display = 'block';
273
- gameOverEl.style.display = 'none';
274
- }
275
-
276
- let audio;
277
-
278
- document.addEventListener('keydown', (e) => {
279
- if (gameOver) {
280
- if (e.key.toLowerCase() === 'r') {
281
- returnToMenu();
282
- }
283
- return;
284
- }
285
-
286
- switch(e.key) {
287
- case 'ArrowLeft':
288
- keys.left = true;
289
- break;
290
- case 'ArrowRight':
291
- keys.right = true;
292
- break;
293
- case ' ':
294
- bullets.push({
295
- x: player.x,
296
- y: player.y - 20
297
- });
298
- if (audio) audio.playShoot();
299
- break;
300
- }
301
  });
302
 
303
- document.addEventListener('keyup', (e) => {
304
- switch(e.key) {
305
- case 'ArrowLeft':
306
- keys.left = false;
307
- break;
308
- case 'ArrowRight':
309
- keys.right = false;
310
- break;
311
- }
312
- });
313
  </script>
314
  </body>
315
  </html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script>
 
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>Calculator Game</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
8
  <style>
9
  body {
10
+ font-family: 'Roboto', sans-serif;
 
 
11
  display: flex;
12
  justify-content: center;
13
  align-items: center;
14
  height: 100vh;
15
+ background-color: #f0f0f0;
16
+ margin: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  }
18
+ .calculator {
19
+ width: 300px;
20
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
21
+ border-radius: 10px;
22
+ overflow: hidden;
23
+ background: #fff;
24
+ }
25
+ .display {
26
+ background-color: #222;
27
+ color: #fff;
28
+ font-size: 2rem;
29
+ text-align: right;
30
+ padding: 20px;
31
+ box-sizing: border-box;
32
+ }
33
+ .buttons {
34
+ display: grid;
35
+ grid-template-columns: repeat(4, 1fr);
36
+ }
37
+ .button {
38
+ border: 1px solid #ddd;
39
+ padding: 20px;
40
+ font-size: 1.5rem;
41
  cursor: pointer;
42
+ transition: background 0.3s;
 
 
 
43
  }
44
+ .button:hover {
45
+ background-color: #f7f7f7;
 
46
  }
47
+ .explode {
48
+ animation: explode 0.5s forwards;
 
 
 
 
49
  }
50
+ @keyframes explode {
51
+ 0% { transform: scale(1); }
52
+ 100% { transform: scale(0); }
 
 
 
53
  }
54
  </style>
55
  </head>
56
  <body>
57
+ <div class="calculator">
58
+ <div class="display" id="display">0</div>
59
+ <div class="buttons">
60
+ <div class="button">7</div>
61
+ <div class="button">8</div>
62
+ <div class="button">9</div>
63
+ <div class="button">/</div>
64
+ <div class="button">4</div>
65
+ <div class="button">5</div>
66
+ <div class="button">6</div>
67
+ <div class="button">*</div>
68
+ <div class="button">1</div>
69
+ <div class="button">2</div>
70
+ <div class="button">3</div>
71
+ <div class="button">-</div>
72
+ <div class="button">0</div>
73
+ <div class="button">C</div>
74
+ <div class="button">=</div>
75
+ <div class="button">+</div>
76
+ </div>
77
  </div>
78
+ <!-- Placeholder for explosion sound -->
79
+ <audio id="explosionSound" src="explosion.mp3"></audio>
 
 
80
  <script>
81
+ const display = document.getElementById('display');
82
+ const explosionSound = document.getElementById('explosionSound');
83
+ let expression = '';
84
+
85
+ document.querySelectorAll('.button').forEach(button => {
86
+ button.addEventListener('click', () => {
87
+ const value = button.textContent;
88
+
89
+ if (value === 'C') {
90
+ expression = '';
91
+ display.textContent = '0';
92
+ } else if (value === '=') {
93
+ try {
94
+ if (expression.includes('/0')) {
95
+ explodeScreen();
96
+ } else {
97
+ expression = eval(expression).toString();
98
+ display.textContent = expression;
99
+ }
100
+ } catch {
101
+ display.textContent = 'Error';
102
+ expression = '';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
103
  }
104
+ } else {
105
+ expression += value;
106
+ display.textContent = expression;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
107
  }
 
 
108
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
109
  });
110
 
111
+ function explodeScreen() {
112
+ explosionSound.play();
113
+ display.textContent = 'Boom!';
114
+ document.querySelector('.calculator').classList.add('explode');
115
+ setTimeout(() => {
116
+ expression = '';
117
+ display.textContent = '0';
118
+ document.querySelector('.calculator').classList.remove('explode');
119
+ }, 500);
120
+ }
121
  </script>
122
  </body>
123
  </html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script>