Toast Catcher Game using HTML, CSS & JavaScript

The Toast Catcher Game is a fast-paced, fun-filled browser game built with HTML, CSS, and JavaScript. Toasts fall from the top of the screen, and your job is to catch them using a basket that moves left and right.

Perfect for casual gamers, kids, or developers looking to build a mini arcade-style game, this project is both entertaining and educational. You'll learn object collision, movement handling, and simple scorekeeping — all in one bite-sized game.

🛠️ How to Make:

1. HTML Setup:

   • Create a <canvas> or container <div> for the game area

   • Add a basket element and use <img> or CSS shapes for toasts

2. CSS Styling:

   • Style the basket and toast with positioning, transitions, and animations

   • Make the layout responsive using vw/vh or media queries

3. JavaScript Logic:

   • Use setInterval() or requestAnimationFrame() to animate falling toasts

   • Track player input (keyboard or mouse) to move the basket

   • Detect collision between toast and basket using bounding boxes

   • Update the score and optionally show a game over screen

4. Optional Features:

   • Add lives, increasing difficulty, or time limits

   • Include sound effects when catching toasts

   • Use localStorage to save high scores

⚙️ How to Use:

1. Open the Game:
   Go to codetap.org/project/toast-catcher-game

2. Start the Game:
   The game starts when you press a key, click “Start,” or move the basket.

3. Control the Basket:

   • Use left/right arrow keys or mouse/touch to move the basket

   • Position the basket under falling toasts to catch them

4. Track Your Score:
   Each successful catch increases your score. Try to beat your high score!

5. Restart:
   After missing a certain number of toasts (or timer ends), the game stops. Click “Restart” to play again.

🎮 How to Play:

1. Objective:
   Catch as many falling toasts as possible using the moving basket.

2. Stay Focused:
   Toasts fall faster as your score increases — react quickly!

3. Avoid Misses:
   Letting too many toasts hit the ground ends the game.

4. Score Points:
   Each toast caught = +1 point. Go for a high score!

✨ Features:

• Real-time movement and collision detection

• Responsive design for mobile and desktop

• Fun animations and visuals

• Light and fast — runs in any modern browser

• Easy to customize with new assets or difficulty levels