Hugging Face's logo

Spaces:
awacke1
/
Aframe-3D-Breakout-with-Claude3.5-Sonnet
Running

App Files Community
awacke1 commited on
Commit
2282144
·
verified ·
1 Parent(s): 99068ab

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +243 -18
index.html CHANGED
@@ -1,19 +1,244 @@
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 Breakout Shooter Game (Optimized)</title>
6
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
7
+ <style>
8
+ #hud {
9
+ position: fixed;
10
+ top: 10px;
11
+ left: 10px;
12
+ color: white;
13
+ font-family: Arial, sans-serif;
14
+ font-size: 16px;
15
+ z-index: 999;
16
+ }
17
+ #instructions {
18
+ position: fixed;
19
+ bottom: 10px;
20
+ left: 50%;
21
+ transform: translateX(-50%);
22
+ color: white;
23
+ font-family: Arial, sans-serif;
24
+ font-size: 14px;
25
+ text-align: center;
26
+ z-index: 999;
27
+ }
28
+ </style>
29
+ </head>
30
+ <body>
31
+ <div id="hud">
32
+ <div>Score: <span id="score">0</span></div>
33
+ <div>Lives: <span id="lives">3</span></div>
34
+ </div>
35
+ <div id="instructions">
36
+ Move mouse to control paddle | Click to shoot | Press spacebar to launch new ball
37
+ </div>
38
+
39
+ <a-scene background="color: #87CEEB">
40
+ <a-entity id="rig" position="0 0 15">
41
+ <a-camera look-controls="enabled: false">
42
+ <a-entity cursor="rayOrigin: mouse"
43
+ raycaster="objects: .collidable"
44
+ position="0 0 -1"></a-entity>
45
+ </a-camera>
46
+ </a-entity>
47
+
48
+ <a-entity id="gameElements">
49
+ <a-entity id="paddle" class="collidable" geometry="primitive: box; width: 2; height: 0.5; depth: 0.5"
50
+ material="color: #4CC3D9" position="0 -6 0"></a-entity>
51
+
52
+ <a-entity id="balls"></a-entity>
53
+ <a-entity id="bullets"></a-entity>
54
+ <a-entity id="blocks"></a-entity>
55
+ </a-entity>
56
+
57
+ <a-plane position="0 0 -0.5" rotation="-90 0 0" width="20" height="20" color="#7BC8A4"></a-plane>
58
+ <a-plane position="0 0 0" rotation="0 0 0" width="20" height="20" color="#7BC8A4" opacity="0.2"></a-plane>
59
+ <a-plane position="0 10 0" rotation="180 0 0" width="20" height="20" color="#7BC8A4" opacity="0.2"></a-plane>
60
+ </a-scene>
61
+
62
+ <script>
63
+ let scene, paddle, ballsContainer, bulletsContainer, blocksContainer, scoreElement, livesElement;
64
+ let score = 0;
65
+ let lives = 3;
66
+ let balls = [];
67
+ let bullets = [];
68
+ let gameStarted = false;
69
+
70
+ function init() {
71
+ scene = document.querySelector('a-scene');
72
+ paddle = document.querySelector('#paddle');
73
+ ballsContainer = document.querySelector('#balls');
74
+ bulletsContainer = document.querySelector('#bullets');
75
+ blocksContainer = document.querySelector('#blocks');
76
+ scoreElement = document.getElementById('score');
77
+ livesElement = document.getElementById('lives');
78
+
79
+ createBlocks();
80
+ createBall();
81
+
82
+ document.addEventListener('mousemove', movePaddle);
83
+ document.addEventListener('click', shootBullet);
84
+ document.addEventListener('keydown', startGame);
85
+
86
+ requestAnimationFrame(update);
87
+ }
88
+
89
+ function createBlocks() {
90
+ const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF'];
91
+ for (let row = 0; row < 5; row++) {
92
+ for (let col = 0; col < 8; col++) {
93
+ const block = document.createElement('a-box');
94
+ block.setAttribute('class', 'block collidable');
95
+ block.setAttribute('position', {x: -7 + col * 2, y: 6 - row, z: 0});
96
+ block.setAttribute('width', '1.8');
97
+ block.setAttribute('height', '0.8');
98
+ block.setAttribute('depth', '0.5');
99
+ block.setAttribute('color', colors[row]);
100
+ blocksContainer.appendChild(block);
101
+ }
102
+ }
103
+ }
104
+
105
+ function createBall() {
106
+ const ball = document.createElement('a-sphere');
107
+ ball.setAttribute('class', 'ball collidable');
108
+ ball.setAttribute('radius', '0.2');
109
+ ball.setAttribute('material', 'color: #EF2D5E');
110
+ ball.setAttribute('position', {x: 0, y: -5, z: 0});
111
+ ball.velocity = new THREE.Vector3(0.05, 0.05, 0);
112
+ ballsContainer.appendChild(ball);
113
+ balls.push(ball);
114
+ }
115
+
116
+ function shootBullet() {
117
+ const bullet = document.createElement('a-sphere');
118
+ bullet.setAttribute('class', 'bullet collidable');
119
+ bullet.setAttribute('radius', '0.1');
120
+ bullet.setAttribute('material', 'color: #FFFFFF');
121
+ const paddlePos = paddle.getAttribute('position');
122
+ bullet.setAttribute('position', {x: paddlePos.x, y: paddlePos.y + 0.5, z: 0});
123
+ bullet.velocity = new THREE.Vector3(0, 0.2, 0);
124
+ bulletsContainer.appendChild(bullet);
125
+ bullets.push(bullet);
126
+ }
127
+
128
+ function updateScore() {
129
+ score += 10;
130
+ scoreElement.textContent = score;
131
+ }
132
+
133
+ function updateLives() {
134
+ lives--;
135
+ livesElement.textContent = lives;
136
+ if (lives <= 0) {
137
+ endGame();
138
+ }
139
+ }
140
+
141
+ function endGame() {
142
+ alert('Game Over! Your score: ' + score);
143
+ location.reload();
144
+ }
145
+
146
+ function movePaddle(event) {
147
+ const paddlePos = paddle.getAttribute('position');
148
+ paddlePos.x = (event.clientX / window.innerWidth) * 16 - 8;
149
+ paddlePos.x = Math.max(-8, Math.min(8, paddlePos.x));
150
+ paddle.setAttribute('position', paddlePos);
151
+ }
152
+
153
+ function startGame(e) {
154
+ if (!gameStarted && e.code === 'Space') {
155
+ gameStarted = true;
156
+ createBall();
157
+ }
158
+ }
159
+
160
+ function update() {
161
+ // Update ball positions
162
+ balls.forEach((ball, index) => {
163
+ const ballPos = ball.getAttribute('position');
164
+ ballPos.x += ball.velocity.x;
165
+ ballPos.y += ball.velocity.y;
166
+
167
+ // Wall collisions
168
+ if (ballPos.x <= -9.8 || ballPos.x >= 9.8) ball.velocity.x *= -1;
169
+ if (ballPos.y >= 9.8) ball.velocity.y *= -1;
170
+
171
+ // Paddle collision
172
+ const paddlePos = paddle.getAttribute('position');
173
+ if (ballPos.y <= paddlePos.y + 0.5 && ballPos.y >= paddlePos.y &&
174
+ ballPos.x >= paddlePos.x - 1 && ballPos.x <= paddlePos.x + 1) {
175
+ ball.velocity.y *= -1;
176
+ ball.velocity.x += (ballPos.x - paddlePos.x) / 5;
177
+ }
178
+
179
+ // Block collisions
180
+ const blocks = document.querySelectorAll('.block');
181
+ blocks.forEach(block => {
182
+ const blockPos = block.getAttribute('position');
183
+ if (ballPos.x >= blockPos.x - 1 && ballPos.x <= blockPos.x + 1 &&
184
+ ballPos.y >= blockPos.y - 0.5 && ballPos.y <= blockPos.y + 0.5) {
185
+ blocksContainer.removeChild(block);
186
+ ball.velocity.y *= -1;
187
+ updateScore();
188
+ }
189
+ });
190
+
191
+ // Check if ball is out of bounds
192
+ if (ballPos.y < -10) {
193
+ ballsContainer.removeChild(ball);
194
+ balls.splice(index, 1);
195
+ if (balls.length === 0) {
196
+ updateLives();
197
+ if (lives > 0) createBall();
198
+ }
199
+ } else {
200
+ ball.setAttribute('position', ballPos);
201
+ }
202
+ });
203
+
204
+ // Update bullet positions
205
+ bullets.forEach((bullet, index) => {
206
+ const bulletPos = bullet.getAttribute('position');
207
+ bulletPos.y += bullet.velocity.y;
208
+
209
+ // Check for collisions with blocks
210
+ const blocks = document.querySelectorAll('.block');
211
+ blocks.forEach(block => {
212
+ const blockPos = block.getAttribute('position');
213
+ if (bulletPos.x >= blockPos.x - 1 && bulletPos.x <= blockPos.x + 1 &&
214
+ bulletPos.y >= blockPos.y - 0.5 && bulletPos.y <= blockPos.y + 0.5) {
215
+ blocksContainer.removeChild(block);
216
+ bulletsContainer.removeChild(bullet);
217
+ bullets.splice(index, 1);
218
+ updateScore();
219
+ }
220
+ });
221
+
222
+ // Remove bullet if it goes out of bounds
223
+ if (bulletPos.y > 10) {
224
+ bulletsContainer.removeChild(bullet);
225
+ bullets.splice(index, 1);
226
+ } else {
227
+ bullet.setAttribute('position', bulletPos);
228
+ }
229
+ });
230
+
231
+ // Check win condition
232
+ if (document.querySelectorAll('.block').length === 0) {
233
+ alert('Congratulations! You won! Your score: ' + score);
234
+ location.reload();
235
+ }
236
+
237
+ requestAnimationFrame(update);
238
+ }
239
+
240
+ // Wait for the scene to load before initializing the game
241
+ document.querySelector('a-scene').addEventListener('loaded', init);
242
+ </script>
243
+ </body>
244
+ </html>