Hugging Face's logo

Spaces:
awacke1
/
HTML5.Aframe.Frogger.Test
Running

App Files Community
awacke1 commited on
Commit
0f1b497
·
1 Parent(s): 7194eb0

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +123 -17
index.html CHANGED
@@ -1,19 +1,125 @@
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>Frogger Game</title>
6
+ <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
7
+ </head>
8
+ <body>
9
+ <a-scene>
10
+ <!-- Set the background color to blue -->
11
+ <a-sky color="#3498db"></a-sky>
12
+
13
+ <!-- Create a camera -->
14
+ <a-entity camera position="0 1.6 0" wasd-controls-enabled="false" qweasdzc-controls="enabled: true"></a-entity>
15
+
16
+ <!-- Add a ground plane to the scene -->
17
+ <a-plane position="0 0 0" rotation="-90 0 0" width="100" height="100" color="#4CAF50"></a-plane>
18
+
19
+ <!-- Add a parallax scrolling background -->
20
+ <a-plane position="0 0 -10" rotation="-90 0 0" width="100" height="100" src="background.png" material="repeat: 10 10"></a-plane>
21
+
22
+ <!-- Add a player model -->
23
+ <a-entity id="player" position="0 0.5 -2" scale="0.5 0.5 0.5" gltf-model="frog.glb" animation-mixer></a-entity>
24
+
25
+ <!-- Add some obstacles -->
26
+ <a-box position="0 0.5 2" scale="1 1 1" color="#e74c3c"></a-box>
27
+ <a-cone position="2 0.5 4" scale="1 1 1" color="#f1c40f"></a-cone>
28
+ <a-cylinder position="-2 0.5 6" scale="1 1 1" color="#3498db"></a-cylinder>
29
+
30
+ <!-- Add some lighting to the scene -->
31
+ <a-light type="point" position="0 5 0" color="#ffffff"></a-light>
32
+ <a-light type="ambient" color="#ffffff"></a-light>
33
+ </a-scene>
34
+
35
+ <script>
36
+ // Define the QWEASDZXC controls
37
+ AFRAME.registerComponent('qweasdzc-controls', {
38
+ schema: {
39
+ enabled: { default: false }
40
+ },
41
+
42
+ init: function () {
43
+ var el = this.el;
44
+
45
+ document.addEventListener('keydown', function (evt) {
46
+ if (!el.components['qweasdzc-controls'].data.enabled) return;
47
+ switch (evt.key) {
48
+ case 'q':
49
+ el.setAttribute('wasd-controls', 'acceleration', 500);
50
+ el.setAttribute('wasd-controls', 'rotationAcceleration', 5);
51
+ el.setAttribute('wasd-controls', 'rotationSensitivity', 5);
52
+ el.setAttribute('wasd-controls', 'wsAxis', '-z');
53
+ el.setAttribute('wasd-controls', 'adAxis', '-x');
54
+ break;
55
+ case 'w':
56
+ el.setAttribute('wasd-controls', 'acceleration', 1000);
57
+ el.setAttribute('wasd-controls', 'wsAxis', '-z');
58
+ break;
59
+ case 'e':
60
+ el.setAttribute('wasd-controls', 'acceleration', 500);
61
+ el.setAttribute('wasd-controls', 'rotationAcceleration', -5);
62
+ el.setAttribute('wasd-controls', 'rotationSensitivity', 5);
63
+ el.setAttribute('wasd-controls', 'wsAxis', '-z');
64
+ el.setAttribute('wasd-controls', 'adAxis', 'x');
65
+ break;
66
+ case 'a':
67
+ el.setAttribute('wasd-controls', 'acceleration', 1000);
68
+ el.setAttribute('wasd-controls', 'adAxis', '-x');
69
+ break;
70
+ case 's':
71
+ el.setAttribute('wasd-controls', 'acceleration', -1000);
72
+ el.setAttribute('wasd-controls', 'wsAxis', 'z');
73
+ break;
74
+ case 'd':
75
+ el.setAttribute('wasd-controls', 'acceleration', 1000);
76
+ el.setAttribute('wasd-controls', 'adAxis', 'x');
77
+ break;
78
+ case 'z':
79
+ el.setAttribute('wasd-controls', 'acceleration', 500);
80
+ el.setAttribute('wasd-controls', 'rotationAcceleration', 5);
81
+ el.setAttribute('wasd-controls', 'rotationSensitivity', -5);
82
+ el.setAttribute('wasd-controls', 'wsAxis', 'z');
83
+ el.setAttribute('wasd-controls', 'adAxis', '-x');
84
+ break;
85
+ case 'x':
86
+ el.setAttribute('wasd-controls', 'acceleration', 1000);
87
+ el.setAttribute('wasd-controls', 'wsAxis', 'z');
88
+ break;
89
+ case 'c':
90
+ el.setAttribute('wasd-controls', 'acceleration', 500);
91
+ el.setAttribute('wasd-controls', 'rotationAcceleration', -5);
92
+ el.setAttribute('wasd-controls', 'rotationSensitivity', -5);
93
+ el.setAttribute('wasd-controls', 'wsAxis', 'z');
94
+ el.setAttribute('wasd-controls', 'adAxis', 'x');
95
+ break;
96
+ default:
97
+ break;
98
+ }
99
+ });
100
+ document.addEventListener('keyup', function (evt) {
101
+ if (!el.components['qweasdzc-controls'].data.enabled) return;
102
+ switch (evt.key) {
103
+ case 'q':
104
+ case 'w':
105
+ case 'e':
106
+ case 'a':
107
+ case 's':
108
+ case 'd':
109
+ case 'z':
110
+ case 'x':
111
+ case 'c':
112
+ el.setAttribute('wasd-controls', 'acceleration', 0);
113
+ el.setAttribute('wasd-controls', 'rotationAcceleration', 0);
114
+ el.setAttribute('wasd-controls', 'rotationSensitivity', 0);
115
+ break;
116
+ default:
117
+ break;
118
+ }
119
+ });
120
+ }
121
+ });
122
+
123
+ </script>
124
+ </body>
125
+ </html>