CSS Only Dog Walk Puzzle Simple Game

#codepen #webdev #gamedev #css

CodepenChallenge On and Off

Description

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.

Controls

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.

Objective

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?

Tools

This game doesn't have any Javascript code for the functionality (Except the comment, and Pug's (or Jade) Javascript). But heavily relies on SCSS' loop, which makes the SCSS code so large when compiled.

I used Paint.NET to draw the assets.