Need help optimizing code for Rock, Paper Scissors game

JavaScript
1

I have been learning HTML, CSS and JavaScript for almost 3 months now. I am happy to finally have figured out how to make JS interact with HTML. I made this game from what I have learned so far. When I reread the code I feel like I may have forced things to work. It doesn’t seem optimized.

My question is: Can someone give me some suggestions to make the code more streamlined? I didn’t use loops at all, but i feel like they could be in there. I would like to rework this, because i have already spent so much time thinking it out and getting it to work. I’d like to make it better.

Also I noticed my New Game button isn’t working in CodePen, because it literally just refreshes the page.

Thanks.
https://codepen.io/craig-glatfelter/pen/qBavGYV

2

Hey there,

Congrats on creating the project! It is an excellent way to learn.

Some thoughts I had about the code:

  • if...else blocks with 1 outcome are better suited as switch statements
if (compNum === 0) {
                compChoice = "rock";  
            }
            else if (compNum === 1) {
                compChoice = "paper";  
            }
            else if (compNum === 2) {
                compChoice = "scissors";  
            }
  • Same goes for your bestOf function
  • Instead of adding 1 to an array like this, it might make more sense to increment a total:
trackComputerArr.push(1);
  • That way, you can completely forgo the trackPlayerArr.reduce((a, b) => a + b, 0) steps, and just show the number. glad you learnt about the reduce method, though
  • There is a lot of repetition in setting the:
resultsDiv.innerHTML = `Computer's pick: ${compChoice}</br> </br>
                Player's pick: ${playChoice} </br></br>
                <span style = "font-size: x-large" id = 'wins'>${whoWins}</span.`
                    scoreDiv.innerHTML = `Player's Score: ${trackPlayerArr.reduce((a, b) => a + b, 0)} <br> Computer's Score: ${trackComputerArr.reduce((a,                   b) => a + b, 0)}`
  • Rather, add all of the static content to the HTML, and separate it out to only need to set something like: scoreDiv.innerHTML = trackPlayerScore

I hope that is clear enough, and helps some.

Keep it up :+1:

3

Thank you for all the great suggestions. Now that you said it, I have no idea why i used an array, its just what came to my mind at the time. I will be able to get rid of the reduce method by just incrementing a score.

The last part is just saying to create a variable that contains the innerHTML update. So that it does the same thing but doesn’t list it out? I think that is what you are saying.

Thanks for your time, much appreciated.

4

I do not know how to put it in more words, so here is the idea:

Instead of:

<body>
  <div id="myDiv">
  </div>
</body>
<script>
  const myDiv = document.getElementById("myDiv");
  const myNum = 5;
  myDiv.innerHTML = "<p>Some text: " + myNum + "</p>";
</script>

Do this:

<body>
  <div>
    <p>Some text: <span id="mySpan"></span></p>
  </div>
</body>
<script>
  const myNumHolder = document.getElementById("mySpan");
  const myNum = 5;
  myNumHolder.innerHTML = myNum;
</script>

Then, if you really do not want the text of the element to be there all the time, add some classes to the elements, through JS:

if (!showElement) {
  document.querySelector("p").styles.display = "none";
else {
  document.querySelector("p").styles.display = "block";
}

Essentially, have as little HTML in your JS as possible.

Hope this helps

5

Thank you. This makes sense. I’m going to start making these changes.

I appreciate your help. Take care.

6

is this project part of the FCC curriculum? And where did you earn your knowledge from? Did you just use FCC or other sources?

7

Hello. I got this from The Odin Project which has been a good guide on what to learn. I use freecodecamp to actually learn the material. Khan Academy also has a good series on how to make HTML interactive with JavaScript which I used to complete this game.

I have had to bounce between the different places because each one offers something different. Every time I get stuck learning I look at another resource and it usually helps.

8

ive completed FCC projects up to the front-end libraries, but im yet to see much vanilla JS code to interact with HTML. Ive also done the Khan courses on HTML and JS but i dont recall section with makes the two interact, maybe they have introduced it at later point, so this could be useful.
I celebrate FCC for all the dimension and the fact its free, but there is just this gap where it feels like something basic is missing between the transition of different sections

9

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