本次周末挑战的狗主题提交，我做了三个小而完整的项目。每个项目都严格限定为单个自包含HTML文件：零依赖、零构建步骤、零CDN。打开文件（或点击文末链接）即可直接使用——软件本该如此，对狗也是如此。 Paw Match —— 狗狗品种记忆游戏 翻转卡片配对狗品种。配对成功时，会弹出真实品种冷知识，比如：你知道达尔马提亚犬出生时全白，3到4周后才开始长斑点吗？ 支持三种难度（6/8/10对）、步数计数、计时器、星级评价、CSS 3D翻转动画和彩纸庆祝效果。 Paw Log —— 狗狗训练与护理日志 一个实用的训练记录工具。记录散步、喂食、训练、看兽医、洗澡和玩耍时间。所有数据存储在localStorage中，提供每日统计（今日散步次数、训练分钟数、连续打卡天数）、按活动类型汇总的进度条，以及JSON导出/导入备份功能。 Dog-o-matic —— 生成式狗狗艺术 一个微型程序化狗狗工厂。每次点击都会生成一张独一无二的狗脸：头型、耳朵类型（垂耳/立耳/圆耳/折耳）、毛色、胸纹、斑点、舌头、雀斑——全部随机。它还会“鉴定”品种，最后总是得出结论：这是一只非常棒的狗狗。纯Canvas 2D实现，可以保存为PNG，也可以一键连续生成一打。 三个项目全部在浏览器本地运行，无需安装，无需登录： 整个代码库就是demo本身：每个项目都是单个自包含的HTML文件——在浏览器里右键→查看源代码，即可看到全部代码。没有框架，没有lockfile，也没有需要解释的node_modules。 包含全部项目文件（外加这份README）的GitHub仓库正在发布中，会在提交截止前把链接补上。 这次最有趣的部分就是“单文件”约束本身。每个项目必须是一个可直接双击运行、不依赖任何外部资源的HTML文件，这逼着我把所有功能压缩在一个文件里，反而做出了很干净的东西。
热门跟贴