构建一款“涂色躲藏”浏览器小游戏
我开发了一款受 Meccha Chameleon 启发的浏览器游戏。在游戏中，躲藏者通过涂抹身体颜色来匹配墙壁或板箱，而寻找者则试图发现他们。
我围绕这个想法开发了两个工具。
- Camo Lab 这个工具可以为你提供任何表面的精确颜色、图案和姿态。我为变色龙使用了一个单一的内联 SVG。颜色会根据表面的调色板而变化。
我发现使用变量更改 SVG 颜色比生成图像更容易。每个表面都是一个小型数据对象，包含三个十六进制颜色、一个图案和一个混合分值。添加一个新表面只需一行代码。
- Minigame 这是一个可玩的方格阵列。有些方格里藏着变色龙。你需要在计时结束前点击方格来找到它们。我使用 React state 构建了这个游戏。我没有使用 canvas 或游戏引擎，这使得文件体积更小，加载速度更快。
技术栈：
- Next.js
- 通过 OpenNext 使用的 Cloudflare Workers
该网站在边缘端使用静态页面。交互部分在客户端进行注水 (hydrate)。
在这里尝试这些工具： Camo Lab: [Link] 浏览器游戏: [Link]
如果你有关于 SVG 着色或 OpenNext 配置的问题，欢迎向我提问。
来源: https://dev.to/hblai_filmlook/building-a-paint-to-hide-browser-minigame-with-nextjs-and-svg-18fn