card collector

🎴 CARD COLLECTOR — HTML Edition

==================================

Collect cards, avoid enemies, and use powerups in this fast‑paced arcade adventure! Navigate through a vibrant grid world, gather cards of different rarities, and survive waves of enemies that chase you. Level up, earn coins, and discover powerful abilities to help you on your journey!

🎮 What Makes It Special?

--------------------------

🃏 Card Collection System

- 9 unique card names (Fire, Water, Earth, Air, Light, Dark, Mystic, Nature, Shadow)

- 4 rarities: Common, Rare, Epic, Legendary

- Each card gives points and coins — higher rarities are worth more

- Weighted rarity system ensures Legendary cards feel truly special

🧠 Enemy AI

- Enemies chase the player with realistic movement

- Each enemy has a slight wobble for more dynamic behavior

- Enemy speed scales with level — difficulty increases naturally

- Visual feedback: angry eyebrows and glowing red eyes

⚡ Powerup System (4 types)

- Speed — move faster for a limited time

- Shield — become invincible to enemy damage

- Magnet — attract nearby cards from a distance

- Double Points — earn double points and coins from cards

📈 Progression

- Collect all cards to advance to the next level

- Each level increases difficulty and rewards

- Score and coins persist between levels

- Health management — avoid enemies or use shields

✅ Game Features

-----------------

✔ Smooth 8‑way movement (WASD or Arrow Keys)

✔ 4 card rarities with distinct visual styles

✔ 4 powerups with duration timers and visual feedback

✔ Dynamic enemy AI that scales with level

✔ Health bar with color‑coded feedback (green → orange → red)

✔ Floating card collection with animation

✔ Active powerup indicators on HUD

✔ Inventory panel showing collected cards

✔ Pause functionality (Press P)

✔ Game Over and Win screens with stats

✔ Responsive design — works on desktop and mobile

✔ Clean visual style with grid‑based background

🕹️ How to Play

---------------

Getting Started

- You start with 5 health and 0 cards

- Move your blue character using WASD or Arrow Keys

- Collect cards to earn points and coins

- Avoid red enemies — they drain your health

- Collect powerups to gain temporary advantages

Winning Condition

- Collect ALL cards on the map to win the level

- Each level increases in difficulty (more enemies, more cards)

- Your score and coins carry over to the next level

Losing Condition

- Lose all 5 health points — Game Over

- You can restart with R or SPACE

Pro Tips

- 🛡️ Use Shield powerups when surrounded by enemies

- 🧲 Magnet is amazing for clearing cards quickly

- 💨 Speed helps you dodge enemies and collect cards faster

- ⭐ Double Points + high rarity cards = massive score gains

- 🔄 Keep moving! Standing still makes you an easy target

🎮 Controls

------------

W / ↑       → Move Up

A / ←       → Move Left

S / ↓       → Move Down

D / →       → Move Right

P           → Pause / Resume

R / SPACE   → Restart (Game Over) / Continue (Win)

🖱️ Mouse    → Click buttons in UI panels

🎨 Visual Style

----------------

- Grid‑based world with alternating green tiles

- Color‑coded cards by rarity (Common: gray, Rare: blue, Epic: purple, Legendary: gold)

- Distinct powerup colors (Speed: green, Shield: blue, Magnet: yellow, Double Points: pink)

- Animated elements: card floating, enemy wobble, powerup rotation

- Health bar with dynamic color feedback

- Shield pulse animation when active

- Magnet attraction lines with pulse effect

🔊 Feedback & Polish

---------------------

- Floating messages when collecting cards and powerups

- Flash effect on player when damaged

- Active powerup timers displayed on HUD

- Inventory panel shows collected cards

- Powerup panel shows active abilities with remaining time

- Score, coins, and health update in real‑time

- Clean menu transitions for Game Over and Win screens

📱 Platform

------------

- Playable in any modern browser (Chrome, Firefox, Edge, Safari)

- Mobile‑friendly responsive design

- No downloads — just open the page and play

- Built with vanilla HTML, CSS, and JavaScript

👨‍💻 Tech Stack

----------------

- HTML5 + CSS3 — structure and styling

- JavaScript (ES6) — game logic and rendering

- Canvas API — 2D rendering engine

- No external dependencies — everything is self‑contained

📝 Changelog

-------------

v1.0 — Initial HTML Edition

- Full game with card collection, enemies, and powerups

- 4 card rarities with weighted distribution

- 4 powerup types with duration timers

- Level progression system

- Responsive UI with stats, inventory, and controls panels

🔮 Coming Soon

---------------

- 🏪 Shop system (spend coins on permanent upgrades)

- 🏆 Achievements and milestone rewards

- 🔊 Sound effects and background music

- 📊 More detailed statistics screen

- 🌟 Special event cards (limited time)

- 🤖 More enemy types (fast, tank, boss)

📌 Quick Start

---------------

1. Open the game — you start with 5 health

2. Move around to collect cards (green/blue/purple/gold squares)

3. Avoid red enemies that chase you

4. Collect powerups (special colored squares) for buffs

5. Collect all cards to win the level

6. Advance through levels and build your card collection!

🎴 From a simple collector to a legendary card master — start your collection today!

🏷️ Tags

--------

Card Collector, Arcade, Collection, Powerups, Strategy, Action, Survival, Level Progression, RPG, Casual, HTML5, Canvas

Made with ❤️ · Collect, survive, and become a legend!