forked from eott/nbody
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
156 lines (145 loc) · 4.88 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
<!DOCTYPE html>
<html>
<head>
<title>nbody - A game for the 13kjs15 gamejam by Etienne Ott</title>
<style type="text/css">
body {
margin: 0;
background-color: #000;
overflow: hidden;
}
#screen {
margin: auto;
}
div {
text-align: center;
font-size: 18px;
line-height: 40px;
font-family: 'Lucida Console';
color: #fff;
}
.title {
font-size: 80px;
}
span[onClick] {
font-size: 25px;
cursor: pointer;
}
#menu, #tutorial, #save {
margin-top: 100px;
}
#tutorial {
line-height: 30px;
}
#hud {
position: absolute;
width: 100%;
}
#lvl {
float: left;
padding: 1%;
width: 20%;
text-align: left;
}
#skip {
width: 53%;
padding: 1%;
float: left;
display: none;
}
#ast {
float: right;
padding: 1%;
width: 20%;
text-align: right;
}
</style>
</head>
<body>
<div id="menu">
<span class="title">nbody</span>
<br>
<br>
<span onClick="toggleGame();">Start game</span>
<br>
<span onClick="toggleTutorial();">How to play</span>
<br>
<span onClick="toggleSave();">Save game</span>
<br>
<span onClick="mute();">Mute sound</span>
</div>
<div id="tutorial" style="display: none;">
Collect the asteroids orbiting the planets,<br>
while avoiding crashing into them or<br>
flying off into space.
<br>
<br>
<span>Controls:</span><br>
<span>Hold space - Reverse movement</span><br>
<span>Escape - Goto menu</span><br>
<span>R - Reset level</span><br>
<span>Any other key - Reverse gravity</span><br>
<br>
<span>If the level seems impossible, it might be due<br>
to unfortunate level generation. Save the game<br>
and reload for another try.</span>
<br>
<br>
<span onClick="toggleTutorial();">Back to menu</span>
</div>
<div id="save" style="display: none;">
Copy this URL and save it to return to the game with your current progress:<br>
<span id="url"></span><br><br>
<span onClick="toggleSave();">Back to menu</span>
</div>
<div id="hud" style="display: none;">
<span id="lvl"></span>
<span id="skip" onClick="level(true)">Skip level?</span>
<span id="ast"></span>
</div>
<canvas id="screen" width="100" height="100" style="display: none;"></canvas>
<script src="song.js" type="text/javascript"></script>
<script src="sfx.js" type="text/javascript"></script>
<script src="soundbox-player.js" type="text/javascript"></script>
<script type="text/javascript">
initMusic();
var isTutorial = false;
var isMenu = true;
var isSave = false;
var loop;
function $(id) {
return document.getElementById(id);
}
function h(id, b) {
$(id).style.display = b ? "block" : "none";
}
function toggleGame() {
isMenu = !isMenu;
if (!isMenu) {
loop = window.setInterval('gameLoop()', 15);
} else {
window.clearInterval(loop);
}
h('menu', isMenu);
h('screen', !isMenu);
h('hud', !isMenu);
}
function toggleTutorial() {
isTutorial = !isTutorial;
h('tutorial', isTutorial);
h('menu', !isTutorial);
}
function toggleSave() {
isSave = !isSave;
h('save', isSave);
h('menu', !isSave);
var u = window.location;
$('url').innerHTML = u.origin + u.pathname + '?h=' + ((levelCounter * 2353 + 3727) % 10000);
}
</script>
<script src="input.js" type="text/javascript"></script>
<script src="gfx.js" type="text/javascript"></script>
<script src="movement.js" type="text/javascript"></script>
<script src="game.js" type="text/javascript"></script>
</body>
</html>