-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
177 lines (160 loc) · 9.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!--
Created by Alvin Wan (alvinwan.com)
* ocean animation from Don Mccurdy
-->
<!DOCTYPE html>
<html>
<head>
<title>Ergo | Endless Runner Game in Virtual Reality</title>
<script src="./assets/0.7.0/aframe.min.js"></script>
<script src="./assets/ocean.js"></script>
<script src="./assets/runner.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alvinwan/aframe-low-poly@0.0.2/dist/aframe-low-poly.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
<script src="http://mirrorvr.alvinwan.com/mirrorvr.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
<link href="./assets/style.css" rel="stylesheet" />
</head>
<body>
<div class="notification-container">
<div class="notification-desktop">
<p>This is the default room. If any mobile user joins, your will lose control and this app will mirror that mobile user's screen.
<a onClick="location.reload();" href="#" class="notification-button">Click to join a random room.</a>
<a onClick="hideWarning();" class="notification-close"><i class="fas fa-times"></i></a></p>
</div>
</div>
<a-scene fog="type: linear; color: #a3d0ed; near:5; far:20">
<a-sky color="#a3d0ed"></a-sky>
<!-- Mixins -->
<a-assets>
<a-mixin id="foliage" geometry="
primitive: cone;
segments-height: 1;
segments-radial:4;
radius-bottom:0.3;"
material="color:white;flat-shading: true;"></a-mixin>
<a-mixin id="trunk" geometry="
primitive: box;
height:0.5;
width:0.1;
depth:0.1;"
material="color:white;"></a-mixin>
<a-mixin id="title" text="
font:exo2bold;
height:40;
width:40;
opacity:0.75;
anchor:center;
align:center;"></a-mixin>
<a-mixin id="copy" text="
font:exo2bold;
height:5;
width:5;
opacity:0.75;
anchor:center;
align:center;"></a-mixin>
<a-mixin id="heading" text="
font:exo2bold;
height:10;
width:10;
opacity:0.75;
anchor:center;
align:center;"></a-mixin>
<a-mixin id="text" text="
font:exo2bold;
anchor:center;
align:center;"></a-mixin>
</a-assets>
<!-- Lights! -->
<a-entity light="
type: directional;
castShadow: true;
intensity: 0.4;
color: #D0EAF9;"
position="5 3 1"></a-entity>
<a-light intensity="0.8" type="ambient" position="1 1 1" color="#B4C5EC"></a-light>
<!-- Camera! -->
<a-camera camera-listener onload-init-mirrorvr wasd-controls-enabled="false" lane-controls position="0 0 2.5">
<a-entity id="cursor-mobile" cursor="fuse: true; fuseTimeout: 250"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: white; shader: flat"
scale="0.5 0.5 0.5"
raycaster="far: 50; interval: 1000; objects: .clickable">
<a-animation begin="fusing" easing="ease-in" attribute="scale"
fill="backwards" from="1 1 1" to="0.2 0.2 0.2" dur="250"></a-animation>
</a-camera>
<!-- Action! -->
<lp-cone class="iceberg" segments-radial="5" segments-height="3" height="1" amplitude-variance="0.25" radius-top="0.15" radius-bottom="0.5" position="3 -0.1 -1.5">
<a-animation attribute="rotation" from="-5 0 0" to="5 0 0" repeat="indefinite" direction="alternate"></a-animation>
<a-animation attribute="position" from="3 -0.2 -1.5" to="4 -0.2 -2.5" repeat="indefinite" direction="alternate" dur="12000" easing="linear"></a-animation>
</lp-cone>
<lp-cone class="iceberg" segments-radial="7" segments-height="3" height="0.5" amplitude="0.12" radius-top="0.25" radius-bottom="0.35" position="-3 -0.1 -0.5">
<a-animation attribute="rotation" from="0 0 -5" to="5 0 0" repeat="indefinite" direction="alternate" dur="1500"></a-animation>
<a-animation attribute="position" from="-4 -0.2 -0.5" to="-2 -0.2 -0.5" repeat="indefinite" direction="alternate" dur="15000" easing="linear"></a-animation>
</lp-cone>
<lp-cone class="iceberg" segments-radial="6" segments-height="2" height="0.5" amplitude="0.1" radius-top="0.25" radius-bottom="0.25" position="-5 -0.2 -3.5">
<a-animation attribute="rotation" from="5 0 -5" to="5 0 0" repeat="indefinite" direction="alternate" dur="800"></a-animation>
<a-animation attribute="position" from="-3 -0.2 -3.5" to="-5 -0.2 -5.5" repeat="indefinite" direction="alternate" dur="15000" easing="linear"></a-animation>
</lp-cone>
<a-ocean depth="50" width="50" amplitude="0" amplitude-variance="0.1" speed="1.5" speed-variance="1" opacity="1" density="50"></a-ocean>
<a-ocean depth="50" width="50" opacity="0.5" amplitude="0" amplitude-variance="0.15" speed="1.5" speed-variance="1" density="50"></a-ocean>
<lp-cone scale="2 2 2" shadow position="0 -3.5 -1.5" rotation="90 0 0" radius-top="1.9" radius-bottom="1.9" segments-radial="20" segments-height="20" amplitude="0.05" amplitude-variance="0.05" height="20" emissive="#005DED" emissive-intensity="0.1">
<a-entity id="tree-container" position="0 .5 -1.5" rotation="-90 0 0">
<!-- Tell user to turn around if facing the wrong way! -->
<a-text value="Turn around!" mixin="title" rotation="0 180 0" position="0 1.1 10"></a-text>
<a-text value="Turn left" mixin="title" rotation="0 -90 0" position="8 1.1 1.5"></a-text>
<a-text value="Turn right" mixin="title" rotation="0 90 0" position="-8 1.1 1.5"></a-text>
<a-text value="Look up" mixin="text" height="2" width="2" color="#333" rotation="-90 0 0" position="0 0.5 1.5"></a-text>
<a-entity data-tree-position-index="1" id="template-tree-center" class="tree tree-center" shadow scale="0.3 0.3 0.3" position="0 0.6 0">
<a-entity mixin="foliage"></a-entity>
<a-entity mixin="trunk" position="0 -0.5 0"></a-entity>
<a-animation attribute="position" ease="linear" from="0 0.6 -7" to="0 0.6 1.5" dur="5000"></a-animation>
</a-entity>
<a-entity data-tree-position-index="0" id="template-tree-left" class="tree tree-left" shadow scale="0.3 0.3 0.3" position="-0.5 0.55 0">
<a-entity mixin="foliage"></a-entity>
<a-entity mixin="trunk" position="0 -0.5 0"></a-entity>
<a-animation attribute="position" ease="linear" from="-0.5 0.55 -7" to="-0.5 0.55 1.5" dur="5000"></a-animation>
</a-entity>
<a-entity data-tree-position-index="2" id="template-tree-right" class="tree" shadow scale="0.3 0.3 0.3" position="0.5 0.55 0">
<a-entity mixin="foliage"></a-entity>
<a-entity mixin="trunk" position="0 -0.5 0"></a-entity>
<a-animation attribute="position" ease="linear" from="0.5 0.55 -7" to="0.5 0.55 1.5" dur="5000"></a-animation>
</a-entity>
<a-text id="score" value="" mixin="text" height="40" width="40" position="0 1.2 -3" opacity="0.75"></a-text>
<a-entity id="menu-container">
<a-entity id="start-menu" position="0 1.1 -3">
<a-text id="start-copy-desktop" value="Hit any key to start. Move left and right to avoid the trees!" mixin="copy" position="0 1 0"></a-text>
<a-entity id="start-copy-mobile" position="0 1 0">
<a-text value="Turn left and right to move your player, and avoid the trees!" mixin="copy"></a-text>
<a-text value="Start" position="0 0.75 0" mixin="heading"></a-text>
<a-box id="start-button" position="0 0.65 -0.05" width="1.5" height="0.6" depth="0.1"></a-box>
</a-entity>
<a-text value="ERGO" mixin="title"></a-text>
</a-entity>
<a-entity id="game-over" position="0 1.1 -3">
<a-text value="?" mixin="heading" id="game-score" position="0 1.7 0"></a-text>
<a-text value="Score" mixin="copy" position="0 1.2 0"></a-text>
<a-text id="game-over-copy-desktop" value="Hit any key to play again." mixin="copy" position="0 0.8 0"></a-text>
<a-entity id="game-over-copy-mobile">
<a-text value="Restart" mixin="heading" position="0 0.7 0"></a-text>
<a-box id="restart-button" position="0 0.6 -0.05" width="2" height="0.6" depth="0.1"></a-box>
</a-entity>
<a-text value="Game Over" mixin="title"></a-text>
</a-entity>
</a-entity>
<a-entity id="player" player>
<a-sphere radius="0.05">
<a-animation repeat="indefinite" direction="alternate" attribute="position" ease="ease-in-out" from="0 0.5 0.6" to="0 0.525 0.6"></a-animation>
<a-animation repeat="indefinite" direction="alternate" attribute="radius" from="0.05" to="0.055" dur="1500"></a-animation>
<a-light type="point" intensity="0.35" color="#FF440C">
<a-animation repeat="indefinite" direction="alternate-reverse" attribute="intensity" ease="ease-in-out" from="0.35" to="0.5"></a-animation>
</a-light>
</a-sphere>
</a-entity>
</a-entity>
</lp-cone>
</a-scene>
</body>
</html>