A cute and interactive game to learn CSS Flexbox, featuring characters from the popular anime Chiikawa! Help Chiikawa, Hachiware, and Usagi find their way home by writing CSS code.
- 30 Levels: Ranging from basics (
justify-content,align-items) to advanced compound layouts. - Anime Style UI: Custom cursors, rounded fonts, and a pastel color palette inspired by the Chiikawa universe.
- Interactive Editor: Real-time code preview, property helpers (click-to-copy), and syntax highlighting with Tab support.
- Responsive Design: Play smoothly on both desktop and mobile devices.
- Cute Characters: Play with Chiikawa, Hachiware, and Usagi!
- Framework: Nuxt 3 (Vue 3 + TypeScript)
- Styling: Less
- Fonts: Google Fonts (Dela Gothic One, Kosugi Maru, Fredoka, Fira Code)
- Assets: High-quality WebP character images
- Clone the repository.
- Install dependencies:
npm install
- Start the development server:
npm run dev
- Open http://localhost:3000 in your browser.
一款可爱又有趣的 CSS Flexbox 学习游戏，由人气动漫 吉伊卡哇 (Chiikawa) 的角色们陪你一起通过代码闯关！通过编写 CSS 代码，帮助吉伊卡哇、小八和乌萨奇回到正确的位置。
- 30 个精心设计的关卡：从基础属性 (
justify-content,align-items) 到复杂的复合布局，循序渐进。 - 动漫风格 UI：定制的可爱光标、圆润字体以及吉伊卡哇风格的柔和配色。
- 交互式代码编辑器：实时预览代码效果，提供属性提示（点击复制），支持 Tab 键缩进。
- 响应式设计：完美支持桌面端和移动端访问。
- 萌系角色：与吉伊卡哇、小八和乌萨奇一起学习！
- 框架: Nuxt 3 (Vue 3 + TypeScript)
- 样式: Less
- 字体: Google Fonts (Dela Gothic One, Kosugi Maru, Fredoka, Fira Code)
- 素材: 高清 WebP 角色图
- 克隆项目仓库。
- 安装依赖：
npm install
- 启动开发服务器：
npm run dev
- 在浏览器中打开 http://localhost:3000 即可开始游戏。
Made with ❤️ for Chiikawa Fans | Created by Laurc2004