DEV Community

Takane Ichinose
Takane Ichinose

Posted on

11 5

CSS Only Dog Walk Puzzle Simple Game

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:

  1. At the bottom right of the screen, the β–· (Triangle facing right) icon will make you move to the right.
  2. At the bottom right of the screen, the ◁ (Triangle facing left) icon will make you move to the left.
  3. 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.

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post

Top comments (4)

Collapse
 
guscarpim profile image
Gustavo Scarpim β€’

Very nice!

Collapse
 
takaneichinose profile image
Takane Ichinose β€’

Thank you very much for viewingβ€ΌοΈπŸ˜ƒ

Collapse
 
grahamthedev profile image
GrahamTheDev β€’

Love it!

Collapse
 
takaneichinose profile image
Takane Ichinose β€’

Hello😊 Thank you for viewingπŸ˜ƒ

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❀️