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.
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 ⏬
Top comments (6)
I like it. I’ve always found academic writing to be one of the hardest parts of college. Recently, I had a particularly difficult assignment, and I decided to use domypaper.com to help me out. The paper I got was even better than I expected, and the writer really knew the subject matter. The whole process was simple and stress-free, and they delivered the paper well before my deadline. I’m so glad I gave them a try!
Thanks
Nice!!! AI seems competent, but not overbearing... good job
Thank you 😊
Nice work.
Thanks