What I Built
I created a classic Alien Shooting Game where the player must shoot down incoming aliens while avoiding game over. The game features two levels, and players can track their score as well as the highest score achieved. It also includes interactive buttons for Play, Resume, and Restart, with smooth animations to enhance the gaming experience.
The player controls a spaceship that can move vertically using the arrow keys and shoots with the space bar. Aliens progressively become more difficult to defeat as the levels advance.
Demo
Play the Alien Shooting Game
https://codepen.io/Sp39/pen/YzvwaaZ
Journey
I took inspiration from retro arcade games and challenged myself to create a browser-based alien shooter using HTML5, JavaScript, and Canvas. I used CSS for styling and added custom animations to the buttons to make the game feel more dynamic.
Key Features:
Scoring System: Keeps track of the current score and stores the highest score using localStorage, allowing players to beat their personal bests.
Levels: Each time all aliens are defeated, the level increases, and the difficulty ramps up with more and faster aliens.
Responsive Design: The game works well across different screen sizes, though it's best experienced on a desktop.
What I Learned
Canvas Animations: I deepened my understanding of how to use the Canvas API for game development, including how to create smooth movements for characters and background elements.
Game Loops: Learning about game loops and how to effectively manage different states like Play, Pause, and Restart was a fun challenge.
Local Storage: Implementing a way to store and retrieve the highest score gave me more insight into using browser storage efficiently.
Next Steps
Mobile Controls: Add touch controls for a more mobile-friendly experience.
More Levels and Enemies: I plan to introduce more levels with unique alien designs and more complex enemy behavior.
Sound Effects: Incorporating sound effects for shooting and alien destruction will make the game more immersive.
Top comments (0)