Hugging Face's logo

Spaces:
kolaslab
/
simulator
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +219 -260
index.html CHANGED
@@ -1,315 +1,274 @@
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>
3
  <head>
4
+ <title>Rotating Arrows System</title>
 
5
  <style>
6
  body {
7
  margin: 0;
 
 
8
  display: flex;
9
  justify-content: center;
10
  align-items: center;
11
+ min-height: 100vh;
12
+ background: #1a1a1a;
13
+ font-family: Arial, sans-serif;
14
  color: white;
15
  }
16
 
17
+ #container {
18
+ position: relative;
19
+ text-align: center;
20
+ }
21
+
22
+ .screen {
 
23
  display: none;
24
+ margin-bottom: 20px;
25
  }
26
 
27
+ .active {
28
+ display: block;
29
  }
30
 
31
+ .arrow-config {
32
+ background: rgba(255, 255, 255, 0.1);
33
+ padding: 15px;
34
  margin: 10px;
35
+ border-radius: 8px;
 
 
 
 
 
36
  }
37
 
38
+ button {
39
+ padding: 10px 20px;
40
+ margin: 5px;
41
+ font-size: 16px;
42
+ background: #4a90e2;
43
+ border: none;
44
+ border-radius: 5px;
45
+ color: white;
46
+ cursor: pointer;
47
+ transition: all 0.3s ease;
48
  }
49
 
50
+ button:hover {
51
+ background: #357abd;
52
+ transform: translateY(-2px);
 
 
53
  }
54
 
55
+ input {
56
+ width: 60px;
57
+ padding: 5px;
58
+ margin: 5px;
59
+ border: none;
60
+ border-radius: 3px;
61
+ background: rgba(255, 255, 255, 0.2);
62
+ color: white;
63
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
64
 
65
+ input:focus {
66
+ outline: none;
67
+ background: rgba(255, 255, 255, 0.3);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
68
  }
69
 
70
+ canvas {
71
+ background: #333;
72
+ border-radius: 8px;
73
+ margin-top: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74
  }
75
 
76
+ #resetBtn {
77
+ position: fixed;
78
+ top: 20px;
79
+ right: 20px;
80
+ background: #e74c3c;
 
 
 
 
 
 
81
  }
82
 
83
+ #resetBtn:hover {
84
+ background: #c0392b;
 
 
 
 
 
 
85
  }
86
 
87
+ .controls {
88
+ margin-top: 20px;
 
 
 
 
 
89
  }
90
 
91
+ h2 {
92
+ color: #4a90e2;
93
+ margin-bottom: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
94
  }
95
 
96
+ .arrow-config label {
97
+ display: inline-block;
98
+ width: 60px;
99
+ text-align: right;
100
+ margin-right: 10px;
 
 
 
 
 
 
 
 
 
101
  }
102
+ </style>
103
+ </head>
104
+ <body>
105
+ <button id="resetBtn" onclick="reset()" style="display: none;">Reset</button>
106
+
107
+ <div id="container">
108
+ <div id="startScreen" class="screen active">
109
+ <h2>Select Number of Arrows</h2>
110
+ <div>
111
+ <button onclick="selectArrows(2)">2 Arrows</button>
112
+ <button onclick="selectArrows(3)">3 Arrows</button>
113
+ <button onclick="selectArrows(4)">4 Arrows</button>
114
+ <button onclick="selectArrows(5)">5 Arrows</button>
115
+ </div>
116
+ </div>
117
+
118
+ <div id="configScreen" class="screen">
119
+ <h2>Configure Arrows</h2>
120
+ <div id="arrowConfigs"></div>
121
+ <button onclick="startAnimation()">Start Animation</button>
122
+ </div>
123
+
124
+ <canvas id="canvas" width="800" height="600" style="display: none;"></canvas>
125
+ </div>
126
 
127
+ <script>
128
+ let arrows = [];
129
+ let animationId = null;
130
+ let canvas, ctx;
131
+ let pathPoints = [];
132
+
133
+ class Arrow {
134
+ constructor(length, speed) {
135
+ this.length = length * 50;
136
+ this.speed = speed;
137
+ this.angle = 0;
138
  }
139
  }
140
 
141
+ function selectArrows(num) {
142
+ document.getElementById('startScreen').classList.remove('active');
143
+ document.getElementById('configScreen').classList.add('active');
144
+ document.getElementById('resetBtn').style.display = 'block';
145
+
146
+ const configsDiv = document.getElementById('arrowConfigs');
147
+ configsDiv.innerHTML = '';
148
+
149
+ for(let i = 0; i < num; i++) {
150
+ const speed = (Math.random() * 4 + 1).toFixed(1);
151
+ const length = (Math.random() * 4 + 1).toFixed(1);
152
+
153
+ const config = document.createElement('div');
154
+ config.className = 'arrow-config';
155
+ config.innerHTML = `
156
+ <h3>Arrow ${i + 1}</h3>
157
+ <div>
158
+ <label>Speed:</label>
159
+ <input type="number" min="0.1" max="5" step="0.1" value="${speed}" id="speed${i}">
160
+ </div>
161
+ <div>
162
+ <label>Length:</label>
163
+ <input type="number" min="0.1" max="5" step="0.1" value="${length}" id="length${i}">
164
+ </div>
165
+ `;
166
+ configsDiv.appendChild(config);
167
+ }
168
  }
169
 
170
+ function startAnimation() {
171
+ arrows = [];
172
+ const inputs = document.querySelectorAll('.arrow-config input');
173
+ for(let i = 0; i < inputs.length/2; i++) {
174
+ const speed = parseFloat(document.getElementById(`speed${i}`).value);
175
+ const length = parseFloat(document.getElementById(`length${i}`).value);
176
+ arrows.push(new Arrow(length, speed));
177
+ }
178
+
179
+ document.getElementById('configScreen').classList.remove('active');
180
+
181
+ canvas = document.getElementById('canvas');
182
+ canvas.style.display = 'block';
183
+ ctx = canvas.getContext('2d');
184
+
185
+ pathPoints = [];
186
+ if(animationId) cancelAnimationFrame(animationId);
187
+ animate();
188
  }
189
 
190
+ function animate() {
191
+ // Clear canvas
192
+ ctx.fillStyle = '#333';
193
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
194
+
195
+ // Start from center
196
+ let x = canvas.width / 2;
197
+ let y = canvas.height / 2;
198
+ let totalAngle = 0;
199
+
200
+ // Draw arrows
201
+ for(let i = 0; i < arrows.length; i++) {
202
+ const arrow = arrows[i];
203
+ arrow.angle += arrow.speed * 0.02;
204
+ totalAngle += arrow.angle;
205
+
206
+ // Draw arrow line
207
+ ctx.beginPath();
208
+ ctx.moveTo(x, y);
209
+ const endX = x + Math.cos(totalAngle) * arrow.length;
210
+ const endY = y + Math.sin(totalAngle) * arrow.length;
211
+ ctx.lineTo(endX, endY);
212
+ ctx.strokeStyle = '#4a90e2';
213
+ ctx.lineWidth = 3;
214
+ ctx.stroke();
215
+
216
+ // Draw joint
217
+ ctx.beginPath();
218
+ ctx.arc(x, y, 5, 0, Math.PI * 2);
219
+ ctx.fillStyle = '#2ecc71';
220
+ ctx.fill();
221
+
222
+ // Update start point for next arrow
223
+ x = endX;
224
+ y = endY;
225
+
226
+ // Store path point for last arrow
227
+ if(i === arrows.length - 1) {
228
+ pathPoints.push({x, y});
229
+ if(pathPoints.length > 200) pathPoints.shift();
230
  }
 
231
  }
232
+
233
+ // Draw path
234
+ if(pathPoints.length > 1) {
235
+ ctx.beginPath();
236
+ ctx.moveTo(pathPoints[0].x, pathPoints[0].y);
237
+ for(let i = 1; i < pathPoints.length; i++) {
238
+ const point = pathPoints[i];
239
+ ctx.lineTo(point.x, point.y);
240
+ }
241
+ ctx.strokeStyle = '#e74c3c';
242
+ ctx.lineWidth = 2;
243
+ ctx.stroke();
 
 
 
244
  }
245
+
246
+ animationId = requestAnimationFrame(animate);
247
+ }
248
 
249
+ function reset() {
250
+ if(animationId) {
251
+ cancelAnimationFrame(animationId);
252
+ animationId = null;
 
 
 
 
253
  }
254
+
255
+ arrows = [];
256
+ pathPoints = [];
257
+
258
+ document.getElementById('startScreen').classList.add('active');
259
+ document.getElementById('configScreen').classList.remove('active');
260
+ document.getElementById('canvas').style.display = 'none';
261
+ document.getElementById('resetBtn').style.display = 'none';
262
+
263
+ const configsDiv = document.getElementById('arrowConfigs');
264
+ configsDiv.innerHTML = '';
265
+ }
266
+
267
+ // Initialize
268
+ window.onload = () => {
269
+ canvas = document.getElementById('canvas');
270
+ ctx = canvas.getContext('2d');
271
+ };
272
  </script>
273
  </body>
274
  </html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script>