Skip to content

healeycodes/doom-checkboxes

main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

🕹️ DOOM via Checkboxes

My blog post: DOOM Rendered via Checkboxes


Preview image of DOOM/DOOM 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.

DOOM WebAssembly loading..

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.

About

🕹️ DOOM rendered via checkboxes in a web browser.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published