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
|
<!doctype html>
<title>LDJam 57</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<style>
html, body {
background: #222222;
font-family: sans-serif;
height: 100%;
margin: 0;
overflow: hidden;
text-align: center;
width: 100%;
}
h1 {
color: white;
margin: 0;
}
button {
font-size: 150%;
height: 8%;
margin: 0.3em;
width: 25%;
}
</style>
<canvas></canvas>
<script>
// Mirror these in src/all.c
const INPUT_NONE = 0;
const INPUT_CLICK = 1;
const INPUT_RCLICK = 2;
const INPUT_PAUSE_PLAY = 3;
const WASM =
#include "../build/main.wasm.b64"
async function main() {
let bytes = Uint8Array.from(atob(WASM), function(c) {
return c.charCodeAt(0);
});
let module = await WebAssembly.compile(bytes);
let wasm = await WebAssembly.instantiate(module);
let exports = wasm.exports;
let html = document.querySelector("html");
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
let memory = exports.memory;
const start = Date.now();
function now() {
return Date.now() - start;
}
function min(a, b) {
return b<a ? b : a;
}
function max_width() {
return html.clientHeight * 0.7 | 0;
}
function render() {
let width = canvas.width = min(html.clientWidth, max_width());
let height = canvas.height = width;
let ptr = exports.game_render(width, height);
let dl = new Int32Array(memory.buffer, ptr);
let len = dl[0];
let ops = dl.subarray(1);
for (let i = 0; i < len; i++) {
let op = ops.subarray(6*i, 6*i+6);
const color = new Uint8Array(new Uint32Array(op.subarray(4, 6)).buffer);
ctx.fillStyle = `#${color[0].toString(16).padStart(2, "0")}${color[1].toString(16).padStart(2, "0")}${color[2].toString(16).padStart(2, "0")}`;
ctx.globalAlpha = color[3] / 255;
ctx.fillRect(op[0], op[1], op[2], op[3]);
ctx.strokeStyle = `#${color[4].toString(16).padStart(2, "0")}${color[5].toString(16).padStart(2, "0")}${color[6].toString(16).padStart(2, "0")}`;
ctx.globalAlpha = color[7] / 255;
ctx.strokeRect(op[0], op[1], op[2], op[3]);
}
}
function onresize() { html.style.maxWidth = `${max_width()}px`; }
window.addEventListener("resize", onresize);
onresize();
canvas.addEventListener("mousedown", function(e) {
const mousex = e.clientX;
const mousey = e.clientY;
if (e.button == 0) {
exports.game_update(INPUT_CLICK, mousex, mousey, now());
}
});
document.addEventListener("keydown", function (e) {
if (e.key === " ") {
exports.game_update(INPUT_PAUSE_PLAY, 0, 0, now());
}
});
function animate() {
// TODO: stop requesting frames when state is static
requestAnimationFrame(animate);
exports.game_update(INPUT_NONE, 0, 0, now());
render();
}
requestAnimationFrame(animate);
exports.game_init();
}
main()
</script>
|
