-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
154 lines (145 loc) · 5.23 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Js13kGames - Get That Pingeon</title>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
font-family: "Liberation Sans", Arial, sans;
font-size: 2vw;
text-align: center;
}
#debugGEl {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#intro {
position: absolute;
z-index: 10;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.5);
padding: 0 10vw;
}
.box {
border: 1vw solid #E80;
background: rgba(255,255,255,.6);
box-shadow: 0 0 10vw #000, inset 0 0 20vw rgba(0,0,0,.5);
padding: 4vw;
text-align: left;
border-radius: 10vw;
}
.box h1 {
margin: 0;
text-align: center;
font-size: 6vw;
color: #E70;
text-shadow: 0 0 4vw #FF0;
text-decoration: underline;
}
#btStart {
border: 3px solid #FC6;
padding: 1vw 2vw;
border-radius: 1vw;
background: #F90;
font-size: 5vw;
font-weight: bold;
color: #620;
text-shadow: 1px 1px 0 rgba(255,200,0,1);
box-shadow: 0 0 3vw #000, inset 0 0 3vw rgba(8,3,0,.5);
}
.red { color: #C00 }
.a-enter-vr-button {
z-index: 5;
}
</style>
<body>
<section id="intro">
<div class="box">
<header><h1> Get the Pigeon! </h1></header>
<article>
<p>
You know... We need that <b class="red">red</b> magnetic pigeon. Unhappily
we only have that old plane and you must fly offline. At least you have
this "fishing pole" like with a magnet "fishhook". You need do nothing
but to pilot. I will hold out the "fishing pole".
</p><p>
Will not to be easy to get near enought to catch that pigeon, so try
to <b>enjoy the nature</b>, the montains are green this season... fly between
balloons, try to see the iris of a <b>dragoon</b>... It will not flame you,
however, care on to do not crash the plane on its hard scales.
</p>
<div align="center">
<button id="btStart" onclick="start(10)"> Start! </button>
</div>
</article>
</div>
</section>
<a-scene background="color: #6AE" fog="type: linear; far: 850; color: #6AE">
<a-assets id="assets">
<canvas id="cSky"></canvas>
<canvas id="cGround"></canvas>
<canvas id="cCloud"></canvas>
<canvas id="cTree"></canvas>
<canvas id="cMountain"></canvas>
<canvas id="cEye"></canvas>
</a-assets>
<!--
<a-sky id="sky" position="0 0 0" radius="2000" material="fog: false" src="#cSky"></a-sky>
-->
<a-entity id="drago" position="0 150 -10" color="#C00">
<a-sphere id="dragoHead" class="solid" position="0 0 1.8" radius="1.8" color="#C00">
<a-cone position="0 0 1.8" rotation="90 0 0" color="#C00"
radius-bottom="1.65" radius-top=".6" height="2.2"></a-cone>
<a-sphere id="eyeLeft" position="1.6 .3 .6" rotation="0 -40 0" radius=".3" src="#cEye" draw-canvas="cEye"></a-sphere>
<a-sphere id="eyeRight" position="-1.6 .3 .6" rotation="0 40 180" radius=".3" src="#cEye" draw-canvas="cEye"></a-sphere>
<a-cone position="1.5 1.6 -1.2" rotation="-60 -17 0" color="#E80"
radius-bottom=".4" radius-top="0" height="3"></a-cone>
<a-cone position="-1.5 1.6 -1.2" rotation="-60 17 0" color="#E80"
radius-bottom=".4" radius-top="0" height="3"></a-cone>
</a-sphere>
<a-entity id="dragBody">
</a-entity>
</a-entity>
<a-entity id="plane" position="0 80 700" rotation="0 0 0">
<a-camera id="cam" far="800" position="0 .3 0" look-controls="enabled: false" active rotation="0 0 0" active="false">
<a-text id="info" anchor="center" color="#E80" width="2" value="Press Start" position=".8 0 -.5"></a-text>
<a-plane id="elice" position="0 -.3 -.4" color="#DDD" rotation="0 0 0" height=".8" width=".08">
<a-animation dur="800" repeat="indefinite" easing="linear" loop="true" attribute="rotation" from="0 0 0" to="0 0 360"></a-animation>
<a-triangle color="#DDD" opacity="0.5" vertex-a=".04 .4 0" vertex-b=".04 0 0" vertex-c=".2 .35 0"></a-triangle>
<a-triangle color="#DDD" opacity="0.5" vertex-a="-.04 0 0" vertex-b="-.2 -.35 0" vertex-c="-.04 -.4 0"></a-triangle>
</a-plane>
<a-cylinder id="planeBody" position="0 -.3 -.2" radius=".2" height=".3" rotation="90 0 0" color="#F80">
<a-cylinder id="arm" position=".15 -.1 -.3" rotation="35 -40 0" radius=".01" height=".5" color="#888">
<a-sphere id="armEnd" radius=".015" color="#888" position="0 -.25 0"></a-sphere>
</a-cylinder>
</a-cylinder>
</a-camera>
</a-entity>
<a-sphere id="catcher" radius=".02" color="#555" line="start: 0 0 0; end: 0 0 0; color: #444"></a-sphere>
<a-box id="ground"
position="0 -1 0" rotation="-90 0 0" width="2400" height="2400" deep="2"
src="#cGround" repeat="100 100" material="side: double" color="#280">
</a-box>
</a-scene>
<script src="helpers.js"></script>
<script src="boid.js"></script>
<script src="drago.js"></script>
<script src="balloon.js"></script>
<script src="plane.js"></script>
<script src="game.js"></script>
</body>
</html>