Hugging Face's logo

Spaces:
awacke1
/
HTML5-Javascript-3D-Breakout-Game
Running

App Files Community
awacke1 commited on
Commit
2affc78
·
1 Parent(s): 41150bb

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +37 -12
index.html CHANGED
@@ -1,21 +1,46 @@
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
- <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
  </head>
6
  <body>
7
- <a-scene background="color: #ECECEC">
8
- <a-entity id="camera" position="0 1.6 3">
9
- <a-camera></a-camera>
10
- </a-entity>
11
 
12
- <a-box id="paddle" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
13
- <a-sphere id="ball" position="0 1.25 -5" radius="0.25" color="#EF2D5E" shadow></a-sphere>
14
 
15
- <!-- Creating bricks -->
16
- <a-box id="brick1" position="-1 0.5 -6" rotation="0 0 0" color="#7BC8A4" shadow></a-box>
17
- <a-box id="brick2" position="0 0.5 -6" rotation="0 0 0" color="#7BC8A4" shadow></a-box>
18
- <a-box id="brick3" position="1 0.5 -6" rotation="0 0 0" color="#7BC8A4" shadow></a-box>
19
- </a-scene>
20
  </body>
21
  </html>
 
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
+ <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
5
+ <script>
6
+ // Registering a new component to move the paddle
7
+ AFRAME.registerComponent('follow-mouse', {
8
+ schema: {
9
+ speed: {type: 'number', default: 1}
10
+ },
11
+
12
+ tick: function() {
13
+ var paddle = this.el;
14
+ var rect = paddle.sceneEl.canvas.getBoundingClientRect();
15
+ var pos = paddle.getAttribute('position');
16
+
17
+ // Update paddle x position based on mouse x position
18
+ pos.x += ((this.data.x - rect.width / 2) / rect.width - pos.x) * this.data.speed;
19
+
20
+ paddle.setAttribute('position', pos);
21
+ },
22
+
23
+ events: {
24
+ mousemove: function (evt) {
25
+ this.data.x = evt.clientX;
26
+ }
27
+ }
28
+ });
29
+ </script>
30
  </head>
31
  <body>
32
+ <a-scene background="color: #ECECEC">
33
+ <a-entity id="camera" position="0 1.6 3">
34
+ <a-camera></a-camera>
35
+ </a-entity>
36
 
37
+ <a-box id="paddle" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow follow-mouse="speed: 0.1"></a-box>
38
+ <a-sphere id="ball" position="0 1.25 -5" radius="0.25" color="#EF2D5E" shadow></a-sphere>
39
 
40
+ <!-- Creating bricks -->
41
+ <a-box id="brick1" position="-1 0.5 -6" rotation="0 0 0" color="#7BC8A4" shadow></a-box>
42
+ <a-box id="brick2" position="0 0.5 -6" rotation="0 0 0" color="#7BC8A4" shadow></a-box>
43
+ <a-box id="brick3" position="1 0.5 -6" rotation="0 0 0" color="#7BC8A4" shadow></a-box>
44
+ </a-scene>
45
  </body>
46
  </html>