1
0
hugo/layouts/pico/single.html

62 lines
2.0 KiB
HTML
Raw Permalink Normal View History

2024-04-23 13:21:26 +00:00
{{ partial "head-pico.html" . }}
<canvas width="300" height="75"></canvas>
<script>
fetch('/wasm/pico/dino.wasm')
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes, {Math}))
.then(source => {
let instance = source.instance;
let canvasData = new Uint8Array(instance.exports.mem.buffer, 0x5000, 90000);
let canvas = document.querySelector('canvas');
let context = canvas.getContext('2d');
let imageData = context.createImageData(300, 75);
let u8 = new Uint8Array(instance.exports.mem.buffer, 0, 4);
let onkey = (down, event) => {
let bit;
switch (event.code) {
case 'ArrowUp': bit = 1; break;
case 'ArrowDown': bit = 2; break;
default: return;
}
if (down) {
u8[0] |= bit;
} else {
u8[0] &= ~bit;
}
};
document.addEventListener('keydown', onkey.bind(null, 1), false);
document.addEventListener('keyup', onkey.bind(null, 0), false);
let touches = {};
let ontouch = (down, event) => {
for (let touch of event.changedTouches) {
if (down) {
let bit;
if (touch.clientX < event.target.clientWidth * 0.5) {
bit = 2; // down
} else {
bit = 1; // up
}
u8[0] |= bit;
touches[touch.identifier] = bit;
} else {
u8[0] &= ~touches[touch.identifier];
delete touches[touch.identifier];
}
}
event.preventDefault();
};
canvas.addEventListener('touchstart', ontouch.bind(null, 1), false);
canvas.addEventListener('touchend', ontouch.bind(null, 0), false);
(function update() {
requestAnimationFrame(update);
instance.exports.run();
imageData.data.set(canvasData);
context.putImageData(imageData, 0, 0);
})();
});
</script>
</body>
</html>