https://catch-them-all.vercel.app/
Catch.them.all.mp4
Catch them all is an interactive web-based game built using HTML5 Canvas and JavaScript. The game challenges players to catch Pokémon by throwing Pokéballs as they move across the screen. Each level increases in difficulty with faster-moving Pokémon and special events.
- HTML Canvas: For rendering game graphics.
- JavaScript: Used to create game logic, control animations, and manage game states.
- CSS: Styles the game canvas and UI elements for a visually appealing experience.
- Arrow Up, Arrow Down, Arrow Right, Arrow Left: Move the player character.
- Spacebar: Throw a Pokéball.
- M Key: Use a Masterball to catch all Pokémon on the screen.
- Enter: Pause or resume the game.
- Start the Game: Click the 'Start Game' button on the initial screen.
- Catch Pokémon: Use the arrow keys to move your character up and down to align with Pokémon. Press the spacebar to throw Pokéballs.
- Avoid Missing Pokémon: Missing Pokémon will result in a loss of life.
- Score Points: Catching Pokémon earns points. Different Pokémon are worth varying amounts of points.
- Rare Pokémon: They are worth more points and carry extra bonuses.
- Use Masterballs: Special masterballs can catch all Pokémon on the screen at once. Use them wisely!
- Advance through Levels: Catch the right number of Pokémons to advance to the next level, which features and different backgrounds and increased difficulty.
- Lives: The player starts with three lives. Contact with certain Pokémon may result in a loss of life.
- Enemies: Beware of enemies that can reduce your score, items and lives.
- Canvas: The game is rendered on a
<canvas>element, centered in the browser window.
- Styling: The canvas and other UI elements are styled using CSS to enhance the visual appeal and user experience.
- Game: Manages game loop, game state, and interaction between game elements.
- Player: Handles player movement, rendering, and interactions.
- Pokémon: Represents individual Pokémon with their properties like speed, position, and score value.
- Pokeball: Manages the creation and movement of Pokéballs.
- ScorePopup: Displays a popup score when the player catches a Pokémon.
- Game Loop: The game loop controls the rendering and updating of game elements.
- Collision Detection: Detects collisions between player, Pokéballs, and Pokémon.
- Scoring: Calculates and updates the player's score based on the Pokémon caught.
- Levels: Implements multiple levels with increasing difficulty and different backgrounds.
- Sound Effects: Adds sound effects for the actions on the game.
- Music: Includes background music that plays during the game.
- Pause/Resume: Allows the player to pause and resume the game using the Enter key.
This project is for personal use and portfolio purposes only. All assets were taken from the internet and are not owned by me. All Pokémon images, names, and related content are the property of Nintendo, Game Freak, and The Pokémon Company. No copyright infringement is intended.
Intro screen
Instructions
Gameplay
Throwing a Pokéball
Catching a Pokémon
Using a Masterball
Game over