First ever completed javascript project | My iteration of rock-paper-scissors | Looking for feedback

This is my first ever completed javascript project. Don’t mind the simple html and lack of css, I mainly focused on trying to make it funcional and working. Feedback is much appreciated!

<!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>
    <h1>Rock-Paper-Scissors</h1>
    <p>Choose rock, paper or scissors.</p>
    <button onclick="rock()">Rock</button
    ><button onclick="paper()">Paper</button
    ><button onclick="scissors()">Scissors</button>
    <p id="resultAfterGame"></p>
    <script>
      function rock() {
        let computersChoice = Math.floor(Math.random() * 3);
        let yourChoice = 0;
        if (yourChoice === computersChoice) {
          let result = "Computer picked rock, you tied!";
          return (document.getElementById("resultAfterGame").innerHTML =
            result);
        } else if (yourChoice === 0 && computersChoice === 1) {
          let result = "Computer picked paper, you lose!";
          return (document.getElementById("resultAfterGame").innerHTML =
            result);
        } else if (yourChoice === 0 && computersChoice === 2) {
          let result = "Computer picked scissors, you win!";
          return (document.getElementById("resultAfterGame").innerHTML =
            result);
        }
      }
      function paper() {
        let computersChoice = Math.floor(Math.random() * 3);
        let yourChoice = 1;
        if (yourChoice === computersChoice) {
          let result = "Computer picked paper, you tied!";
          return (document.getElementById("resultAfterGame").innerHTML =
            result);
        } else if (yourChoice === 1 && computersChoice === 0) {
          let result = "Computer picked rock, you win!";
          return (document.getElementById("resultAfterGame").innerHTML =
            result);
        } else if (yourChoice === 1 && computersChoice === 2) {
          let result = "Computer picked scissors, you lose!";
          return (document.getElementById("resultAfterGame").innerHTML =
            result);
        }
      }
      function scissors() {
        let computersChoice = Math.floor(Math.random() * 3);
        let yourChoice = 2;
        if (yourChoice === computersChoice) {
          let result = "Computer picked scissors, you tied!";
          return (document.getElementById("resultAfterGame").innerHTML =
            result);
        } else if (yourChoice === 2 && computersChoice === 0) {
          let result = "Computer picked rock, you lose!";
          return (document.getElementById("resultAfterGame").innerHTML =
            result);
        } else if (yourChoice === 2 && computersChoice === 1) {
          let result = "Computer picked paper, you win!";
          return (document.getElementById("resultAfterGame").innerHTML =
            result);
        }
      }
    </script>
  </body>
</html>

It’s a good start. What would you say was the hardest, easiest? Are there any specific places that you think need improving?

1 Like

The hardest part was definitely figuring out how to start and how to make it make sense. I was kinda all over the place without having a set structure, which I know is important to lay out using pseudocode for example. But then, once I figured the starting part out, it all started becoming much easier.

The easiest part was, once I had a set structure figured out, i just had to repeat that structure but for each input e.g. a version for “rock”, one for “paper” and one for “scissors”.

Another thing I was having trouble with was trying to make the code as concise and to-the-point as possible, excluding redundancies, avoiding unnessecary repetition. I feel like I failed to meet this, because my code looks way more complicated and long than I would think is necessary. So I recognize that’s something I struggle with.

Any tips for the latter?

That’s quite normal and now - when everything works - it’s great time to improve it. Unless you have a very specific idea how reduce repetitions, I’d recommend to start with small steps. Functions are very similar to each other, but also within each one there’s a bit obsolete parts that can be shortened and made more clear.

1 Like

Well I did try shortening it by creating more functions for repetitive lines of code, but it never worked out because it always resulted in errors.

For example, I tried making the random rumber generator into a function on its own, like so;

function rngFrom0To2 () {
     let computersChoice = Math.floor(Math.random() * 3);
     return computersChoice;
}

and then just call that function inside the “rock”, “paper” and “scissors” functions instead of just repeating the same line three times. But then the computersChoice variable wouldn’t be able to be called it in the if statement because of the scope and finding a fix just made it more confusing.

I also thought of writing the if else statements using conditional operators, but ultimately decided not to as I’m not that familiar with it yet.

Could you share the code after the changes, that resulted in errors? It’s hard to point to specific issue without seeing it in the whole thing. The idea of making function specifically for getting random number, is not something that should make harder to use it.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.