🕹️ DOOM via Checkboxes

My blog post: DOOM Rendered via Checkboxes

Play it now (desktop Chrome/Edge only).

The Pitch

I don't think you can really say you've exhaused this until you can run DOOM rendered with checkboxes.

— a commenter wrote on Hacker News

Bryan Braun gave us Checkboxland, a unique library for rendering text, shapes, and video, via a grid of checkboxes.

Id software gave us DOOM.

Cornelius Diekmann gave us DOOM via WebAssembly.

Today, I'm pleased to stand on top of these giants' shoulders, and give you DOOM via Checkboxes.

How

DOOM runs via WebAssembly in a hidden <canvas>. I use HTMLCanvasElement.captureStream() to turn this into a MediaStream. A <video> element displays this MediaStream and is then consumed by renderVideo from Checkboxland.

Optionally, the <video> element can be hidden as well. However, test users were unable to exit the main menu without the aid of the original hi-res DOOM.

Our screen is a 160 by 100 grid of native checkboxes. Higher resolutions work but FPS drops off dramatically.

const cbl = new Checkboxland({
  dimensions: "160x100",
  selector: "#checkboxes",
});

The cursed CSS property zoom is used to shrink the checkboxes down. transform: scale(x) resulted in worse performance, and worse visuals. Unfortunately, this means that Firefox users need to manually zoom out.

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user.

Key events are forwarded to the hidden <canvas> to avoid focus issues.

const forwardKey = (e, type) => {
  const ev = new KeyboardEvent(type, {
    key: e.key,
    keyCode: e.keyCode,
  });
  canvas.dispatchEvent(ev);
};

document.body.addEventListener("keydown", function (e) {
  forwardKey(e, "keydown");
});

document.body.addEventListener("keyup", function (e) {
  forwardKey(e, "keyup");
});

While the .wasm is downloaded and processed, the grid displays a message via print.

Afterwards, the user is instructed to click anywhere (a user action is required so that the <video> can be programmatically played) and the game begins!

Development

python dev.py

Edit files, refresh.