Spiky Cactus

Whisbloom

Uncover the Secrets to Your Business Growth

Introduction

In a vast desert, two cacti face off in a battle for survival. An Ancient Cactus (the player) defends its territory and life force against the Vampiric Cactus (the computer). Armed with three powerful abilities—Thorns, Human Hand, and Bug—both cacti must outwit each other until one’s Health Points are completely drained.

Design

The soft greens, browns, yellows, and reds are carefully chosen to evoke a vintage vibe, reminiscent of old-school posters and retro illustrations. Paired with a bold, rounded sans-serif font for the game title and buttons, the design carries a retro-modern aesthetic with a playful charm.


Primary
R195 / G190 / B170
C5C0A9
Secondary
R55 / G40 / B30
372721
 Color 3
R60 / G120 / B70
3E7945
Color 4
R215 / G95 / B85
D66155

 An Ancient Cactus & Vampiric Cactus


Flip the card

Flip the card

Game Rules

Starting Setup

Each cactus starts with 100 HP.
Both the player (Ancient Cactus) and the computer (Vampiric Cactus) have the same three cards.
Spiky (Thorn Attack): Strong against Human Hand.
Human Hand: Effective against Bug.
Bug: Feasts on cactus flesh and is strong against Spiky.

Card Counter System

Spiky > Human Hand: Thorns deal 20 damage.
Human Hand > Bug: The hand crushes the bugs, dealing 20 damage.
Bug > Spiky: Bugs bite through the cactus's defense, restoring 10 HP and dealing 10 damage.
Each turn, both players choose a card and reveal them simultaneously.

Victory Condition

The battle continues until one cactus’s HP drops to 0, declaring the other cactus as the winner.

Conclusion

I gained valuable experience in basic coding principles through this web game project. I learned how to use HTML, CSS, and JavaScript to add interactivity to the game. This project deepened my understanding of core programming concepts, such as conditional statements and DOM manipulation. It highlighted how these elements work together seamlessly to create an engaging user experience.