https://github.com/ashishjii/breakout
Breakout 🕹️ is a modern web-based implementation of the classic Block Breaker game. Built using HTML5, CSS3, and Vanilla JavaScript, it features multiple game modes 🎮, Firebase integration for real-time high score tracking, and a responsive design for optimal play on desktop and mobile devices 📱.
https://github.com/ashishjii/breakout
canvas-api firebase html-css-javascript
Last synced: about 2 months ago
JSON representation
Breakout 🕹️ is a modern web-based implementation of the classic Block Breaker game. Built using HTML5, CSS3, and Vanilla JavaScript, it features multiple game modes 🎮, Firebase integration for real-time high score tracking, and a responsive design for optimal play on desktop and mobile devices 📱.
- Host: GitHub
- URL: https://github.com/ashishjii/breakout
- Owner: AshishJii
- License: mit
- Created: 2022-02-25T12:22:47.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-03-01T04:14:41.000Z (over 1 year ago)
- Last Synced: 2025-04-08T06:59:56.131Z (about 1 year ago)
- Topics: canvas-api, firebase, html-css-javascript
- Language: JavaScript
- Homepage: http://ashishji.is-a.dev/Breakout/
- Size: 1.29 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Breakout
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.
## Project Overview
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.
## Features
- **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.
## How to Play
- **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.
## Live Demo
You can play the game directly here:
[Play Breakout](https://ashishjii.github.io/Breakout/)
## Installation
To run the game locally:
1. Clone this repository:
```bash
git clone https://github.com/ashishjii/Breakout.git
```
2. Open the `index.html` file in your browser to start playing.
## Technologies Used
- **Frontend**: HTML5, CSS3, Vanilla JavaScript
- **Real-Time Data**: Firebase for storing and retrieving high scores with anonymous authentication
## Contributing
Feel free to fork the repository and submit pull requests with any improvements, bug fixes, or feature suggestions.