{"id":13620683,"url":"https://github.com/healeycodes/doom-checkboxes","last_synced_at":"2025-04-13T21:32:40.770Z","repository":{"id":37738957,"uuid":"416335107","full_name":"healeycodes/doom-checkboxes","owner":"healeycodes","description":"🕹️ DOOM rendered via checkboxes in a web browser.","archived":false,"fork":false,"pushed_at":"2021-10-20T08:55:49.000Z","size":2253,"stargazers_count":176,"open_issues_count":2,"forks_count":13,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-27T11:50:28.816Z","etag":null,"topics":["checkboxes","checkboxland","doom","wasm"],"latest_commit_sha":null,"homepage":"https://healeycodes.github.io/doom-checkboxes/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/healeycodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-10-12T12:49:22.000Z","updated_at":"2024-10-02T17:24:40.000Z","dependencies_parsed_at":"2022-08-24T16:00:57.108Z","dependency_job_id":null,"html_url":"https://github.com/healeycodes/doom-checkboxes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/healeycodes%2Fdoom-checkboxes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/healeycodes%2Fdoom-checkboxes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/healeycodes%2Fdoom-checkboxes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/healeycodes%2Fdoom-checkboxes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/healeycodes","download_url":"https://codeload.github.com/healeycodes/doom-checkboxes/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248786172,"owners_count":21161406,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["checkboxes","checkboxland","doom","wasm"],"created_at":"2024-08-01T21:00:58.424Z","updated_at":"2025-04-13T21:32:40.744Z","avatar_url":"https://github.com/healeycodes.png","language":"JavaScript","readme":"## :joystick: DOOM via Checkboxes\n\u003e My blog post: [DOOM Rendered via Checkboxes](https://healeycodes.com/doom-rendered-via-checkboxes)\n\n\u003cbr\u003e\n\n![Preview image of DOOM/DOOM checkboxes](https://github.com/healeycodes/doom-checkboxes/blob/main/preview.png)\n\n\u003cbr\u003e\n\n[Play it now](https://healeycodes.github.io/doom-checkboxes/) (desktop Chrome/Edge only).\n\n## The Pitch\n\n\u003e I don't think you can really say you've exhaused this until you can run DOOM rendered with checkboxes.\n\n— a commenter wrote [on Hacker News](https://news.ycombinator.com/item?id=28826839)\n\n\u003cbr\u003e\n\nBryan Braun gave us [Checkboxland](https://www.bryanbraun.com/checkboxland/), a unique library for rendering text, shapes, and video, via a grid of checkboxes.\n\nId software gave us [DOOM](https://en.wikipedia.org/wiki/Doom_(franchise)).\n\nCornelius Diekmann gave us [DOOM via WebAssembly](https://github.com/diekmann/wasm-fizzbuzz).\n\nToday, I'm pleased to stand on top of these giants' shoulders, and give you DOOM via Checkboxes.\n\n## How\n\nDOOM runs via WebAssembly in a hidden `\u003ccanvas\u003e`. I use [HTMLCanvasElement.captureStream()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream) to turn this into a MediaStream. A `\u003cvideo\u003e` element displays this MediaStream and is then consumed by [renderVideo](https://www.bryanbraun.com/checkboxland/#rendervideo) from Checkboxland.\n\nOptionally, the `\u003cvideo\u003e` 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.\n\nOur screen is a 160 by 100 grid of native checkboxes. Higher resolutions work but FPS drops off dramatically.\n\n```js\nconst cbl = new Checkboxland({\n  dimensions: \"160x100\",\n  selector: \"#checkboxes\",\n});\n```\n\nThe cursed CSS property [zoom](https://developer.mozilla.org/en-US/docs/Web/CSS/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.\n\n\u003e 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.\n\nKey events are forwarded to the hidden `\u003ccanvas\u003e` to avoid focus issues.\n\n```js\nconst forwardKey = (e, type) =\u003e {\n  const ev = new KeyboardEvent(type, {\n    key: e.key,\n    keyCode: e.keyCode,\n  });\n  canvas.dispatchEvent(ev);\n};\n\ndocument.body.addEventListener(\"keydown\", function (e) {\n  forwardKey(e, \"keydown\");\n});\n\ndocument.body.addEventListener(\"keyup\", function (e) {\n  forwardKey(e, \"keyup\");\n});\n```\n\nWhile the `.wasm` is downloaded and processed, the grid displays a message via [print](https://www.bryanbraun.com/checkboxland/#print).\n\n![DOOM WebAssembly loading..](https://github.com/healeycodes/doom-checkboxes/blob/main/loading.png)\n\nAfterwards, the user is instructed to click anywhere (a user action is required so that the `\u003cvideo\u003e` can be programmatically played) and the game begins!\n\n## Development\n\n```bash\npython dev.py\n```\n\nEdit files, refresh.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhealeycodes%2Fdoom-checkboxes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhealeycodes%2Fdoom-checkboxes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhealeycodes%2Fdoom-checkboxes/lists"}