CodepenChallenge On and Off
I hope this is considered as microinteractions. 😅
This game is full of hidden radio buttons, and checkboxes inside.
CSS only simple game built with Pug, SCSS, and pixel-art images.
I actually intended to draw a cat, but when I tried, the result looked like a dog, so I decided to make this game a 'dog' game.
When one of the radios/checkboxes was ticked, the controls will hide/show depends on the condition.
I thought of this game because in recent times, the switches element are created by hidden checkboxes anyway.
There are actually many rendered controllers on the DOM, but are just hidden.
The Dog is also animated when moving. Although the dog stays at the center while moving.
The actual moving objects are the background. Which I also used parallax to animate. The 'farthest' object moves slower than the 'nearest' object. Which covers the 'parallax effect'.
Recently, I've been studying the ways to draw a pixel art. Which I found interesting.
Although stated at the instructions, here is how to control the game:
- At the bottom right of the screen, the ▷ (Triangle facing right) icon will make you move to the right.
- At the bottom right of the screen, the ◁ (Triangle facing left) icon will make you move to the left.
- At the bottom left of the screen, the fang or tooth or whatever icon will make you interact with the object.
Because this is just a simple game, there aren't that much puzzles that will make you think.
Just move further, take away the obstacle, and get the bone. Simple isn't it?
I used Paint.NET to draw the assets.