-
Notifications
You must be signed in to change notification settings - Fork 13
/
index.html
79 lines (67 loc) · 3.02 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
<!DOCTYPE html>
<!--
DOOM/Wasm copied from https://github.com/diekmann/wasm-fizzbuzz
This file could be cleaned up more but I just hid everything for now.
-->
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DOOM via Checkboxes</title>
<meta name="description" content="WebAssembly meets 16000 HTML checkboxes.">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<style>
* {
font-family: sans-serif;
}
body {
padding: 5px;
}
#hide {
display: none;
}
#checkboxes {
zoom: 0.4;
pointer-events: none;
}
video {
zoom: 2;
}
</style>
</head>
<body>
<p>
DOOM via checkboxes. <b>Desktop Chrome/Edge only</b>. By <a href="https://twitter.com/healeycodes">@healeycodes</a>. Read the blog post: <a href="https://healeycodes.com/doom-rendered-via-checkboxes">DOOM Rendered via Checkboxes</a>.
</p>
<div id="hide">
<p id="focushint"></p>
<div class="container" style="display: none">
<canvas id="screen" width="640" height="400" tabindex="0">This is where the DooM screen should render.</canvas>
<span> </span>
<div id="output"></div>
</div>
gettmilliseconds calls per second: <span id="getmsps_stats">0</span> Total getmilliseconds calls: <span id="getms_stats">0</span><br /> DooM FPS: <span id="fps_stats">0</span> (target: 35FPS) Total Frames drawn: <span id="drawframes_stats">0</span><br
/> Browser Animation FPS: <span id="animationfps_stats">0</span> (target: around 60FPS, depending on browser)<br />
</div>
<ul>
<li>Use <button id="enterButton">⏎</button> to start the game</li>
<li>arrow keys <button id="leftButton">←</button>
<button id="upButton">↑</button>
<button id="downButton">↓</button>
<button id="rightButton">→</button> to move
<button id="ctrlButton">ctrl</button> to shoot
</li>
<li>spacebar <button id="spaceButton"> </button> to open gates
</li>
<li><button id="altButton">alt</button> and arrow keys to strafe (if your browser does not handle these keys otherwise).
</li>
</ul>
</div>
<video id="doom-video" width="160" height="100"></video>
<div id="checkboxes"></div>
<p>Credits: DOOM via <a href="https://github.com/diekmann/wasm-fizzbuzz">WebAssembly from Scratch Article</a>, Checkbox library via <a href="https://www.bryanbraun.com/checkboxland/">Checkboxland</a>.
</body>
<script type="module" src="glue.js"></script>
<script src="doom.js" defer></script>
</html>