83 lines
2.4 KiB
HTML
83 lines
2.4 KiB
HTML
|
<!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>
|
||
|
|
|