MiniStars

MiniStars: A mini Brawl Stars clone for the browser, built solo with Angular & pure frontend tech.

Comment

🧠 Inspiration

We were inspired by the fast-paced gameplay and polish of Brawl Stars and wanted to create a simplified, browser-based version playable entirely using frontend tech. The idea was to blend game development with Angular, pushing the boundaries of what's possible in a web app — all without a backend or game engine.

🎮 What it does

MiniStars is a lightweight browser arena game where players:

  • Select a map and brawler
  • Set the difficulty
  • Enter the arena to battle AI bots
  • Shoot using the spacebar and dodge attacks
  • Pick up power-ups to heal
  • Win by eliminating all bots or lose if defeated

It’s fully playable, works on desktop browsers, and is built entirely in Angular using HTML5 Canvas.

🛠 How we built it

  • Framework: Angular 17 (standalone components)
  • Styling: Tailwind CSS
  • Canvas Rendering: HTML5 Canvas 2D API
  • State Management: Angular services
  • Assets: Images from Supercell Creator Kit and open game art
  • Routing: Angular router for screen transitions (Home → Maps → Brawlers → Arena)

All logic (movement, firing, AI, collisions, game-over conditions) is written from scratch using TypeScript and the native canvas context.

🧗‍♂️ Challenges we ran into

  • Creating a smooth canvas-based game inside Angular's component system
  • Handling sprite assets and fallback for failed image loads
  • Managing real-time movement and physics without a game engine
  • Making it visually clean and snappy with only frontend tech
  • Integrating AI behavior (chase + shoot + cooldown logic)

🌟 Accomplishments that we're proud of

  • Fully working Brawl Stars–style game with AI bots, multiple maps, brawlers, and powerups
  • Built entirely in the browser — no server, no DB, no backend logic
  • Used Angular in an unconventional way for game rendering
  • Polished UI with artwork from real assets
  • Solo-built and completed in time for the hackathon

📚 What we learned

  • Game logic using native Canvas with Angular
  • Sprite/image management and canvas drawing
  • Timing mechanics like ammo cooldown and health regeneration
  • Creating reusable and themeable UI components in Angular
  • Importance of game flow: map/brawler selection → battle → results

🚀 What's next for MiniStars

  • Add multiplayer support (WebRTC or socket.io)
  • Improve AI with smarter dodging, attack patterns, and difficulty levels
  • Add new weapons, brawler abilities, and stats
  • Introduce a map editor and level creator
  • Add touch controls for mobile
  • Deploy public demo and collect feedback
Share this project:

Updates