-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathspaceship.html
80 lines (66 loc) · 2.51 KB
/
spaceship.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flying!!</title>
<meta name="description" content="Flying! - A-Frame">
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-template-component@^3.1.1/dist/aframe-template-component.min.js"></script>
<!-- my scripts -->
<script src="./components/randomize.js"></script>
<script src="./components/fly.js"></script>
<script src="./components/projectile.js"></script>
</head>
<body>
<a-scene stats>
<a-assets>
<img id="grid" src="https://img.gs/bbdkhfbzkk/stretch/https://i.imgur.com/25P1geh.png" />
<img id="sky" src="./images/space.jpg"/>
<img id="enemy-alien" src="./images/alien.svg" />
<!-- Generate randomly placed enemies -->
<script id="enemies" type="text/x-nunjucks-template">
{% for i in range(0,10) %}
<a-image class="enemy"
src="#enemy-alien"
random-position="min: -20 0 0; max: 20 20 -400"
transparent="true"
scale="5 5 3">
// collision handler animation
<a-animation attribute="opacity" begin="collider-hit" dur="400" ease="linear" from="1" to="0"></a-animation>
</a-image>
{% endfor %}
</script>
<!-- Laser -->
<a-mixin id="laser"
geometry="primitive: cylinder; radius: 0.05; height: 1;"
material="color: blue; metalness: 0.2; roughness: 0.3; transparent: true;"
rotation="90 0 0"
projectile="speed: 0.7"
collider="target: .enemy"></a-mixin>
</a-assets>
<a-sky src="#sky" rotation="0 -90 0"></a-sky>
<a-entity template="src: #enemies"></a-entity>
<a-box id="floor"
position="0 0 0"
color="yellow"
scale="10 0.2 10"></a-box>
<a-plane material="src: #grid; repeat: 20 80; transparent: true;
metalness:0.6; roughness: 0.4"
width="100"
height="400"
position="0 -2 -200"
rotation="-90 0 0"></a-plane>
<a-box id="ship"
height="0.2"
position="0 0.6 -2"
color="grey"
lock-to-camera></a-box>
<a-camera id="player"
spawner="mixin: laser; on: click"
click-listener
wasd-controls="fly: true"
click-to-fly="flying: true;">
<a-cursor opacity="0.5"></a-cursor>
</a-camera>
</body>
</html>