Alien Invaders - A Space Adventure

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

What I Built

Alien Invaders is a space-themed, action-packed browser game where players must defend Earth against an onslaught of alien invaders. Equipped with nothing but their reflexes and quick thinking, players have to shoot down as many alien ships as possible to score points before time runs out. With a minimalist yet vibrant design and an addictive gameplay loop, Alien Invaders offers hours of fun.

The game is built using HTML5 Canvas, JavaScript, and CSS for responsive design, and features animated stars and interactive controls. The game scales seamlessly across different devices, from desktops to mobile screens, ensuring everyone can enjoy it.

Demo

You can play the game here: Alien Invaders Demo https://priyankatamhankar01.github.io/Alien-Drop-Galactic-Defense/

The code for the game is available here: GitHub Repository https://github.com/PriyankaTamhankar01/Alien-Drop-Galactic-Defense/tree/main

Journey

The Idea
For this challenge, I wanted to create something simple yet engaging that would fit the "Alien Edition" theme. Classic arcade-style space shooters have always been a favorite genre of mine, so I decided to build a retro-inspired game where players have to fend off waves of alien invaders.

The Building Process

The game is built with pure HTML5, CSS3, and JavaScript. I used the HTML5 Canvas API for rendering the game graphics, while JavaScript handles the game logic, including player movement, shooting, collision detection, and scorekeeping.

Key Features:

1. Alien Waves: Aliens appear randomly on the canvas, and the difficulty increases as more waves spawn.
2. Score System: Players earn points for every alien they shoot down, with a real-time score display.
3. Game Timer: There’s a timer counting down from 60 seconds, and the player has to achieve the highest score possible before time runs out.
4. Game Over and Replay: At the end of the timer, the game shows a "Game Over" screen with the player's final score, and players can restart with a single click.
5. Responsive Design: I used CSS media queries to ensure the game looks great on any screen size, with UI elements like the score and timer adjusting accordingly.
6. Twinkling Stars: The background is animated with a subtle twinkling star effect to give players an immersive space atmosphere.

Challenges

One of the biggest challenges was ensuring that the game was responsive across different screen sizes. Initially, the canvas would scale awkwardly on mobile devices, making the game difficult to play. I tackled this by switching to percentage-based widths and heights and using vw (viewport width) and vh (viewport height) units in the CSS to adjust the layout and game elements dynamically.

Another challenge was optimizing the collision detection system. Since this is a fast-paced game, it was important to ensure that the collisions between bullets and alien ships were detected accurately without slowing down the game.

What I Learned

This project taught me a lot about game development fundamentals, particularly using the HTML5 Canvas API for real-time rendering and animations. I also learned about optimizing code for performance and responsiveness, especially when building web games that need to run smoothly on both desktop and mobile devices.

What I’m Proud Of

I’m particularly proud of how the game feels on different devices. Making sure that the game scaled well and remained fully playable on mobile was a huge win. The clean, simple interface and engaging gameplay loop make it easy for anyone to pick up and enjoy, whether they’re a casual gamer or someone looking for a nostalgic arcade experience.