Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/rakesh9100/click-the-edible-game

A well-designed interesting game made using HTML, CSS, and JS where you can play with your favourite edible and click it to get the most scores.
https://github.com/rakesh9100/click-the-edible-game

game hacktoberfest hacktoberfest2k22 iwoc2024 jwoc2k23 jwoc2k24 open-source open-source-development open-source-project project slop2k23 swoc2024 web-development

Last synced: about 2 months ago
JSON representation

A well-designed interesting game made using HTML, CSS, and JS where you can play with your favourite edible and click it to get the most scores.

Awesome Lists containing this project

README

        

#

✨Click-The-Edible-Game✨


[![Open Source Love svg1](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)
![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat)
![Visitors](https://api.visitorbadge.io/api/visitors?path=Rakesh9100%2FClick-The-Edible-Game%20&countColor=%23263759&style=flat)
![GitHub forks](https://img.shields.io/github/forks/Rakesh9100/Click-The-Edible-Game)
![GitHub Repo stars](https://img.shields.io/github/stars/Rakesh9100/Click-The-Edible-Game)
![GitHub contributors](https://img.shields.io/github/contributors/Rakesh9100/Click-The-Edible-Game)
![GitHub last commit](https://img.shields.io/github/last-commit/Rakesh9100/Click-The-Edible-Game)
![GitHub repo size](https://img.shields.io/github/repo-size/Rakesh9100/Click-The-Edible-Game)
![Github](https://img.shields.io/github/license/Rakesh9100/Click-The-Edible-Game)
![GitHub issues](https://img.shields.io/github/issues/Rakesh9100/Click-The-Edible-Game)
![GitHub closed issues](https://img.shields.io/github/issues-closed-raw/Rakesh9100/Click-The-Edible-Game)
![GitHub pull requests](https://img.shields.io/github/issues-pr/Rakesh9100/Click-The-Edible-Game)
![GitHub closed pull requests](https://img.shields.io/github/issues-pr-closed/Rakesh9100/Click-The-Edible-Game)


Table of Contents🧾

- [Introduction📌](#introduction)
- [Technology Used🚀](#technology-used)
- [Overview⭐](#overview)
- [Getting Started💥](#getting-started)
- [Contributing Guidelines📑](#contributing-guidelines)
- [Code Of Conduct📑](#code-of-conduct)
- [Project Admin⚡](#project-admin)
- [Contributing is fun🧡](#contributing-is-fun)

Introduction📌

A well-designed interesting game made using HTML, CSS, and JS where you can play with your favorite edible and click on it to get the highest score.

- There are five categories - Fruits, Vegetables, Sweets, Snacks, and Bakery Products. Click on your favorite edible to start the game.
- You can choose how much time you want to spend on one edible.
- Timer, Score and Lives ❤️ count are shown on the screen.
- Clicking on one edible will increase your score by 1.
- Clicking on a rotten 🤢 edible will decrease the score by 1.
- Clicking on a bomb 💣 will decrease your lives count by 1.
- When the time is over or all of your `3` lives are exhausted, it's game over, and the final score will be shown.
- All the scores are stored until you remain on the game i.e, before you refresh/reload/close the page.
- High Score, along with all the scores are shown sorted in descending order.
- You can either click on the refresh button or return to home to select a new edible.

Technology Used🚀


HTML
CSS
JS


(back to top)

Overview⭐

Live Project -- (https://click-the-edible-game.netlify.app/)

Landing Page :-

![image](https://user-images.githubusercontent.com/73993775/222927583-ebb9ddf2-df0c-44e2-8c28-003166b0ca4a.png)


Home/Main Page :-

![image](https://user-images.githubusercontent.com/73993775/225777171-2bbafadb-1c23-4487-b0ef-68c56cbffd74.png)


Instructions Box :-

![image](assets/images/instructionbox.png)


Selection of Edible Page :-

![image](https://user-images.githubusercontent.com/73993775/225777515-6147b79e-656e-4572-9639-b6928a176a0f.png)
![image](https://user-images.githubusercontent.com/73993775/225777564-06a31252-4341-4c9b-844c-10958aef2d71.png)
![image](https://user-images.githubusercontent.com/73993775/225777594-20eb67b5-f6f8-4075-a1c2-14644d32291b.png)


Choose GamePlay Time Box :-

![image](assets/images/Timerbox.png)


Playing Screen :-

![image](https://github-production-user-asset-6210df.s3.amazonaws.com/86418216/278806320-8432d087-e7f1-41ff-bd1e-c47b0f69b697.png)


Dark Mode :-

![image](https://github-production-user-asset-6210df.s3.amazonaws.com/86418216/278806339-7734cd96-fa95-461a-a8c4-e71449b96ae4.png)


Rotten Edibles :-

![image](https://github-production-user-asset-6210df.s3.amazonaws.com/86418216/280606512-2f16895f-5896-4ca7-99a6-740f77fbbd31.png)


Play/Pause/Restart Box :-

![image](assets/images/pausebox.png)


High Score/Your Scores Box :-

![image](assets/images/gameoverbox.png)

(back to top)

Local Installation📹

[Click-The-Edible-Game](https://github.com/rahat2134/Click-The-Edible-Game/assets/136263179/cafdf750-401e-4456-8f76-f9c2fd076cb3)

Getting Started💥

- Fork this Repository.
- Clone the forked repository in your local system.
```
git clone https://github.com//Click-The-Edible-Game.git
```
- Open `index.html` in your browser.
- View the [Live Project](https://click-the-edible-game.netlify.app/) here.
- Raise an issue if you find a bug or add a feature.
- Wait for the issue to be assigned and proceed only after the issue is assigned to you.
- Navigate to the project directory.
```
cd Click-The-Edible-Game
```
- Create a new branch for your feature.
```
git checkout -b
```
- Perfom your desired changes to the code base.
- Track and stage your changes.
```
# Track the changes
git status

# Add changes to Index
git add .
```
- Commit your changes.
```
git commit -m "your_commit_message"
```
- Push your committed changes to the remote repo.
```
git push origin
```
- Go to your forked repository on GitHub and click on `Compare & pull request`.
- Add an appropriate title and description to your pull request explaining your changes and efforts done.
- Click on `Create pull request`.
- Congrats! 🥳 You've made your first pull request to this project repo.
- Wait for your pull request to be reviewed and if required suggestions would be provided to improve it.
- Celebrate 🥳 your success after your pull request is merged successfully.

(back to top)

Contributing Guidelines📑

Read our [Contributing Guidelines](https://github.com/Rakesh9100/Click-The-Edible-Game/blob/main/.github/CONTRIBUTING_GUIDELINES.md) to learn about our development process, how to propose bugfixes and improvements, and how to build to Click-The-Edible-Game.

Code Of Conduct📑

This project and everyone participating in it is governed by the [Code of Conduct](https://github.com/Rakesh9100/Click-The-Edible-Game/blob/main/.github/CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code.

This repo has been part of the following Open Source Programs🥳

IWOC2024
IWOC 2k24

JWOC2024
JWOC 2k24

SWOC2024
SWOC 2k24

SLOP2023
SLOP 2k23

JWOC2023
JWOC 2k23

Hacktoberfest2022
Hacktoberfest 2k22

(back to top)

Project Admin⚡

Rakesh Roshan
Rakesh Roshan

Project Contributors🫂



Contributing is fun🧡

[![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)

Contributions of any kind from anyone are always welcome🌟!!


Give it a 🌟 if you ❤ this project. Happy Coding👨‍💻


(back to top)