Alien Defender Game

#devchallenge #gamechallenge #gamedev #webdev

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

What I Built

I built an exciting web game called Alien Defender! It's a classic arcade-style shooter where you take control of a powerful spaceship and defend Earth from a relentless alien invasion.

Demo

Checkout the demo of the game here

Game is based out of moving mouse pointers, more features to be incorporated in future

Journey

Few things I already know and learnt while building this game

Image and Sound Integration: The code loads images for the paddles, ball, and background using the < img > element. It also uses the < audio > tag and Javascript to play background music and manage sound muting.
Dark Mode Functionality: The game includes a dark mode option. This function adjusts the background colour and icon based on a boolean flag (isDarkMode) and modifies the class names on the body element to style the game appropriately.
Basic Canvas Drawing: The drawEverything function uses the canvas context (canvasContext) to draw things onto the canvas. It utilises fillRect to fill the background and drawImage to show the paddles, ball, and win screen text.
coring System: The game keeps track of player scores (player1Score and player2). When a player misses the ball, the opposing player's score increases. If a player reaches the winning score (WINNING_SCORE), a win screen appears.
User Interaction: The code uses event listeners to record user input. The handleMouseClick method is called when a mousedown event occurs on the canvas, and it resets the game when the win screen is clicked. The mousemove event on the canvas allows players to manipulate the position of the first paddle (controlled by the mouse).
AI Movement: The second paddle is controlled by a rudimentary AI (function computerMovement). The AI modifies the paddle's Y position in an attempt to hit the ball.
Image and Sound Integration: The code loads images for the paddles, ball, and background using the < img > element. It also uses the < audio > tag and Javascript to play background music and manage sound muting.
Dark Mode Functionality: The game includes a dark mode option. This function adjusts the background colour and icon based on a boolean flag (isDarkMode) and modifies the class names on the body element to style the game appropriately.
Basic Canvas Drawing: The drawEverything function uses the canvas context (canvasContext) to draw things onto the canvas. It utilises fillRect to fill the background and drawImage to show the paddles, ball, and win screen text.