-
Notifications
You must be signed in to change notification settings - Fork 2
/
critter-template.html
96 lines (93 loc) · 3.39 KB
/
critter-template.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
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Critter</title>
<style>
body {
font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
background-color: black;
color: #999;
}
button {
display: none;
cursor: pointer;
font-size: 2rem;
padding: 0.2rem 1rem;
margin: 2rem auto;
color: yellow;
background-color: #080;
box-shadow: none;
border-color: yellow;
border-radius: 10px;
}
#canvas {
display: none;
}
</style>
</head>
<body>
<div id="progress"></div>
<button id="startButton" onclick="Module.onStart()">Start Critter</button>
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
<div>Use mouse (or arrow keys) to move</div>
<div>Left button (or space) to shoot main weapon</div>
<div>Middle button (or left alt) to shoot secondary weapon</div>
<div>Right button (or left ctrl) to shoot tertiary weapon (only in expert and insane)</div>
<div>p to pause</div>
<script>
var Module = {
readyToStart: 0,
askUserToStart: function() {
document.getElementById('startButton').style.display = 'block';
},
onStart: function() {
document.getElementById('startButton').style.display = 'none';
document.getElementById('canvas').style.display = 'block';
document.getElementById('canvas').requestPointerLock();
Module.readyToStart=1
},
locateFile: function(path, prefix) {
console.log(`locateFile: path:${path} prefix:${prefix}`);
if (path.endsWith(".data")) return "./" + path;
//if (path.endsWith(".data")) return "critter/" + path;
// otherwise, use the default, the prefix (JS file's dir) + the path
return prefix + path;
},
print: function(text) {
console.log(text);
},
printErr: function(text) {
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
console.error(text);
},
setStatus: function(text) {
var total = 0;
var loaded = 0;
var num = 0;
for (var download in Module.dataFileDownloads) {
var data = Module.dataFileDownloads[download];
total += data.total;
loaded += data.loaded;
num++;
}
console.log('Progress: ' + loaded + '/' + total);
document.getElementById('progress').innerHTML = 'Loading: ' + Math.round(100*loaded/total) + '%';
if(loaded === total) {
document.getElementById('progress').style.display = 'none';
}
},
gamePostRun: function() {
document.getElementById('progress').innerHTML = 'Thanks for playing - reload to play again.';
document.getElementById('progress').style.display = 'block';
},
canvas: (function() {
var canvas = document.getElementById('canvas');
return canvas;
})()
};
</script>
{{{ SCRIPT }}}
</body>
</html>