精选 Featured 游戏/互动 Game / interactive

Flexbox Froggy Flexbox Froggy

写 Flexbox 把青蛙放到荷叶上，用闯关来学。 Learn Flexbox as a game: write the properties that land frogs on lily pads.

详细介绍Details

用闯关游戏学习 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.

适合学什么What to learn

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

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

Flexbox Froggy Flexbox Froggy

详细介绍Details

适合学什么What to learn

同类型Same type

M3E Canvas：在浏览器里拖出 Material 3 界面草图，一键变成给 AI 写 App 的提示词 M3E Canvas: sketch Material 3 Expressive screens in the browser and turn them into a prompt for your AI coding tool

CUBE Type：打几个字，变成等距方块字，免费导出图片或循环动图 CUBE Type: type a few words and get isometric block letters, free image or loop export

Triple-A Minesweeper：把扫雷做成「3A 大作」的恶搞网页游戏 Triple-A Minesweeper: classic Minesweeper parodied as a AAA blockbuster in the browser