设计与产品bryanbraun.com
我一直在用复选框做东西
I keep making things out of checkboxes
2021 — 2024，它一次次回到首页
黑点是上首页（≥ 50 分）的那次投稿，空心点是没冲上去的投稿，点越大分数越高。
导读
Bryan Braun 介绍自己如何反复用 HTML 复选框（checkbox）拼出各种东西：把复选框网格当成 1-bit 像素画布，用 CSS 控制勾选状态，做出动画、小游戏和交互装置。文章展示了仅凭浏览器原生表单元素就能实现的可玩性与表现力。
为什么经久不衰：极限的约束（1 bit、纯 HTML/CSS）反而催生创意，而且全部基于原生网页元素、可直接查看源码，所以每隔几年重读仍有启发。
HN 评论精选
1-bit 网格的极简限制像 Pico-8 一样激发创意，甚至可做成教学用的极简游戏主机。
这个想法的极简程度——一个可实时交互的 1-bit 网格——让人想到 Pico-8：一台设定了严格限制的幻想主机，限制不会让你被无穷的想法淹没，而是给你一个可玩的边界。它让事情保持现实：你能做出奇妙的东西，但图形和音乐风格受限，于是更有动力去做游戏，负担小得多，可以专注在有趣上。而且它提供挑战！当你开始触及限制，就会想出聪明的技巧来节省空间，因为机器也不是飞快，你在推动机器的同时也在推动自己。不过在我看来，这个复选框游乐场会是更好的虚拟主机——精简到做一个能玩的游戏所需的最低限度。提供一个好界面，让用户只写游戏代码，提供 start()、frame() 和 click(x, y) 等钩子，这会是一台让人立刻想动手的、极其令人满足的主机：不用操心图形和音频，可以直接投入让游戏好玩。……另外，它也会是教孩子编程的极好框架！:D
yunruse查看英文原文
The sheer simplicity of this idea - a 1-bit grid, which you can interact with in real-time - echoes that of Pico-8 [1], a fantasy console with strict limits such that you're not overwhelmed with ideas, but instead given bounds to play with. Its limits keep it realistic: you can do immensely wondrous things with the console, but its graphic and music style are limited, and as such it provides much more of an incentive to make a game - it's far less overwhelming, and you can concentrate on fun. But also, it offers a challenge! As you begin to hit the limits, you come up with clever tricks to save space, and because the computer isn't blisteringly fast, you're pushing yourself as much as you are the computer. [1]: https://www.lexaloffle.com/pico-8.php But this checkbox playground would be, in my eyes, an even better virtual console - reduced to the bare minimum of what you could make into a game that can be enjoyed. Provide a nice interface such that the user only has to write the game code, provide events to hook into - start(), frame() and click(x, y) - and this would be an immensely satisfying console to immediately get to work on, as rather than worry about graphics and audio, you're free to get right into making it fun. ...also, it'd be an excellent framework for teaching kids how to code! :D
近乎二值的 Bad Apple 影绘在各平台的移植是黑客文化中的经典现象。
有点跑题，但我一直对 Bad Apple 移植到各种平台（尤其是 Sega Genesis 和 Atari 2600）的作品印象深刻。把音乐视频做成近乎二值化的画面这个简单选择，竟让这首歌在黑客文化中流行起来，很神奇。
tombert查看英文原文
This is a bit tangential, but I've been completely impressed by a ton of the Bad Apple "ports" to various platforms (particularly the Sega Genesis and the Atari 2600). It's amazing how the simple choice of making a mostly-binary music video has made a song popular in hacker culture.
早年就有人用 UI 元素当图形做游戏，作者自己做过正弦波滚动条。
我记得大约 2009 年有人用 UI 元素做过一款早期 iPhone 游戏。我觉得这个想法太酷了，花了不少时间玩“把 UI 元素当图形”。我最得意的作品是正弦波滚动条：https://www.mrspeaker.net/dev/sinescrollbars/
mrspeaker查看英文原文
I remember someone had made an early iPhone game out of UI elements (around 2009 ish?). I thought it was such a cool idea, and spent a bunch of time messing around with "ui-elements-as-graphics". My favourite thing I came up with was sine-wave scrollbars: https://www.mrspeaker.net/dev/sinescrollbars/
推荐 Matthew Rayfield 的浏览器元素恶搞作品，如 Popup trombone。
如果你喜欢这种（滥用）浏览器元素的做法，强烈推荐 Matthew Rayfield 的作品：https://matthewrayfield.com/ 。Popup trombone 堪称艺术品。
wbobeirne查看英文原文
If you enjoy this kind of (ab)use of browser elements, I highly suggest the works of Matthew Rayfield: https://matthewrayfield.com/. Popup trombone is a work of art.
历次讨论
同类还值得读
贝塞尔曲线入门
A Primer on Bézier Curves
Pomax 编写的贝塞尔曲线在线教程，从基础概念一路讲到曲线求交、投影、曲率等进阶内容，并配有可交互的示例和配套的 bezier.js 库。
设计与产品上首页 7 次 · 2014–2022pomax.github.io编辑精选WebGL 水面模拟
WebGL Water
Evan Wallace 制作的 WebGL Water 演示：在浏览器里实时渲染一片水面，展示折射、反射和焦散等 GPU 图形效果。
设计与产品上首页 6 次 · 2011–2025madebyevan.com设计建议：永远不要使用黑色
Design Tip: Never Use Black
设计随笔提出“永远不要用纯黑”的建议，主张在界面和绘画中改用深灰或带色相的暗色，并借阴影与色彩关系来论证。
设计与产品上首页 5 次 · 2012–2021ianstormtaylor.com用于思考不可想象之物的媒介
Media for Thinking the Unthinkable
Bret Victor 的这个页面围绕《Media for Thinking the Unthinkable》展开，探讨我们用来思考和表达复杂问题的媒介，以及以文字/符号为主的传…
设计与产品上首页 5 次 · 2013–2020worrydream.com编辑精选页面重量很重要
Page Weight Matters
博文讲 YouTube 工程师 Chris Zacharias 的一次页面瘦身实验：团队做了一个更轻量的页面版本，起初从整体平均加载时间看反而更慢；按地理区域分层后才发现，轻量版…
设计与产品上首页 4 次 · 2012–2022blog.chriszacharias.com