Welcome to Chris's Arcade, a collection of classic mini-games such as Brick Breaker and Snake. This project features user authentication and a leaderboard to showcase the highest scores. Built using HTML, CSS, JavaScript, and Firebase, it allows users to play games, track their scores, and compete on leaderboards.
View Demo
- User Authentication: Sign up and log in using Firebase authentication.
- Guest Access: Play games without creating an account.
- High Score Tracking: Keep track of your highest scores for each game.
- Leaderboard: View the top scores for each game.
- Classic Games: Includes Brick Breaker and Snake.
- ✔️ Creating the basic structure of an arcade website using HTML, CSS, and JavaScript.
- ✔️ Implementing Firebase for user authentication and real-time database to store game scores.
- ✔️ Designing and developing the JavaScript mini-games using the DOM.
- ✔️ Utilizing localStorage for data persistence.
To view and interact with the Arcade Website locally, follow these steps:
-
Clone the Repository to your local machine:
git clone https://github.com/chrispsang/Arcade-games.git cd Arcade-games -
Open index.html:
Navigate to the directory where you cloned the repository. Find and open the index.html file in your preferred web browser.
- Navigate to login page and either sign up, log in, or continue as a guest.
- Choose a game (Brick Breaker or Snake) from the main menu.
- Play the game and try to achieve the highest score.
- Each game includes instructions to help you understand the gameplay mechanics.
- Authenticated Users: Scores will be automatically saved to the Firebase database.
- Guest Users: Scores will be saved to the local storage of the browser.
- Visit the Leaderboard page to view the top scores for each game.