AI UP LAB HTML 收集 · 每日更新HTML Collection · daily updates

HTML 收集HTML Collection / Flexbox Froggy Flexbox Froggy

精选 Featured 游戏/互动 Game / interactive

Flexbox Froggy Flexbox Froggy

用闯关游戏学习 CSS Flexbox：写属性把青蛙放到荷叶上。Thomas Park / Codepip 出品，开源，支持简体中文。 Learn CSS Flexbox as a game: write properties to put frogs on lily pads. By Thomas Park / Codepip, open source, with Simplified Chinese.

打开原文Open source 按类型By type

适合学什么What to learn

  • 游戏/互动 Game / interactive

    可直接玩或操作的教学游戏与 WebGL 演示。 Teaching games and WebGL demos you can play in the browser.

收录理由Why we listed it 经典互动教学页，适合收集「游戏/互动」类 HTML 学习界面。 A classic interactive teaching page. Fits the “game / interactive” HTML learning UI collection.

Flexbox Froggy 预览

同类型Same type

+ 精选 + Featured 游戏/互动 Game / interactive 文档站 Docs

Bodily Oddities：身体也能「怪」一点的百科 Bodily Oddities: strange things bodies can (sometimes) do

Demjan Vester 的公开互动百科：收录约 143 条人体小怪癖 / 反射 / 感知现象（耳鸣轰鸣、胃咕噜、jamais vu 等），可按身体部位与类型浏览，带「吓人但正常」「现在就能试」入口与搜索。纯前端，Show HN item 49649789（约 271 分）。 Demjan Vester’s public interactive encyclopedia of ~143 bodily quirks / reflexes / percepts (ear rumbling, stomach growling, jamais vu, …), browsable by body region and kind, with “scary but normal” / “try right now” entry points and search. Pure front-end; Show HN item 49649789 (~271 points).

body · encyclopedia
+ 精选 + Featured 游戏/互动 Game / interactive 工具页 Tool

Relativity Park：光速降到步行时的狭义相对论 Relativity Park: special relativity when light walks

Dmitry Brant 的公开互动演示：把光速压到 5 km/h（约步行速度），在公园视角里用 WASD 加速，观察洛伦兹收缩、光行差、多普勒变色与相对论光束效应，各效应可单独开关。Show HN 当日上过热榜（item 49637385）；纯前端可打开，无需登录。 Dmitry Brant’s public interactive demo: the speed of light is set to 5 km/h (a brisk walk); accelerate with WASD through a park and watch length contraction, aberration, Doppler colour shift, and relativistic beaming, each toggleable. Hit the Show HN front page the same day (item 49637385); pure front-end, no login.

physics · relativity
+ 精选 + Featured 游戏/互动 Game / interactive 工具页 Tool

Roadwright：画轮子，看它滚出的路面 Roadwright: draw a wheel, see the road it rolls on

Basel Ashraf 的浏览器几何小品：手绘（或选一个）轮子轮廓并放好轴心，即时算出该轮无滑滚动时对应的路面曲线，可调滚速、双轮轴距、路面倾斜，并导出 PNG / 切割文件 / 录制循环。纯前端互动；Show HN item 49641755，仓库开源。 Basel Ashraf’s browser geometry toy: draw (or pick) a wheel outline, place its axle, and instantly get the road profile it rolls on without slipping; adjust roll speed, two-wheel wheelbase and road tilt, and export PNG / cut files / a recorded loop. Pure front-end interactive; Show HN item 49641755, source on GitHub.

geometry · canvas