Help Sharkie overcome his biggest fear, Orcazar, in this exciting Jump-and-Run game created using HTML, CSS, and JavaScript with an object-oriented approach.
- HTML
- CSS
- JavaScript (Object-oriented programming)
- Collecting Items: Gather coins or poison bottles.
- Move and Attack: Swim and attack with Sharkie using your keyboard or on smaller devices, use the buttons.
- Settings: Customize your gaming experience - go full screen, check the game settings, or mute the game.
Learn how to navigate through the game:
- Movement: Use WASD or arrow keys to move Sharkie.
- Attacks:
- Space: Finslap to attack pufferfishes
- H: Bubble to attack jellyfishes
- J: Poisoned bubble to attack Orcazar
I started by rendering a canvas to create the game's foundation. The process involved drawing images for the background, health and inventory bars, collectible items, enemies, and Sharkie. Here's a breakdown of the development steps:
- Movement Implementation: Enabled Sharkie to move in all directions.
- Level Design: Placed enemies and collectibles strategically on the map.
- Enemy Spawning: Implemented random spawning for pufferfishes and fixed spawning for jellyfishes and Orcazar.
- Animations: Animated collectibles, Sharkie, and enemies using image arrays and intervals.
- Collision Detection: Checked for collisions with enemies, items, and map boundaries.
- Event Animations: Introduced animations for hurt and death events for Sharkie and enemies.
Throughout this project, I gained valuable insights into object-oriented programming and game logic. Designing even a simple game highlighted the complexity involved. As a gamer, it deepened my appreciation for the complexity of game development and development in general. Additionally, the OOP concepts learned here proved beneficial when later delving into Angular.
Here are some ideas to enhance the game:
- Add more levels
- Introduce different difficulty levels
- Go deeper in the game logic
Feel free to contribute and make Sharkie even more exciting!