Alien Invaders Game

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

What I Built

![Game Screen]

Overview
For this project, I built an alien-themed browser game called Alien Invaders using HTML, CSS, and JavaScript for the frontend and MongoDB, Express, and Node.js for the backend. The game features a space shooter where the player controls a spaceship, fires projectiles, and tries to defeat waves of alien invaders. The game is fully playable in a web browser, with the high score functionality saved in a database.

Approach
The project was divided into two main parts:

Frontend Game (HTML/CSS/JavaScript)

Game Mechanics:
I implemented the core game mechanics using JavaScript, including player movement, shooting, and collision detection with alien invaders. The player controls a spaceship that moves left and right, rotating slightly when moving, and can fire projectiles at the aliens. If the player's spaceship is hit by an alien projectile or the player loses all lives, the game ends. The player starts with 3 lives, and for each alien destroyed, they earn 100 points. Additionally, when the player is hit by an alien projectile and destroyed, the spaceship disintegrates into particles, adding a visual effect to enhance the experience.

Aspect Ratio (16:9):
The game is not fully responsive, but it maintains a 16:9 aspect ratio for optimal visual consistency across devices. The canvas and the game elements scale dynamically based on the screen size, ensuring that the game fits within the available window size while preserving the 16:9 ratio. This approach ensures that the game looks consistent on both desktop and mobile devices, although it doesn't fully adapt to all screen dimensions.

Audio Integration:
I integrated sound effects to enhance the player experience. There are sound effects for shooting, player death, and alien death, adding depth to the game's atmosphere.

Game Screens:
The game consists of three main game states:

Start Screen: A welcome screen with a button to start the game.
Game Screen: The main game loop occurs here. The player can see their score and the number of lives remaining. The game involves shooting alien invaders, dodging their projectiles, and trying to survive.
Game Over Screen: This screen appears when the player loses all lives. It displays the final score and the high score, with a button to restart the game.
Backend (Node.js/Express/MongoDB):
I implemented a backend using Node.js and Express, which connects to MongoDB for persistent data storage. The backend stores and retrieves the player's high scores.

High Score Storage: The game sends the player's high score to the backend when the game ends, and the backend saves it in the MongoDB database if it's a new high score.

API Endpoints:

GET /highscore: Retrieves the highest score stored in the database.
POST /highscore: Saves a new high score if the player achieves a higher score than the one previously stored.
Database: MongoDB is used to store the high scores. The schema is simple, with a single score field.

In summary, the game provides an engaging experience with smooth player controls, including spaceship rotation when moving, a dynamic scoring system, and a particle effect for the player’s destruction. It maintains a fixed 16:9 aspect ratio to ensure visual consistency across different devices and integrates sound effects to enhance the gameplay. The backend adds the functionality to store high scores for replayability and competition.

Demo

https://github.com/inesscatana/alien-invaders-game

Journey

Here's a response for your process, learnings, and plans for the future:

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: Throughout this project, I reinforced my knowledge of JavaScript, particularly in handling animations using the requestAnimationFrame() function. 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.

Integrating a backend with MongoDB also expanded my experience with full-stack development. Building an API with Node.js and Express to store high scores added depth to the game, providing replayability for players looking to beat their previous scores.

I also learned a lot about maintaining aspect ratio and handling scaling for canvas elements to create a consistent game experience across different screen sizes, although it's currently set to a 16:9 aspect ratio.

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.

Another highlight is the successful integration of the backend, allowing for persistent high score storage. This opens up a lot of possibilities for future features, like leaderboards and competitive play.

Next Steps: Next, I would like to:

Improve responsiveness: While the game maintains a 16:9 aspect ratio, I plan to make it fully responsive so it can adapt to various screen sizes without losing quality or cutting off elements.
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!