Doom may be played in the web browser, of course, but now it may also be rendered in the web browser as a vast collection of checkboxes.
You can play now (desktop Chrome/Edge only), view the source code, or read on for the how.
This is the incredible achievement of Andrew Healey.
In my project, 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. I experimented with a few different threshold values to get DOOM to render as clear as possible. A possible improvement here is to use some kind of dither filter.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. The image at the top of this post is from an earlier version with a resolution of 320×200.
