Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chrispsang/arcade-games

This project is a collection of classic mini-games like Brick Breaker and Snake, featuring user authentication and a leaderboard to display top scores. Users can enjoy games, track scores, and engage in competitive leaderboard challenges.
https://github.com/chrispsang/arcade-games

arcade-games bricksbreaker-game firebase-auth firebase-database html-css-javascript simple-game snake-game

Last synced: 15 days ago
JSON representation

This project is a collection of classic mini-games like Brick Breaker and Snake, featuring user authentication and a leaderboard to display top scores. Users can enjoy games, track scores, and engage in competitive leaderboard challenges.

Awesome Lists containing this project

README 

        
# Chris's Arcade



  


    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

  





## Table of Contents

1. [Features](#features)

2. [Built With](#built-with)

3. [Roadmap](#roadmap)

4. [Getting Started](#getting-started)

5. [Usage](#usage)



## Features

- **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.



## Built With

* [![Javascript][Javascript.js]][Javascript-url]

* [![HTML][HTML.html]][HTML-url]

* [![CSS][CSS.css]][CSS-url]

* [![FireBase][Firebase]][Firebase-url]



## Roadmap

- ✔️ 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.



## Getting Started



To view and interact with the Arcade Website locally, follow these steps:



1. **Clone the Repository to your local machine**:



   ```bash

   git clone https://github.com/chrispsang/Arcade-games.git

   cd Arcade-games



2. **Open index.html**:



    Navigate to the directory where you cloned the repository.

    Find and open the index.html file in your preferred web browser.



## Usage

- 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.



[Javascript.js]: https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black

[Javascript-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript

[CSS.CSS]: https://img.shields.io/badge/CSS-239120?&style=for-the-badge&logo=css3&logoColor=white

[CSS-url]: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics 

[HTML.HTML]: https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white

[HTML-url]: https://developer.mozilla.org/en-US/docs/Web/HTML

[Firebase]: https://img.shields.io/badge/Firebase-039BE5?style=for-the-badge&logo=Firebase&logoColor=white

[Firebase-url]: https://firebase.google.com/