Random Battle Click

A simple, retro-style turn-based battle game built with Vue.js 2, featuring random player matchups and classic NES-inspired pixel art design.

Description

Random Battle Click is a fun, lightweight browser game where two randomly selected fighters face off in a turn-based battle. Players can attack, use a powerful special attack, heal (limited to 3 times), or surrender. The game tracks health, win counts, and battle logs in real-time, all wrapped in a nostalgic 8-bit aesthetic using NES.css.

Features

• Random player selection with avatars and names
• Turn-based combat: Attack, Special Attack, Heal (3 uses), Give Up
• Health bars with dynamic color changes
• Win counter with crown for the champion
• Battle log with alternating colored entries
• Responsive design (works on mobile and desktop)
• Retro NES-style UI

How to Play

1. Click Start Game to begin
2. Two random fighters will appear
3. Use the action buttons:
   • Attack: Deal normal damage to opponent
   • Special Attack: Deal higher damage
   • Heal: Restore health for both (limited to 3 times)
   • Give Up: End the battle early
4. Battle continues until one player's health reaches zero
5. Winner gets a crown and +1 win
6. Choose to Re-Battle or Exit

Technologies Used

• Vue.js 2
• NES.css (for retro styling)
• Vanilla JavaScript
• HTML5 & CSS3

Setup & Run Locally

1. Clone or download the project
2. Open index.html in your browser
3. No build tools or server required — it runs directly!

Credits

• UI Design inspired by NES.css by BcRikko
• Built as a fun Vue.js practice project

Enjoy the battle! ⚔️