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:

  1. Fewer loads: no need to frantically request dozens of PNGs.
  2. Easy management: all assets are in one place.
  3. 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) 图 92