This content originally appeared on DEV Community and was authored by DHANUSH N
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
element. It also uses the 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.
You can check out the code and licence for the repository here
Thanks for reading, please give a like as a sort of encouragement and also share this post in socials to show your extended support.
Follow for more ⏬
X / Instagram / Github / Youtube / Newsletter / Discord
This content originally appeared on DEV Community and was authored by DHANUSH N
DHANUSH N | Sciencx (2024-09-29T15:13:16+00:00) Alien Defender Game. Retrieved from https://www.scien.cx/2024/09/29/alien-defender-game/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.