Play DOOM using web browser checkboxes (finally)

If you’ve ever felt the need to render DOOM using only web browser checkboxes, [Andrew Healey] did you cover with sound recent port of first person shooter. Naturally this gets our check approval.

Yes, you read that right. You can now play DOOM in a 160 x 100 grid of HTML-generated checkboxes, something like this: ☑. The secret sauce for this project is partly derived from the fascinating Checkboxland project by another hacker Brian Braun, who uses HTML checkboxes to generate a variety of artistic demos.

[Andrew Healey] also used Cornelius Diekmann’s DOOM port using WebAssembly, which we recently covered here on Hackaday. A handful of code ties the two projects together, and the end result is DOOM at 160 × 100 resolution, fully rendered with HTML checkboxes.

Port can be played here using Chrome or Edge (other browsers may have problems if they do not support the zoom property in CSS). The source code is also available at GitHub.

While the resolution and color scheme isn’t what we’d expect from DOOM, it’s likely the graphics could be improved even further by changing the dithering and threshold settings. Higher resolutions may also be possible with additional optimization.

We’d be hard-pressed to pick our preferred port of DOOM, as the list gets pretty long. However, for something completely different, check out our story on how DOOM was introduced on Twitter.

Thanks to [Dan] for the right tip.

Comments are closed.