1
0
hugo/static/wasm/pico/index.html

83 lines
2.4 KiB
HTML
Raw Normal View History

2024-04-23 13:21:26 +00:00
<!DOCTYPE html>
<head>
<style>
body {
position: absolute;
display: flex;
flex-direction: column;
background-color: #fff;
margin: 0;
width: 100%;
height: 100%;
}
canvas {
object-fit: contain;
width: 100%;
height: 100%;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
</style>
</head>
<body>
<canvas width="300" height="75"></canvas>
<script>
fetch('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>