🗿 📄 ✂

Rock, Paper & Scissors game: check out my new game I whipped up using HTML, CSS & JavaScript!

Introduction 🎞

R.P.S.mp4

1. Technologies 💻

• HTML
• CSS
• JavaScript

2. Coding ✨

I put this together just before diving into my JavaScript training (as of January 30, 2024). Here's what I aimed to achieve:

🤔 Understanding:

• I wanted to see how HTML, CSS and JS work together and understand their teamwork.

🤓 Learning:

• To familiarise myself with the use of JavaScript.

🎮 Game project:

• Make myself a nice little game project.

🔁 Reflections

I wanted to create a simple and not overly complex game to familiarize myself with JavaScript before my formal JS training. It was a challenge to grasp the interlocking elements and to assess whether my understanding was sufficient to accomplish this type of small game. I discovered that the implementation of JavaScript involves different phases, such as initialization, declaration, and functions (containing events), which often operate in this manner. I began with HTML to define the skeleton of the game's various elements. Progressing directly to JavaScript, I implemented the game logic and concluded with CSS to add some styling to my game. The JavaScript part was carried out with the assistance of a tutorial available on YouTube, taught by FreeCodeCamp.

I also noticed that JavaScript bears resemblance to Dart (a language developed by Google for mobile development), which I had learned before undertaking my current web development training

3. Features 🛠

Here are the various features that I was able to add to the game:

+ const getComputer = document.getElementById(#)
    - This is the initialization in JavaScript: Here, we reference the ID as elements present in the HTML (like a call).
+ getChoices.forEach(choices => choices.addEventListener("click", (e) => {#}))
    - This is the declaration in JavaScript: We declare or rather listen here to the choice made by the user during the interaction with the game buttons.
+ function generateComputerChoice() {#}
    - And finally, the functions & events in JavaScript: The functions will play the role of a "container," and the events of a "containing" using various available properties that will dynamically act to display or modify values.
- Important point
    - We also declare <code>.innerHTML</code> to effectively "mirror" the HTML and thus modify the declared value through the functions mentioned above.

⚒ Optimizations

• Update the JavaScript code according to the more current and less 'junior' naming conventions.
• Revise the CSS code, as it was implemented 'from scratch' without optimization or a global style sheet (CSS variables, etc.).
• Explore the addition of new features to the game or even incorporating other games in the form of a 'game website,' complete with a game selection navigation—something to consider.

4. Run and Debug ⚙

1. Download or clone it the RockPaperScissors.zip folder from the project and unzip it.
2. Open the RockPaperScissors folder with a code editor of your choice.
3. Launch the file /RockPaperScissors/game-folder/index.html in your browser locally (you can use extensions such as Live Server, Live Preview, etc.).
4. Read the game rules in the header.
5. Simply click on the various game buttons (choices-btn) at the bottom of the page, and boom, the showdown begins instantly.

Note

It's a simple game of "Rock, Paper, and Scissors" where you play by the rules laid out on the game interface.

Important

After that, the computer proudly declares the winner! Ready, set, play! 🚀

---

Links:

• Github: https://github.com/Kuromaea
• Instagram: https://www.instagram.com/kuromaea/?hl=fr
• https://bento.me/kuromaea