How to make Rock Paper Scissors in Javascript

Hi Everyone!
In this post, I will show you how to make Rock Paper Scissors in HTML, CSS, and Javascript. Follow me for more projects. Let’s get started!

This will be the basic HTML User Interface:

<!DOCTYPE html>
<html lang="en">
    <title>Rock Paper Scissor Game</title>
    <link rel="stylesheet" href="">
    <!--Google Font-->
    <link rel="preconnect" href="">
    <link href=";600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">

    <div class="container">
        <div class="scores">
            <p>Computer : 
                <span id="computer_score">0</span>
                You :
                <span id="user_score">0</span>
        <div class="weapons">
            <button onclick="checker('rock')">
                <i class="far fa-hand-rock"></i>
            <button onclick="checker('paper')">
                <i class="far fa-hand-paper"></i>
            <button onclick="checker('scissor')">
                <i class="far fa-hand-scissors"></i>
        <div class="details">
            <p id="user_choice"></p>
            <p id="comp_choice"></p>
            <p id="result"></p>

<!--linking the javascript file-->
<script src="app.js"></script>

Now let’s style it to make it look better:

    padding: 0;
    margin: 0;
    box-sizing: border-box;

    height: 100vh;
    background: linear-gradient(

    width: 45%;
    min-width: 500px;
    background-color: #ffffff;
    padding: 40px 30px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    box-shadow: 0 15px 25px rgba(0,0,0,0.15);

    margin-bottom: 50px;
    text-align: right;

    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-around;

.weapons button
    background-color: #ffd51b;
    color: #000000;
    border: none;
    font-size: 50px;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    outline: none;
    cursor: pointer;

    margin-top: 30px;
    text-align: center;

    font-family: 'Poppins',sans-serif;
    font-weight: 400;
    font-size: 15px;

    width: 180px;
    padding: 10px 0;
    margin: 30px auto;
    font-weight: 600;
    letter-spacing: 0.5px;

    font-weight: 400;
    margin-bottom: 10px;

    font-weight: 600;

Lastly, let’s add the Javascript to make it functional:

 let [computer_score,user_score]=[0,0];
let result_ref = document.getElementById("result");
let choices_object = 
    'rock' : 
        'rock' : 'draw',
        'scissor' : 'win',
        'paper' : 'lose'
    'scissor' : 
        'rock' : 'lose',
        'scissor' : 'draw',
        'paper' : 'win'
    'paper' : 
        'rock' : 'win',
        'scissor' : 'lose',
        'paper' : 'draw'

function checker(input)
    var choices = ["rock", "paper", "scissor"];
    var num = Math.floor(Math.random()*3);

    document.getElementById("comp_choice").innerHTML = 
    ` Computer choose <span> $choices[num].toUpperCase() </span>`;

    document.getElementById("user_choice").innerHTML = 
    ` You choose <span> $input.toUpperCase() </span>`;

    let computer_choice = choices[num];

        case 'win':
   = "background-color: #cefdce; color: #689f38";
            result_ref.innerHTML = "YOU WIN";
        case 'lose':
   = "background-color: #ffdde0; color: #d32f2f";
            result_ref.innerHTML = "YOU LOSE";
   = "background-color: #e5e5e5; color: #808080";
            result_ref.innerHTML = "DRAW";

    document.getElementById("computer_score").innerHTML = computer_score;
    document.getElementById("user_score").innerHTML = user_score;

That’s it! You have now created Rock Paper Scissors in HTML, CSS, and Javascript.

Live Demo

Full Code

Source link