WebGL 二次元石头剪刀布小游戏。
规则很普通：
- 石头 > 剪刀
- 剪刀 > 布
- 布 > 石头
但有趣的是在于：
输了会脱衣服。
对,就是这么简单粗暴。
起因其实是“我想研究精灵图”
一开始我根本没想做游戏。
我只是想研究：
- atlas
- sprite
- 图层叠加
- 动画裁剪
这些东西。
然后想着：“总得有个实际应用场景吧？”
于是脑子一抽：
那干脆做个二次元脱衣猜拳。
然后项目开始朝奇怪方向狂奔。
这个项目最麻烦的其实不是游戏逻辑
石头剪刀布规则简单得离谱。
真正麻烦的是：衣服层级
因为角色不是：“一张完整图片”
而是：
- 底图 (防粿体被抓包,特意加密了)
- 衣服 A
- 衣服 B
- 衣服 C
- 配饰
- 遮挡层
不停叠。
“脱衣”其实是图层管理
玩家赢了：
- 按设定好的顺序移除一件衣服
电脑赢了：
- 再按逆序穿回来
听起来简单。
实际上会遇到一堆问题：
比如“不能瞬间露底图”
这个特别关键。
如果你：
先删旧衣服
再加新衣服中间可能会闪出底图。
于是视觉效果会特别怪。
所以我后来用了：reveal 覆盖逻辑
新的层会立刻顶上。
尽量避免：
“裸体一帧闪现”。
虽然本身这项目看起来不正经
但至少技术上要优雅。
WebGL 在这里真的很舒服
这个项目我最后选 WebGL 做。
原因很简单：图层太多。
而且：
- alpha 混合
- 多 sprite
- 动态切换
特别适合 GPU 干。
如果你用DOM干,可能就会被人审查元素扒衣服🥵
Atlas 真的是好文明
项目里大量东西都是 atlas。
也就是：一张大图切很多小图。
这样有几个好处：
- 少加载:不用疯狂请求几十张 PNG。
- 好管理:所有素材都在一起。
- WebGL 特别喜欢,GPU 本来就很适合这种：“一张纹理反复采样”。
我甚至还写了个调试工具
这个是我后来觉得最实用的部分。
因为：调 sprite 位置真的太折磨了。
尤其是：
x
y
w
h
z-index全手填的时候,人会疯。
所以我直接做了个 devtools
可以：
- 勾选显示哪些衣服
- 拖拽移动
- 实时改位置
- 改层级
- 复制 JSON 配置
瞬间舒服很多。
这项目让我重新理解“前端游戏”
其实浏览器现在已经强得离谱。
Canvas2D、WebGL、requestAnimationFrame 这些东西组合起来。
已经足够做很多：
- 小游戏
- 视觉小说
- Live2D 风格效果
- 角色互动系统
甚至一些轻量 galgame。
最后
这个项目本质上还是个技术实验,只是实验方向稍微有点不正经。
但它确实让我把：
- WebGL
- sprite atlas
- 图层系统
- 动画状态管理
这些东西狠狠练了一遍。
而且：
用“整活项目”学技术，真的比写 TodoList 快乐太多了。
在线试玩:https://iajue.github.io/CanvasGame/undressing/index.html
如果你还记得她: 《论网速快慢的区别》
已经不是第一次请出她整活了.(ps:赤井心，暱稱哈洽馬，是日本一位活躍在YouTube上的虛擬YouTuber，所屬事務所為hololive)
最新评论