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

What I Built

Overview

Alien Invaders is a browser-based arcade game inspired by the classic "Space Invaders," developed using HTML, CSS, and JavaScript. The player controls a spaceship at the bottom of the screen and must shoot waves of alien invaders as they descend from the top. The game provides immersive sound effects, responsive design, and dynamic game mechanics, offering a fun and challenging experience across different device sizes.

Demo

Live
Github

Game Mechanics

Player Controls:

• The player controls a spaceship that can move horizontally across the screen using the left (←) and right (→) arrow keys.
• The spaceship moves quickly and has a rotation mechanic, giving the impression of smooth turning when moving left or right.
• When moving left or right, the spaceship slightly tilts or rotates for added visual effect and immersion, adding a dynamic feel to the gameplay.

Alien Invaders:

• The aliens move horizontally across the screen in a formation and drop down toward the player periodically, similar to classic space shooter games.
• Aliens shoot projectiles toward the player, and the player must avoid these or risk losing lives.

Shooting and Projectiles:

• The player can shoot projectiles upward to hit and destroy aliens by pressing the spacebar (Space key).
• There is a cooldown between shots, preventing rapid-fire spamming.

Player Rotation Mechanic:

• As the player moves left or right, the spaceship slightly rotates for a smoother, more dynamic control experience. This adds a polished, modern touch to the game mechanics.

Player and Alien Explosions:

• When the player or an alien is hit, explosions of particles occur at the point of impact. This adds a visually immersive effect, making it look like they explode upon destruction.
• The background is filled with small particle animations, simulating stars, to give the sensation that the player is floating in space.

Game Screens

Start Screen: The game begins with a Start Screen that displays the title, "Alien Invaders," along with a "Start Game" button.
Upon clicking the Start Game button, the cover screen disappears, and the gameplay begins.

Gameplay Screen: During the game, the player sees the game canvas, their score, and the number of lives remaining.
The player's spaceship is controlled in real-time, and the objective is to destroy as many aliens as possible while avoiding alien projectiles.

Game Over Screen: If the player loses all their lives, the Game Over screen is displayed.
The final score and the high score (retrieved from localStorage) are shown.
There is an option to restart the game via a "Restart" button, allowing the player to try again.

Audio Effects

The game includes four distinct sound effects to enhance the gameplay experience:

Shooting Sound: Played every time the player shoots a projectile
Alien Death Sound: Played when the player successfully hits and destroys an alien.
Player Death Sound: Played when the player is hit by an alien's projectile and loses a life.
Game Over Music: Played when the player loses all their lives and the game ends.

High Score with LocalStorage

The game tracks the player's high score using the browser's localStorage. After each game session, the player's score is compared with the existing high score. If the player's score exceeds the current high score, it is saved to localStorage, ensuring that it persists across game sessions.

3 Lives Mechanic

The player begins the game with three lives, displayed as spaceship icons in the top-right corner of the screen. Every time the player is hit by an alien's projectile, one life is deducted. If the player loses all three lives, the game ends.

The player starts with three spaceship icons (lives).
Each time the player loses a life, one icon disappears.
The game ends when all lives are lost, and the Game Over screen is displayed.

Alien Kill Scoring

Each time the player destroys an alien, they earn 100 points. The score is displayed on the screen and updated in real-time.

Journey

Process: My approach to building this game started with designing the core mechanics. I focused first on implementing smooth player movement, shooting mechanics, and collision detection between the player, projectiles, and alien invaders. From there, I expanded the functionality to include the different game states (Start Screen, Game Over Screen) and integrated a scoring system that tracks the player’s performance.

I paid special attention to the visual effects, such as spaceship rotation when moving and particles when the player is destroyed. These small touches, though simple, make the gameplay more dynamic and visually satisfying. I also added audio to elevate the experience, making each action, like shooting and alien destruction, more immersive.

What I learned ? Managing the game’s state and transitions between screens (start, game, and game over) helped me better structure game logic, ensuring that various elements (like score and lives) updated fluidly.

Proud Of: I'm particularly proud of how the game mechanics came together. The combination of smooth spaceship movement, shooting mechanics, and rotation added a nice layer of polish to the gameplay. The particle effect when the player is destroyed also stands out to me as a feature that improves the visual feedback and makes the game more satisfying to play.

Next Steps: Next, I would like to:

Enhance gameplay mechanics: I’d like to add more levels, power-ups, and different types of enemies to increase the game's challenge and replayability.
Add a leaderboard: Displaying a global leaderboard using MongoDB would create a competitive aspect, encouraging players to achieve higher scores.
Improve the UI/UX: Refining the interface, especially for mobile devices, would improve the player's overall experience.
Overall, this project has been a rewarding experience, and I look forward to expanding it further!