A sleek, highly polished, single-player turn-based web card game implementation of Scoundrel (originally designed by Zach Gage and Kurt Bieg). Built with React 19, TypeScript, Tailwind CSS v4, Framer Motion animations, and Web Audio API sound synthesis.
In Scoundrel, you venture deep into a dungeon represented by a 44-card deck. Your objective is to clear every room and survive the entire deck with as much health and score as possible.
Constructed from a standard 52-card deck by removing:
- Both Jokers
- All Red Face Cards (J, Q, K of Hearts & Diamonds)
- All Red Aces (Ace of Hearts & Ace of Diamonds)
| Card Suit | Type | Values | Description |
|---|---|---|---|
| Spades & Clubs | 💀 Monsters | 2–10, J (11), Q (12), K (13), A (14) |
Monsters dealt damage equal to their value. |
| Diamonds | ⚔️ Weapons | 2–10 |
Reduces monster damage & sets attack threshold. |
| Hearts | ❤️ Potions | 2–10 |
Restores HP equal to card value (Max 20 HP). |
- Room Phase:
- Deal 4 cards face up from the deck into the Room.
- You must interact with (play) 3 out of 4 cards in the room to clear it.
- The 4th unchosen card carries over into the next room alongside 3 newly drawn cards.
- Potions (Hearts):
- Restores HP up to your maximum cap of 20 HP.
- Only 1 potion yields healing per room. A second potion played in the same room is discarded without restoring health.
- Weapons (Diamonds):
- Equipping a new weapon replaces any currently equipped weapon.
- Equipping a weapon resets its last slain monster threshold to
None.
- Monsters & Combat:
- Bare-handed Combat: You take damage equal to the monster's full value.
- Weapon Combat: You can use your equipped weapon only if the monster's value is strictly less than the last monster slain by this weapon (Exception: The first monster fought with a new weapon can be of any value).
- Damage Taken:
Math.max(0, Monster Value - Weapon Value). - Defeating a monster with a weapon updates its last slain threshold to that monster's value.
- Tactical Retreat (Fleeing):
- You may click Flee Current Room only if all 4 cards are present and you did not flee the immediately preceding room.
- Fleeing places all 4 room cards face down at the bottom of the deck and draws a fresh room of 4 cards.
- Defeat (HP ≤ 0): Score =
HP - 20(e.g.-20if dying at 0 HP). - Victory (Dungeon Cleared): Score =
20 HP + (Equipped Weapon ATK - Last Slain Monster Value)plus bonuses for finishing with full health.
- Responsive Dark Dungeon Aesthetic: Modern UI with glowing accents, dark slate/zinc panels, and custom scrollbars.
- Top Control Bar: Includes real-time deck count, discard count, score tracker, sound toggle, rules guide, and instant restart.
- Sleek Health Bar: Positioned directly above the room play area with fluid progress fill animation.
- Dynamic Centering Layout: Room cards smoothly recenter on the screen using Framer Motion layout transitions as cards are played.
- Centered Weapon Footer: Fixed bottom bar showcasing equipped weapon status, last slain monster value, and current attack threshold.
- Synthesized Web Audio FX: Built-in Web Audio API sound effects for card deals, weapon clangs, potion sips, combat hits, flee whooshes, and victory/defeat fanfares.
- Victory Celebration: Interactive confetti explosion powered by
canvas-confetti.
- Framework: React 19 + Vite
- Language: TypeScript
- Styling: Tailwind CSS v4 with
@tailwindcss/vite - Animations: Framer Motion
- Icons: Lucide React
- FX: Web Audio API & canvas-confetti
- Node.js (v18+ recommended)
- npm
-
Clone the repository:
git clone https://github.com/lazydictionary/scoundrel-game.git cd scoundrel-game -
Install dependencies:
npm install
-
Start the Vite development server:
npm run dev
Open your browser at
http://localhost:5173/. -
Build for production:
npm run build
- Original game concept designed by Zach Gage and Kurt Bieg.