Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/brieucdegoussencourt/cookieclicker---nat_fab_bri

Working in group to create an online game called "Cookie Clicker"
https://github.com/brieucdegoussencourt/cookieclicker---nat_fab_bri

Last synced: about 1 month ago
JSON representation

Working in group to create an online game called "Cookie Clicker"

Awesome Lists containing this project

README

        

# CookieClicker @ Nat_Fab_Bri
### Here's our [Cookie Clicker](https://brieucdegoussencourt.github.io/CookieClicker---Nat_Fab_Bri//)!!

## MAIN FEATURES

- **JavaScript**:

The core engine driving the game's functionality. It handles all interactive elements, manages game logic, and ensures a seamless user experience.

- **HTML/CSS [(Bootstrap)](https://getbootstrap.com/docs/5.3/getting-started/introduction/)**:

Provides a clear and sleek design, inviting users with a visually appealing and user-friendly interface. Bootstrap ensures responsive layouts and consistent styling across different devices and screen sizes.

- **Mobile-first design**:

Prioritizes the mobile user experience, ensuring that the game performs flawlessly on all devices. This approach guarantees that the game is accessible and enjoyable whether on a smartphone, tablet, or desktop.

## AUTHORS/ASSIGNMENTS

* **Fabrice Tchounkeu** - [GitHub](https://github.com/fabricetchounkeu)
* **Nathaniel Akingbade** - [GitHub](https://github.com/NateGithub9)
* **Brieuc Degoussencourt** - [GitHub](https://github.com/brieucdegoussencourt)

## WHAT? WHEN? WHY?

This challenge is part of the web developer training @ [Becode](https://becode.org/fr/) - June 2024.

The aim of the project is to consolidate what we've learned so far and more specifically to develop our JavaScript skills.

Here are the full [guidelines](https://github.com/becodeorg/Swartz-9/blob/main/2.The-Hill/1.Javascript/cookieClicker.md).

## CHALLENGE

We had 6 days to create an online game similar to this [one](https://orteil.dashnet.org/cookieclicker/).

We had to work mainly remotely via **Discord** and **GitHub**.

We had never worked together before, nor coded a game.

Below are some details of our journey:

### DAY #1

To get the project on track, we met, read the challenge guidelines, and shared our thoughts on how to proceed.

First, we decided to define clear roles to split the work.

We organized the team as follows: Fabrice would tackle the HTML structure and basic CSS, Nathaniel would handle JavaScript and Brieuc would manage the project to organize the work.

We made a rough mockup on paper to have a general vision of the HTML document.

Then Fabrice and Nathaniel started to work on their local projects.

A GitHub repository was created with the main files, and we were ready to start.

![screenshot#1](/screenshots/mockup2.jpg)

### DAY #2

Following the "Agile" methodology, we broke down the work into small steps (cards in GitHub projects).

This allowed us to have clear objectives to build up the project slowly but surely.

![screenshot#2](/screenshots/github_project.png)

Everyone focused on their role.

### DAY #3

We reunited in the morning through Discord and shared our progress.

Nathaniel was already well advanced with JavaScript, and Fabrice had a first draft of the page.

Brieuc took charge of the second draft of the page, and by the end of the day, we could publish our first version online by merging front and back-end operations.

![screenshot#3](/screenshots/site.png)

### DAY #4

After a well-deserved weekend, the team got back to it. We had to work on details now.

Some functionalities needed updates, and we also started working on [HTML standards](https://validator.w3.org/), [performance, accessibility, and SEO](https://pagespeed.web.dev/analysis/https-brieucdegoussencourt-github-io-CookieClicker---Nat_Fab_Bri/56jpo2ctct?form_factor=desktop).

![screenshot#4](/screenshots/performance.png)
![screenshot#5](/screenshots/html_validation.png)

As we were well advanced in our timeline (the deadline was on day #6), we decided to add some extra options (tooltips and an animated cookie for the "Auto-Click" and the "Bonus" features)

### DAY #5

Focused on extensive testing and stability enhancements, implemented several game improvements, added a user prompt, and ensured the README file was comprehensive and accurate.

## TECHNICAL CHALLENGES

- Working mostly remotely (except for the day of the assignment).
- Ensuring that all the buttons work as expected.
- Making sure that the number of clicks was not too high at the beginning of the game.
- Being very careful not to "break" the code when adding more features.

## EXTRA OPTIONS

- Prompt to insert the user name: We thought it would be more fun to have the user's name displayed during the game.
- Information (tooltips) on the buttons: For a better understanding of each button's features.
- Animated cookie for the auto-click and bonus (spin and faster spin for the bonus) because it's fun!

## THINGS WE LEARNED

- Communication is key (both verbal and written).
- Using Git Projects for coordinated collaboration.
- Dedicated times for testing are essential.
- Version tracking is very important.
- Estimating the time to implement new features is crucial.

## ROOM FOR IMPROVEMENT

- Adding "levels."

## CONCLUSION

We learned the importance of thoroughly understanding the assignment, thanks to guidance from our coach, Mike. With layers of code accumulating rapidly, it was crucial for the three of us—Nathaniel Akingbade, Brieuc, and Fabrice—to ensure we were all on the same page. Effective communication and clear role definitions were key to our success.

Additionally, we discovered the immense satisfaction in achieving our daily goals. Continuously improving our work while being mindful of the deadline was a delicate balance, but one that paid off richly. We also realized the value of stepping away and working independently at times, as it provided a refreshing break and helped us return with renewed focus and ideas.

Overall, this project has not only strengthened our technical skills but also highlighted the importance of teamwork, planning, and time management in a collaborative environment.