This is a modern implementation of the classic Block Breaker game, inspired by the games played on early mobile devices. A fun and engaging project built to enhance my web development skills.
Developed using HTML5, CSS3, and Vanilla JavaScript, the game features animations for smooth transitions and interactive gameplay. It integrates with Firebase for anonymous authentication and real-time high score management, providing a seamless experience for players to track their best performances without the need to sign up.
- Canvas Rendering: The game utilizes HTML’s inbuilt canvas to render game elements like the paddle, ball, and bricks with precision.
- Firebase Integration: High scores are stored and retrieved from Firebase in real-time, utilizing anonymous authentication for a smooth, sign-up-free experience.
- Modular Code Structure: The code is organized into reusable components and functions, making it easy to maintain and extend for future updates.
- Responsive Design: The game adapts to different screen sizes, ensuring optimal gameplay on both desktop and mobile devices.
- Start the Game: Press the start button or refresh the page to begin.
- Control the Paddle: You can control the paddle using the arrow keys, mouse, or on-screen buttons.
- Username: Enter your desired username to track your score.
- Score Tracking: Your highest score is automatically saved and displayed.
You can play the game directly here:
Play Breakout
To run the game locally:
- Clone this repository:
git clone https://github.com/ashishjii/Breakout.git
- Open the
index.htmlfile in your browser to start playing.
- Frontend: HTML5, CSS3, Vanilla JavaScript
- Real-Time Data: Firebase for storing and retrieving high scores with anonymous authentication
Feel free to fork the repository and submit pull requests with any improvements, bug fixes, or feature suggestions.