DEV Community

Cover image for Rock, Paper, Scissors (with JavaScript)
TD!
TD!

Posted on

3

Rock, Paper, Scissors (with JavaScript)

This project is perfect for intermediate learners because it blends HTML, CSS, and JavaScript to create a complete, functional game.


📂 File Structure

rock-paper-scissors/
│-- index.html    ← HTML structure
│-- styles.css    ← CSS styling
└-- script.js     ← JavaScript functionality
Enter fullscreen mode Exit fullscreen mode

🛠️ How to Run the Project

  1. Create the Files:

    • Create a folder called rock-paper-scissors.
    • Inside this folder, create three files: index.html, styles.css, and script.js.
  2. Copy the Code:

    • Paste the HTML, CSS, and JavaScript code into the respective files.
  3. Open the HTML File:

    • Open index.html in your browser to play the game.

🌟 How the Game Works

  1. Select a Choice:

    • Click on one of the buttons: Rock 🪨, Paper 📄, or Scissors ✂️.
  2. Computer's Choice:

    • The computer randomly selects Rock, Paper, or Scissors.
  3. Display the Results:

    • The game shows your choice, the computer's choice, and who wins.
  4. Play Again:

    • Click the "Play Again" button to reset the game.

🧠 Key Concepts for Learning

JavaScript Concepts

  1. Event Listeners:

    • Use of addEventListener to handle button clicks.
  2. Random Number Generation:

    • Math.random() to generate a random choice for the computer.
  3. Conditionals:

    • if-else statements to determine the winner.
  4. DOM Manipulation:

    • Dynamically updating the HTML content using textContent.

View on GitHub

Retry later

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay