DEV Community

Cover image for Day 6: Session 2:Build a Rock Paper Scissors Game Using HTML, CSS, and JavaScript
Sathish 226
Sathish 226

Posted on

Day 6: Session 2:Build a Rock Paper Scissors Game Using HTML, CSS, and JavaScript

#webdev #javascript #css #html

Welcome to another fun coding journey!

Rock Paper Scissors is a classic hand game that’s quick and fun — and perfect for beginners learning JavaScript. In this blog post, we’ll walk through creating a simple, interactive version of this game using HTML, CSS, and JavaScript.

Game Concept

The rules are simple:

1.Rock crushes Scissors
2.Paper covers Rock
3.Scissors cuts Paper

The user selects an option, the computer randomly selects its move, and the winner is decided based on these rules.

Technologies Used

HTML: To create buttons and display results
CSS: For layout and basic styling
JavaScript: For game logic, random choice generation, and result handling

JavaScript Concepts Practiced

  1. Variables (let userscore, computerscore, etc.)
  2. Functions (startgame(userselect))
  3. Arrays (to store the choices: ["rock", "paper", "scissors"])
  4. Math.random() and Math.floor() (to select a random computer choice)
  5. If-else statements (to decide the winner)
  6. Comparison operators (==,|| ,&&, etc.)
  7. DOM manipulation (document.getElementById().innerText)

Code Highlights
html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Rock Paper Scissors</title>
</head>

<body>
  <div class="layout">
    <h1>Select the option</h1>
    <div class="option">
      <button onclick="startgame('rock')">🪨 Rock</button>
      <button onclick="startgame('paper')">📄 Paper</button>
      <button onclick="startgame('scissors')">✂️ Scissors</button>
    </div>
    <div id="result">

    </div>
    <div id="score">User: 0 | Computer: 0</div>
  </div>
Enter fullscreen mode Exit fullscreen mode
  • Simple buttons that call the startgame() function with the user’s selection
  • To make the Rock Paper Scissors game more visually fun, I added emojis like 🪨, 📄, and ✂️ — which I copied from Emojipedia.

css

<style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    body {
      background: linear-gradient(to right, rgb(231, 157, 19), rgb(87, 228, 162));
      font-family: sans-serif;
    }

    .layout {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 100vh;
      gap: 20px;
    }

    button {
      padding: 15px 20px;
      font-size: 18px;
      cursor: pointer;
    }

    #result, #score {
      font-size: 20px;
      font-weight: bold;
    }
  </style>
Enter fullscreen mode Exit fullscreen mode

java script

<script>
    let userscore = 0;
    let computerscore = 0;

    function startgame(userselect) {
      let options = ["rock", "paper", "scissors"];
      let arrlen = options.length;
      let elem = Math.random() * arrlen;
      let element = Math.floor(elem);
      // let element= Math.floor(Math.random() * options.length);
      let computerselect = options[element];
      let result = "";

      if (userselect == computerselect) {
        result = `It's a draw! Both selected ${userselect}.`;
      } else if (
        (userselect == "rock" && computerselect == "scissors") ||
        (userselect == "paper" && computerselect == "rock") ||
        (userselect == "scissors" && computerselect == "paper")
      ) {
        userscore++;
        result = `You win! ${userselect} beats ${computerselect}.`;
      } else {
        computerscore++;
        result = `Computer wins! ${computerselect} beats ${userselect}.`;
      }

      document.getElementById("result").innerText = result;
      document.getElementById("score").innerText = `User: ${userscore} | Computer: ${computerscore}`;
    }
  </script>
Enter fullscreen mode Exit fullscreen mode
  • This part controls the game logic, score tracking, and result display.

Output

A colorful, responsive webpage where users can play Rock Paper Scissors by clicking buttons, and scores are updated in real-time.

Image description

Image description

Today's Project:

This simple game project is a great way to reinforce core JavaScript topics like functions, logic statements, operators, and DOM interaction. With just a few lines of code, you’ve created an interactive game — a big step toward building more advanced web apps!

Keep learning!! Happy Coding!!!*

Top comments (0)