🪙 Coin Collection System

📌 Project Overview

This project implements a Coin Collection System where multiple floating coins are placed around the map.

When a player touches a coin:

• The coin disappears\
• The player's coin count increases\
• The UI updates to display the new total

This system demonstrates:

• Collision handling\
• Per-player data tracking\
• Real-time UI updates\
• Coin respawn system (Extra Credit)\
• Floating/rotating animation (Extra Credit)

---

🎮 Features

1️⃣ Coin Interaction

• Coins are placed around the map.
• When a player touches a coin:
  • The coin disappears.
  • The player's total coin count increases.
  • The UI updates instantly.

2️⃣ Per-Player Data Tracking

• Each player has their own independent coin counter.
• Data is stored and managed individually per player.

3️⃣ UI Display

• A UI element shows:

  Coins: X

• Updates automatically when coins are collected.

4️⃣ Extra Features

• Coins respawn after a short delay.
• Coins have floating or rotating animations for visual appeal.

---

🛠 Technologies Used

• Vite\
• TypeScript\
• React\
• shadcn-ui\
• Tailwind CSS

---

🚀 Getting Started

Follow these steps to run the project locally:

# Step 1: Clone the repository using the project's Git URL.
git clone https://github.com/Samitha-Edirisinghe/Coin-Collection-System.git

# Step 2: Navigate to the project directory.
cd Coin-Collection-System

# Step 3: Install the necessary dependencies.
npm i

# Step 4: Start the development server with auto-reloading and an instant preview.
npm run dev

---

🧠 Learning Objectives

This project helps you understand:

• Collision detection
• Event-driven programming
• Player data management
• UI updates based on game state
• Object respawning logic
• Basic animation scripting

---

📈 Future Improvements

• Persistent data saving\
• Leaderboard integration\
• Sound effects on collection\
• Particle effects\
• Different coin values (Gold, Silver, Bronze)

---

👨‍💻 Author

Samitha Edirisinghe