Inspiration Scrolling through Instagram, I often see these hyper-casual mobile game ads. They promise simple, addictive gameplay—collect a bigger army, dodge a few obstacles, and beat the final boss. They look so simple that a thought always lingered in my mind: "Could I build one of those myself?" This project, "Army Runner," was my answer to that question, a personal challenge to replicate the core mechanics of those fleeting, 15-second game advertisements.
What it does The game takes a simple concept—a player running up a lane, collecting good things, and avoiding bad things—and translates it into a working application. The army is represented by a numerical value and a visual swarm of smaller dots around the main player.
How we built it The project was built using vanilla HTML, CSS, and JavaScript, with a later refactoring to TypeScript for type safety, all within a single file. This constraint forced a focus on the essentials. I started with the most basic elements: an HTML canvas and a moving player character. The core of the game is a game loop that generates objects from the top of the screen and makes them move down towards the player. These objects are either "good" (green, increasing army size) or "bad" (red, decreasing it).
Challenges we ran into The primary challenge was implementing effective collision detection between the player and the different items. This required careful handling of the player's position and the items' coordinates to ensure the game logic was accurate and responsive.
Accomplishments that we're proud of Successfully implementing the dynamic army size change based on collisions was a major accomplishment, as it made the code feel like a real game. The project also proved that those viral ad games aren't magic, and are built on a solid foundation of repeatable, core mechanics, which was a satisfying personal discovery.
What we learned This project was an incredibly effective way to solidify my understanding of fundamental concepts like event handling, game state management, and the HTML canvas API.
What's next for Army-Dash To expand on this foundation, the next steps for Army-Dash could include adding new enemy types, implementing a score-based leveling system to increase difficulty, and designing a variety of power-ups to make the gameplay more dynamic. I'd also like to explore adding a simple final boss to provide a more definitive goal for each run.
Log in or sign up for Devpost to join the conversation.