Hugging Face's logo

Spaces:
awacke1
/
VR-Aframe-3D-With-Claude-35-Sonnet
Running

App Files Community
1
awacke1 commited on
Commit
a1053b7
•
1 Parent(s): a579c53

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +283 -18
index.html CHANGED
@@ -1,19 +1,284 @@
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>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>A-Frame 3D Space Shooter Game with Bar Graph Score</title>
6
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
7
+ </head>
8
+ <body>
9
+ <a-scene fog="type: linear; color: #87CEEB; near: 0; far: 50">
10
+ <a-sky color="#87CEEB"></a-sky>
11
+ <a-entity id="player" position="0 1.6 0">
12
+ <a-entity camera look-controls wasd-controls>
13
+ <a-entity id="cursor" cursor="fuse: false;" position="0 0 -1"
14
+ geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
15
+ material="color: white; shader: flat"
16
+ raycaster="objects: .enemy, .spawner"></a-entity>
17
+ </a-entity>
18
+ </a-entity>
19
+ <a-entity id="scoreBar" position="0 3 -5">
20
+ <a-box width="1" height="0.1" depth="0.1" color="#444444"></a-box>
21
+ <a-box id="scoreIndicator" width="1" height="0.1" depth="0.1" color="#FFA500" scale="0 1 1"></a-box>
22
+ <a-text value="Score" position="0 0.1 0" align="center" color="white"></a-text>
23
+ </a-entity>
24
+ <a-entity id="healthDisplay" position="0 2.5 -5" scale="5 5 5"></a-entity>
25
+ <a-entity id="unitCounters" position="-0.8 0.6 -1.5" scale="0.5 0.5 0.5"></a-entity>
26
+ </a-scene>
27
+
28
+ <script>
29
+ const scene = document.querySelector('a-scene');
30
+ const player = document.querySelector('#player');
31
+ const scoreIndicator = document.querySelector('#scoreIndicator');
32
+ const healthDisplay = document.querySelector('#healthDisplay');
33
+ const unitCounters = document.querySelector('#unitCounters');
34
+ let score = 0;
35
+ let health = 100;
36
+ let enemies = new Set();
37
+ let spawners = new Set();
38
+ let explosionCount = 0;
39
+ const maxScore = 1000; // Maximum score for full bar
40
+
41
+ function updateScoreDisplay() {
42
+ const scale = Math.min(score / maxScore, 1);
43
+ scoreIndicator.setAttribute('scale', `${scale} 1 1`);
44
+ }
45
+
46
+ function updateHealthDisplay() {
47
+ healthDisplay.setAttribute('text', {
48
+ value: `Health: ${health}`,
49
+ color: 'white',
50
+ align: 'center'
51
+ });
52
+ }
53
+
54
+ function updateUnitCounters() {
55
+ unitCounters.innerHTML = '';
56
+ const counters = [
57
+ {name: 'Enemies', count: enemies.size},
58
+ {name: 'Spawners', count: spawners.size},
59
+ {name: 'Explosions', count: explosionCount}
60
+ ];
61
+
62
+ counters.forEach((counter, index) => {
63
+ const text = document.createElement('a-text');
64
+ text.setAttribute('value', `${counter.name}: ${counter.count}`);
65
+ text.setAttribute('color', 'white');
66
+ text.setAttribute('position', `0 ${-index * 0.2} 0`);
67
+ unitCounters.appendChild(text);
68
+ });
69
+ }
70
+
71
+ function createSpawner() {
72
+ const spawner = document.createElement('a-entity');
73
+ spawner.setAttribute('class', 'spawner');
74
+ spawner.setAttribute('geometry', {primitive: 'box', width: 2, height: 2, depth: 2});
75
+ spawner.setAttribute('material', {color: '#00FF00', metalness: 0.7, roughness: 0.3});
76
+
77
+ const angle = Math.random() * Math.PI * 2;
78
+ const distance = 30;
79
+ const position = new THREE.Vector3(
80
+ Math.cos(angle) * distance,
81
+ Math.random() * 10 - 5,
82
+ Math.sin(angle) * distance
83
+ );
84
+ spawner.setAttribute('position', position);
85
+
86
+ spawner.health = 100;
87
+
88
+ scene.appendChild(spawner);
89
+ spawners.add(spawner);
90
+
91
+ // Spawner behavior
92
+ setInterval(() => {
93
+ if (spawner.parentNode && spawner.health > 0) {
94
+ createEnemy(spawner.object3D.position);
95
+ }
96
+ }, 5000);
97
+
98
+ updateUnitCounters();
99
+ }
100
+
101
+ function createEnemy(spawnPosition) {
102
+ if (enemies.size >= 30) return; // Limit number of enemies
103
+
104
+ const enemy = document.createElement('a-entity');
105
+ enemy.setAttribute('class', 'enemy');
106
+ enemy.setAttribute('geometry', {primitive: 'sphere', radius: 0.5});
107
+ enemy.setAttribute('material', {color: '#FF0000', metalness: 0.7, roughness: 0.3});
108
+
109
+ const position = new THREE.Vector3(
110
+ spawnPosition.x + (Math.random() - 0.5) * 2,
111
+ spawnPosition.y + (Math.random() - 0.5) * 2,
112
+ spawnPosition.z + (Math.random() - 0.5) * 2
113
+ );
114
+ enemy.setAttribute('position', position);
115
+
116
+ const particleSystem = document.createElement('a-entity');
117
+ particleSystem.setAttribute('particle-system', {
118
+ preset: 'dust',
119
+ particleCount: 100,
120
+ color: '#FF0000, #FF5500',
121
+ size: 0.1,
122
+ dur: 1000,
123
+ accelerationValue: '0 -9.8 0'
124
+ });
125
+ enemy.appendChild(particleSystem);
126
+
127
+ enemy.creationTime = Date.now();
128
+
129
+ scene.appendChild(enemy);
130
+ enemies.add(enemy);
131
+
132
+ // Enemy firing behavior
133
+ enemy.setAttribute('animation__movement', {
134
+ property: 'position',
135
+ to: '0 1.6 0',
136
+ dur: 15000,
137
+ easing: 'linear'
138
+ });
139
+
140
+ setInterval(() => {
141
+ if (enemy.parentNode) {
142
+ fireLaser(enemy, '#FF0000');
143
+ }
144
+ }, 2000);
145
+
146
+ updateUnitCounters();
147
+ }
148
+
149
+ function fireLaser(source, color) {
150
+ const laser = document.createElement('a-entity');
151
+ laser.setAttribute('geometry', {primitive: 'cylinder', radius: 0.05, height: 100});
152
+ laser.setAttribute('material', {color: color, opacity: 0.7});
153
+
154
+ const sourcePosition = source.object3D.position;
155
+ const targetPosition = player.object3D.position;
156
+ const direction = new THREE.Vector3().subVectors(targetPosition, sourcePosition).normalize();
157
+
158
+ laser.setAttribute('position', sourcePosition);
159
+ laser.object3D.lookAt(targetPosition);
160
+
161
+ scene.appendChild(laser);
162
+
163
+ laser.setAttribute('animation', {
164
+ property: 'scale',
165
+ to: '1 0.01 1',
166
+ dur: 1000,
167
+ easing: 'linear'
168
+ });
169
+
170
+ setTimeout(() => {
171
+ scene.removeChild(laser);
172
+ }, 1000);
173
+
174
+ // Check for enemy or spawner hit
175
+ if (source === player) {
176
+ const targets = document.querySelectorAll('.enemy, .spawner');
177
+ targets.forEach(target => {
178
+ const targetPos = target.object3D.position;
179
+ const distance = sourcePosition.distanceTo(targetPos);
180
+ if (distance < 2) {
181
+ if (target.classList.contains('enemy')) {
182
+ createExplosion(targetPos);
183
+ scene.removeChild(target);
184
+ enemies.delete(target);
185
+ score += 10;
186
+ } else if (target.classList.contains('spawner')) {
187
+ target.health -= 20;
188
+ if (target.health <= 0) {
189
+ createExplosion(targetPos);
190
+ scene.removeChild(target);
191
+ spawners.delete(target);
192
+ score += 50;
193
+ }
194
+ }
195
+ updateScoreDisplay();
196
+ updateUnitCounters();
197
+ }
198
+ });
199
+ }
200
+
201
+ // Check for player hit
202
+ if (source !== player && Math.random() < 0.1) { // 10% chance to hit player
203
+ health = Math.max(0, health - 10);
204
+ updateHealthDisplay();
205
+ }
206
+ }
207
+
208
+ function createExplosion(position) {
209
+ const explosion = document.createElement('a-entity');
210
+ explosion.setAttribute('position', position);
211
+
212
+ for (let i = 0; i < 20; i++) {
213
+ const particle = document.createElement('a-sphere');
214
+ particle.setAttribute('radius', 0.1);
215
+ particle.setAttribute('material', {color: '#FFA500'});
216
+
217
+ const x = (Math.random() - 0.5) * 2;
218
+ const y = (Math.random() - 0.5) * 2;
219
+ const z = (Math.random() - 0.5) * 2;
220
+
221
+ particle.setAttribute('animation', {
222
+ property: 'position',
223
+ to: `${x} ${y} ${z}`,
224
+ dur: 1000,
225
+ easing: 'easeOutQuad'
226
+ });
227
+
228
+ particle.setAttribute('animation__opacity', {
229
+ property: 'material.opacity',
230
+ from: 1,
231
+ to: 0,
232
+ dur: 1000,
233
+ easing: 'easeOutQuad'
234
+ });
235
+
236
+ explosion.appendChild(particle);
237
+ }
238
+
239
+ scene.appendChild(explosion);
240
+
241
+ setTimeout(() => {
242
+ scene.removeChild(explosion);
243
+ }, 1000);
244
+
245
+ explosionCount++;
246
+ updateUnitCounters();
247
+ }
248
+
249
+ function updateGame() {
250
+ const now = Date.now();
251
+ enemies.forEach(enemy => {
252
+ if (now - enemy.creationTime > 20000) { // Remove after 20 seconds
253
+ scene.removeChild(enemy);
254
+ enemies.delete(enemy);
255
+ updateUnitCounters();
256
+ }
257
+ });
258
+
259
+ while (spawners.size < 5) {
260
+ createSpawner();
261
+ }
262
+ }
263
+
264
+ document.addEventListener('keydown', (event) => {
265
+ if (event.code === 'Space') {
266
+ fireLaser(player, '#00FF00');
267
+ }
268
+ });
269
+
270
+ scene.addEventListener('click', () => {
271
+ fireLaser(player, '#00FF00');
272
+ });
273
+
274
+ updateHealthDisplay();
275
+ updateUnitCounters();
276
+
277
+ setInterval(() => {
278
+ updateGame();
279
+ score++;
280
+ updateScoreDisplay();
281
+ }, 1000);
282
+ </script>
283
+ </body>
284
+ </html>