Now that I’ve leveled up in coding, it’s time for Rock Paper Scissors, but more refined.

This time, I’m making a real game instead of that extremely basic one I put together back when I was just starting out. Instead of a rushed assignment, I want something you can actually enjoy playing.

But first, a new topic

The Odin Project told me not to keep the whole game in a single file. Instead, I needed to create multiple alternate versions while experimenting with ideas. This way, I could try new ideas without messing up what was already working.

This approach is called branching.

Why branching is amazing:

Basically, branching lets you make separate versions of your project that you can work on without breaking the main one.

That's where using Linux to code really comes in handy. On Linux, creating and switching between branches is quick and easy.

You can work on an experimental feature, test it out, and then merge it into your main project when it’s ready. Another perk? You can share a branch with others to get feedback without committing it to your main game at all. For example, you could share a small block of code you’re unsure about and ask GitHub users what they think.

Building the game — planning stage

Before writing a single line of code, I asked myself: “What should this game have?”

A few minutes later, my checklist looked like this:

It should be functional. Well, obviously. The whole point is to play.
The layout should be more polished. I didn’t want something that looked like it was running on hopes and dreams.
There should be more detail. Things like round numbers, score tracking, and maybe even a little flair.

The list looked fairly simple, but I knew it was not going to be as easy as it looked.

Building the Game — First Steps

I kicked things off by writing the HTML and CSS. Getting them out of the way early meant I could focus on the game logic later without worrying about layout and styling.

This time, I made sure to add classes to all the html elements. In other words, I gave each element its own name. If you remember from the last session on DOM, this is what allows JavaScript to easily find and update those elements while the game runs.

Once the structure was in place, I moved on to styling. I added polish to the titles, buttons, and score displays so the whole thing felt more like a real game rather than a bare-bones project. Even small touches (like spacing, colors, and font sizes) made it look much cleaner.

Here are the HTML and CSS pages that I made:

<!DOCTYPE html>
<html>
    <head>
        <link rel = "stylesheet" href="rps.css">
        <title>Rock Paper Scissors!</title>
        <link rel="icon" href="https://cdn-icons-png.flaticon.com/512/6831/6831874.png" type="image/png">
        <meta charset="utf-8">
        <script src="rps.js" defer></script>
    </head>
    <body>
        <h1 class = "gametitle"> Play Rock, Paper, Scissors! With A Computer</h1>
        <h2 class = "rounds">ROUND 1</h2>
        <h2 class = "startGame">CHOOSE</h2>
        <div class="rpsButtons">
            <button class="choice" >
                <img src="https://images.icon-icons.com/3194/PNG/96/hand_rock_icon_194408.png" alt="icon">ROCK</button>
            <button class="choice">
                <img src="https://images.icon-icons.com/3194/PNG/96/hand_paper_icon_194460.png" alt="icon">PAPER</button>
            <button class="choice">
                <img src="https://images.icon-icons.com/3194/PNG/96/hand_scissors_icon_194407.png" alt="icon">SCISSORS</button>
        </div>
        <p class="result"></p>
        <span class="playerScore">Your Score = </span>
        <span class="computerScore">Computer's Score = </span>
    </body>
</html>

.rpsButtons  {
  display: flex;
  justify-content: center; 
  align-items: center;     
  gap: 20px;               
  min-height: 100px;      
  background-color: #203a37;


}



.rpsButtons img {
    width: 180px;  
    height: auto;
    margin-bottom: 5px;
}

/* General button styling */
.choice {

  padding: 20px 40px;
  font-size: 1.5rem;
  border: none;
  border-radius: 12px;
  color: rgb(215, 255, 223);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
  background-color: blueviolet;
  min-width: 200px;
  flex-direction: column;
}

.playerScore, .computerScore {
  display: flex;
  justify-content: center; 
  align-items: center;     
  gap: 200px;               
  min-height: 100px;      
  background: linear-gradient(to right, #5cd9ff, #ffffff, #836dff);
  font-size: 3.5rem;
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.gametitle {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: #003827;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 20px;
  letter-spacing: 2px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  background: linear-gradient(to right, #ffc9c9, #ffffff, #ffc9c9);
}


.startGame, .result, .rounds {
  font-size: 3rem;
  font-weight: 800;
  text-align: center;
  color: #ff4757;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
  text-shadow: 0 4px 8px rgba(0,0,0,0.4);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Building the Game — Core Mechanics

With the layout looking decent, it was time to give the game a heart.

The goal was simple enough on paper: make the game react when you click the buttons for rock, paper, or scissors, and have the computer pick its move in response.

The first challenge was setting up functions that listen for those button clicks. Each button needed to send a signal to JavaScript saying, “I just got clicked” Then the program had to randomly generate the computer’s choice. That meant building a small system for the computer to pick one of the three options without cheating.

How it went:

Sounds straightforward, right? It wasn't. My output constantly generated errors. I had to pause often, search for solutions, and figure out the right syntax for each part. There were moments where fixing one bug introduced another, but that’s pretty much the standard coding experience

After a lot of testing and tweaking I had a working JavaScript file. It took me three hours to get there, but I did. Here it is:

function computerChoice() {
    let play = Math.floor(Math.random() * 3);
    if (play === 0) {
        let ans = "ROCK";
        console.log(" ======== Computer played :", ans, "========");
        return ans;
    } else if (play === 1) {
        let ans = "PAPER";
        console.log(" ======== Computer played :", ans, "=========");
        return ans;
    } else {
        let ans = "SCISSORS";
        console.log(" ======== Computer played :", ans, "=========");
        return ans;
    }
}

let playersChoice = "";
let playerScore2 = 0;
let computerScore2 = 0;
let roundNumber = 2;

function playerChoice() {
    const buttons = document.querySelectorAll('.rpsButtons .choice');
    buttons.forEach(choice => {
        choice.addEventListener("click", () => {
            playersChoice = choice.textContent.trim(); 
            console.log(`${playersChoice} was chosen`);
            playRound();
        });
    });
}

function playRound() {
    const playerScore1 = document.querySelector(".playerScore");
    const computerScore1 = document.querySelector(".computerScore");
    const round = document.querySelector(".rounds");
    const result = document.querySelector(".result");

    round.textContent = `Round ${roundNumber}`;

    let value1 = computerChoice();
    let value2 = playersChoice;

    if (value1 === value2) {
        result.textContent = "RESULT = DRAW";
    } else if (
        (value1 === "ROCK" && value2 === "PAPER") ||
        (value1 === "PAPER" && value2 === "SCISSORS") ||
        (value1 === "SCISSORS" && value2 === "ROCK")
    ) {
        result.textContent = "RESULT = WIN";
        playerScore2++;
        playerScore1.textContent = `Your Score = ${playerScore2}`;
    } else {
        result.textContent = "RESULT = LOSE";
        computerScore2++;
        computerScore1.textContent = `Computer's Score = ${computerScore2}`;
    }

    roundNumber++;

    if (playerScore2 === 5) {
        alert("You Won the Game!");
    } else if (computerScore2 === 5) {
        alert("Computer Won the Game!");
    }
}

playerChoice();

I added the script to my page and the game was complete. Rock Paper Scissors was ready to play!

Here's a link to playing it:

Final thoughts

This Rock Paper Scissors upgrade took more time than I thought, mostly because bugs like to throw surprise parties in your code. Figuring out button clicks and making the computer pick moves randomly was trickier than it sounds. In the end, I made a lot of progress.

I feel like I've really grasped the syntax of JavaScript. I have high hopes of making huge progress before this blog's over and hopefully, I'm right.

JJ DAY 11: I'm Making a Proper Webpage This Time.