🎮 Idle War Mini Game – How I Built the MVP from Scratch

on

🧭 Overview

Idle War Mini Game is a lightweight auto-battle game designed to deliver quick, engaging gameplay. The player stands in the center, automatically firing projectiles while enemies spawn from random directions. As the game progresses, the player levels up and upgrades their abilities to survive longer waves.

This post outlines how I built the MVP (Minimum Viable Product), what features were prioritized, and how I handled early UI/UX design and game mechanics.





🛠️ Tech Stack

  • Core Languages: HTML, CSS, JavaScript (Vanilla)

  • Editor: Visual Studio Code

  • Version Control: Git + GitHub Desktop

  • Assets: Custom and open-source sprite images


🔑 Key Features Implemented (MVP)

✅ Core Gameplay Loop

  • Automatic shooting at intervals

  • Enemies spawn randomly and move toward the player

  • Collision detection (enemy hits player or bullets hit enemies)

✅ UI & HUD

  • Top bar shows: HP, Score, and Level

  • Bottom panel for upgrades and skill tracking

  • XP bar at the bottom with animated fill

✅ Upgrade System

  • Increase Attack Power

  • Improve Fire Rate

  • Unlock/Enhance Multi-Shot

  • Accelerate enemy spawn rate ("Spawn Faster" button)

✅ Game States

  • Start Menu → Start Game

  • In-game UI and combat

  • Game Over Screen with Restart Button


✨ UI/UX Polish

  • Unified orange-gradient style for all buttons to create visual consistency

  • Compact top stats row for clarity

  • Centered game-over overlay with skull icons and restart CTA

  • Smooth XP bar animation using transition


🧠 Gameplay Balancing Decisions

  • Multi-shot angle logic adjusts dynamically based on the number of bullets

  • Closest enemy targeting logic improves the shot accuracy

  • Game difficulty scales over time: spawn rate increases every few levels

  • Player gains 1 skill point per level-up and can freely allocate upgrades


⚙️ Line Ending Issue in Git (CRLF vs LF)

While working on Windows, I encountered a Git warning:

This diff contains a change in line endings from 'LF' to 'CRLF'

To avoid inconsistent line endings between Windows and Unix-like systems, I added this line to .gitattributes:

* text=auto





🧪 Playtesting Notes

  • Runs smoothly in Chrome, Edge, and Firefox

  • Reaching level 20+ introduces fast-paced bullet storms

  • Upgrade pacing is intentionally gradual, making each skill point meaningful


📝 Reflections & Learnings

✅ What Went Well

  • MVP was built and tested within a few days

  • Auto-shooting + spawn system works cleanly

  • UI polish really helped make it feel “finished”

🔧 What Can Be Improved

  • Add more enemy types (e.g., flying, ranged)

  • Introduce a wave system or boss fights

  • Add sound effects and background music

  • Make it mobile-responsive (currently optimized for desktop)



🚀 Next Steps

  • Add new enemies with unique behaviour

  • Introduce boss stages at specific levels

  • Implement local storage or save system

  • Deploy to GitHub Pages or a personal portfolio

  • Optionally refactor using Canvas, WebGL, or a game framework like Phaser.js.



Comments

Post a Comment