DEV Community

Cover image for [Web Game Challenge]: Alien Invasion: Developer's Call
Krisztián Maurer
Krisztián Maurer

Posted on

[Web Game Challenge]: Alien Invasion: Developer's Call

This is a submission for the Web Game Challenge, Build a Game: Alien Edition

What I Built

I created a game called Alien Invasion: Developer's Call, where developers must defend Earth from an alien invasion using their coding skills. The game features a series of coding challenges that test different aspects of programming, from controlling Vim Snake to crafting regular expressions and writing targeting algorithms.

The story follows an alien invasion in 2054 where Earth's defenses have been disabled by flawless alien code. Developers are the last line of defense, and players must complete each challenge to save the world. The game consists of four main missions:

Demo

You can play the game here: Alien Invasion: Developer's Call - Live Demo

The code is available on GitHub: GitHub Repository

Journey

The idea behind Alien Invasion: Developer's Call was to combine coding challenges with an engaging narrative about an alien invasion. I wanted to create a fun way for developers to test and improve their coding skills in a game format.

Process

  • Game Design: I designed the game to include different types of coding challenges, starting with a simple Vim Snake game and gradually increasing difficulty with regular expressions and algorithmic challenges.
  • Tech Stack: I used React for the UI, Vite for fast builds, and TypeScript to maintain type safety throughout the project.
  • Deployment: I deployed the game using GitHub Pages, which made it easy to host a live version for players to access directly from their browser.
  • Text-to-Speech: I integrated a text-to-speech feature to make the game's story listenable, adding to the immersive experience.

What I Learned

  • Regular Expressions: Creating the challenges helped me improve with RegExp and see how flexible and powerful they can be in games.
  • State Management: Managing state across React components was crucial for smooth gameplay. Handling transitions between missions was a rewarding challenge.
  • User Experience: Balancing difficulty, providing hints, and giving clear feedback helped create an engaging experience.

  • Game Flow and Story: I learned to manage the flow between missions, ensuring each challenge fit into the narrative.

  • Time Management: I only had 3 days to complete the project, so I used AI to speed things up and made compromises where needed.

What I'm Proud Of

I'm especially proud of the Turret Defense Challenge, where players write their own aiming script. It’s a fun way to test creativity and algorithmic skills.

What’s Next

Some features I wanted to add but didn't have time for:

  • Developer Roles: Players could choose roles like web dev or hacker, each improving certain skills.
  • Difficulty Levels: I planned to introduce easy, medium, and hard game modes.
  • More Challenges: I'd like to add more coding tasks, like debugging and data structure challenges.
  • Multiplayer Mode: A future version could include multiplayer missions for collaboration or competition.
  • Leaderboard: Adding a leaderboard to allow players to see how they rank.

Top comments (0)