Rock Paper Scissors Game in HTML CSS & JavaScript

2

Rock Paper Scissors Game in HTML CSS & JavaScript

At least once in your life, you must have played the rock-paper-scissors game. Have you ever considered creating a rock-paper-scissors game using HTML, CSS, and Javascript?

Today in this blog, you will learn how to create a rock-paper-scissors game using HTML, CSS, and JavaScript. By the end, you will not only have a functional game, but you will also acquire an understanding of the game’s logic, error handling, and other related aspects. Recently I have provided a Number Guessing Game as well, I hope that it is also beneficial for you.

The rock-paper-scissors game’s interface, as depicted in the preview, will appear similar to the final product. The opponent you’ll be playing against in this game will be the CPU. Additionally, I have included some animations to enhance the gaming experience.

Video Tutorial of Rock Paper Scissors in JavaScript

As you have seen in the video tutorial of the rock-paper-scissors game how I created it in HTML CSS and JavaScript. I showed you how can we play this game with cpu.
I would recommend you watch the full video tutorial of this rock-paper-scissors game. By watching this instructional video you could create this game step by step with me. Additionally, I have comments on every line of JavaScript code to make you understand.

Steps for creating Rock-Paper-Scissors Game

To create a Rock-Paper-Scissors Game using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css
  4. Create a script.js file. The file name must be script and its extension .js

Once you create these files, paste the codes into the specified files. If you don’t want to do these, then scroll down and download all the Rock-Paper-Scissors Game source code files by clicking on the given download button.

First, paste the following codes into your index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Rock Paper Scissors</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <section class="container">
    <!-- Result display section -->
    <div class="result_field">
        <!-- Container for user and BOT result images -->
        <div class="result_images">
            <span class="user_result">
                <img src="images/rock.png" alt="User's choice image" />
            </span>
            <span class="bot_result">
                <img src="images/rock.png" alt="BOT's choice image" />
            </span>
        </div>
        <!-- Display the game result message -->
        <div class="result">Let's Play!</div>
    </div>

    <!-- Options for user to choose from -->
    <div class="option_images">
        <span class="option_image">
            <img src="images/rock.png" alt="Rock image" />
            <p>Rock</p>
        </span>
        <span class="option_image">
            <img src="images/paper.png" alt="Paper image" />
            <p>Paper</p>
        </span>
        <span class="option_image">
            <img src="images/scissors.png" alt="Scissors image" />
            <p>Scissors</p>
        </span>
    </div>
</section>

  <script src="script.js" defer></script>
</body>
</html>

Second, paste the following codes into your style.css file.

/* Import Google font - Audiowide */
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Audiowide", sans-serif;
}

body {
  height: 100vh;
  display: flex;
  padding: 15px;
  align-items: center;
  justify-content: center;
  background: #f6f7fb;
}

.container {
  display: flex;
  flex-direction: column;
  max-width: 535px;
  width: 100%;
  padding: 2rem 5rem;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.result_images {
  display: flex;
  gap: 7rem;
  justify-content: center;
}

.container.start .user_result {
  transform-origin: left;
  animation: userShake 0.7s ease infinite;
}

@keyframes userShake {
  50% {
    transform: rotate(10deg);
  }
}

.container.start .bot_result {
  transform-origin: right;
  animation: botShake 0.7s ease infinite;
}

@keyframes botShake {
  50% {
    transform: rotate(-10deg);
  }
}

.result_images img {
  width: 100px;
}

.user_result img {
  transform: rotate(90deg);
}

.bot_result img {
  transform: rotate(-90deg) rotateY(180deg);
}

.result {
  text-align: center;
  font-size: 2rem;
  color: #7d2ae8;
  margin: 1.5rem 0;
}

.option_image img {
  width: 50px;
}

.option_images {
  display: flex;
  width: 100%;
  align-items: center;
  margin-top: 2.5rem;
  justify-content: space-evenly;
}

.container.start .option_images {
  pointer-events: none;
}

.option_image {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.option_image:hover {
  opacity: 1;
}

.option_image.active {
  opacity: 1;
}

.option_image img {
  pointer-events: none;
}

.option_image p {
  color: #7d2ae8;
  font-size: 1.235rem;
  margin-top: 1rem;
  pointer-events: none;
}

/* Responsive media query code for small devices */
@media (max-width: 768px) {
  .container {
    padding: 2rem;
  }

  .result_images img {
    width: 80px;
  }
}

/* Responsive media query code for small devices */
@media (max-width: 500px) {
  .option_images {
    justify-content: space-between;
  }

  .option_image img {
    width: 40px;
  }
}

Third, paste the following codes into your script.js file.

// Get DOM elements
const gameContainer = document.querySelector(".container");
const userResult = document.querySelector(".user_result img");
const botResult = document.querySelector(".bot_result img");
const result = document.querySelector(".result");
const optionImages = document.querySelectorAll(".option_image");

// Define possible images and outcomes
const botImages = ["images/rock.png", "images/paper.png", "images/scissors.png"];
const outcomes = {
  RR: "Draw",
  RP: "BOT",
  RS: "YOU",
  PP: "Draw",
  PR: "YOU",
  PS: "BOT",
  SS: "Draw",
  SR: "BOT",
  SP: "YOU"
};

// Event handler for image click
function handleOptionClick(event) {
  const clickedImage = event.currentTarget;
  const clickedIndex = Array.from(optionImages).indexOf(clickedImage);

  // Reset results and display "Wait..."
  userResult.src = botResult.src = "images/rock.png";
  result.textContent = "Wait...";

  // Activate clicked image and deactivate others
  optionImages.forEach((image, index) => {
    image.classList.toggle("active", index === clickedIndex);
  });

  gameContainer.classList.add("start");

  setTimeout(() => {
    gameContainer.classList.remove("start");

    // Set user and bot images
    const userImageSrc = clickedImage.querySelector("img").src;
    userResult.src = userImageSrc;

    const randomNumber = Math.floor(Math.random() * botImages.length);
    const botImageSrc = botImages[randomNumber];
    botResult.src = botImageSrc;

    // Determine the result
    const userValue = ["R", "P", "S"][clickedIndex];
    const botValue = ["R", "P", "S"][randomNumber];
    const outcomeKey = userValue + botValue;
    const outcome = outcomes[outcomeKey] || "Unknown";

    // Display the result
    result.textContent = userValue === botValue ? "Match Draw" : `${outcome} WON!`;
  }, 2500);
}

// Attach event listeners to option images
optionImages.forEach(image => {
  image.addEventListener("click", handleOptionClick);
});

Suppose you face any difficulties while creating your Rock Paper Scissors Game or your code is not working as expected. In that case, you can download the source code files for this Rock Paper Scissors Game for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

 

Previous articleBuild A Gradient Color Generator in HTML CSS & JavaScript
Next articleHow to create Pagination in HTML CSS & JavaScript

RELATED ARTICLESMORE FROM AUTHOR

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here