Continuing from: 《同一个动画，我用三种技术栈实现的区别?》
WebGL Rock-Paper-Scissors Mini Game (Anime Style)
The rules are pretty standard:
- Rock > Scissors
- Scissors > Paper
- Paper > Rock
But the fun part is:
Losing means taking off clothes.
Yep, it’s that straightforward.
The Origin Was Actually “I Wanted to Study Sprite Sheets”
At first, I had no intention of making a game at all.
I just wanted to study:
- atlas
- sprite
- layer compositing
- animation clipping
Stuff like that.
Then I thought: “There’s gotta be a real use case, right?”
And on a whim:
Might as well make an anime undressing rock-paper-scissors game.
Then the project went off the rails in a weird direction.
The Trickiest Part of This Project Isn’t Actually the Game Logic
Rock-paper-scissors rules are dead simple.
The real headache is: clothing layers
Because the character isn’t: “a single complete image”
But rather:
- base layer (encrypted to prevent getting caught with nudity)
- Clothing A
- Clothing B
- Clothing C
- Accessories
- Occlusion layer
Stacked on top of each other non-stop.
“Undressing” Is Actually Layer Management
When the player wins:
- Remove one piece of clothing in a predetermined order
When the computer wins:
- Put it back on in reverse order
Sounds simple.
In practice, you run into a bunch of problems:
For Example, “You Can’t Flash the Base Layer Instantly”
This is especially critical.
If you:
delete the old clothing first
then add the new clothing
The base layer might flash in between.
Making the visuals look really weird.
So I later used: reveal overlay logic
The new layer immediately covers on top.
Trying to avoid:
"A single frame of nudity flashing through."
Even though this project itself seems unserious
at least the technique should be elegant.
WebGL Is Really Comfortable Here
I ended up choosing WebGL for this project.
The reason is simple: too many layers.
And:
- alpha blending
- multiple sprites
- dynamic switching
Perfectly suited for the GPU.
If you did this with DOM, someone could just inspect element and strip the character 🥵
Atlas Is Truly a Blessing
A ton of stuff in this project uses atlas.
Meaning: one big image cut into many small images.
This has several benefits:
- Fewer loads: no need to frantically request dozens of PNGs.
- Easy management: all assets are in one place.
- WebGL loves it — the GPU is naturally suited for this: “sampling from a single texture repeatedly.”
I Even Built a Debug Tool
This was the most practical part in retrospect.
Because: adjusting sprite positions is pure torture.
Especially when:
x
y
w
h
z-index
are all filled in by hand — it drives you insane.
So I Just Made a Devtool
It can:
- Toggle which clothing layers are visible
- Drag to reposition
- Modify positions in real time
- Adjust layer order
- Copy JSON config
Instantly much more comfortable.
This Project Made Me Rethink “Frontend Games”
Honestly, browsers are ridiculously powerful now.
Canvas2D, WebGL, requestAnimationFrame — combining these.
Is already enough to make many:
- mini games
- visual novels
- Live2D-style effects
- character interaction systems
Even some lightweight galgames.
In the End
This project is essentially still a tech experiment, just the direction is a bit unserious.
But it really let me drill:
- WebGL
- sprite atlas
- layer system
- animation state management
through intense practice.
And:
Learning tech through “troll projects” is genuinely way more fun than writing another TodoList.
Play online: https://iajue.github.io/CanvasGame/undressing/index.html
If you still remember her: 《论网速快慢的区别》
This isn’t the first time she’s been called in for a troll project. (ps: Akai Shin, nickname Hachima, is a Japanese virtual YouTuber active on YouTube, affiliated with hololive)
