"Rock Paper Scissors" game

[cepseudoestdejapris]

Hi there,

I just completed my Rock Paper Scissors project and I’d like to get some feedback.

It’s far from perfect but it seems to be working. It’s not mobile responsive yet, but I’ll probably work on that later.

Specifically, if you could check out the script and let me know what you would have done differently, that would be helpful.

Cheers!

Play the game

Code

[admit8490]

I won just once, and machine is beating me like all the time

When there are two rounds in a row with similar scenario:

it is not easy to understand right away that result is updated. Maybe you can add some animation or any effect, to make it more clear, that score is updated.

When I am hovering one image, then move cursor to another one >>> there is some shaking going on inside player-side div. Maybe try to fix that.

playRound function has many repetitions. Ususally that means, that bunch of helper functions may be written in order to make code more concise.

Also you are using some elements like this:

 document.getElementById("rock")

Inside several functions.
You can go ahead and declare more global constants.

This is first time I am seeing const keyword used in the loop:

for (const button of buttons) {
  button.addEventListener('click', () => {
    playerSelection = button.value;
    playRound();
  });
}

So I wanna learn some stuff and ask why are you using const keyword here?

There is some problems with input attributes.
You can go to validator with your HTML, it will tell you details

The W3C Markup Validation Service

And even checked your readme lol. You can fix word javascript and write JavaScript instead.

And one more CSS thing: when I am reducing viewport height, I can not figure out how to scroll the page

[cepseudoestdejapris]

thanks for the detailed feedback, much appreciated.

I fixed the issue with the scroll bar when reducing the viewport, I’m going to work on the rest right now.

Regarding the use of const in the loop, relevant StackOverflow

[morozovmatvej75]

When choosing between rock, paper, and scissors, the images instantly get bigger because of the huge border on hover. I think it would look better if you set box-sizing to border-box

When you do that, the border will be on the inner size of the image, therefore the image won’t increase in size.

My explanation isn’t perfect, so here’s MDN reference

edit: same problem with “play again” button

[alfonsusac]

Nice game, sleek design and art you got there.

But here is a visual bug:

First time Win →

Then I lose

Then when I win again

The color stayed red.

[cepseudoestdejapris]

@morozovmatvej75
Thanks for the tip, I ended up changing the effect to a box shadow, it’s a bit more subtle than the previous one I think.

@alfonsusac
Ah, I missed that. Thanks!

[alfonsusac]

Trust him, do

* {
 Box-sizing : border-box;
}

It helps sort out all problem with sizing, border, and what not

[cepseudoestdejapris]

yep, I added box-sizing border box
I meant to say, the effect I am using now is more subtle than the one I was using before (i.e increase the border size on hover)

I also took @ admit8490 advice, now everytime the score is updated there is an effect

[NyeverGator]

Hello @cepseudoestdejapris!

I like the design. It reminds me of the old computers that have black backgrounds and display content using the color green.

I checked your HTML code and saw this when testing JS:

I think what you should do instead is assign the visibility: visible in a separate class like what you did with the .fade-in-anim and through JS, use classList to add/remove it in the DOM.

That way, your code would be more organized (and more readable). I will commend you for organizing your JS file’s variables and functions, initializing them separately in their respective sections.

Say, I checked your Github account… good thing you are posting your projects there as you can show your potential to future employers when the time comes for you to apply for a job.

Nonetheless, since I’ll assume this is the first time you implemented JS (I am also learning JS at TheOdinProject), I could say that you did well. Keep it up!

The next project (Etch-A-Sketch) on the surface maybe at a different level compared to your Rock Paper Scissors but I think that’s the point. You eventually will be given projects that are more difficult than the last one.

And your job? Research, code, and test to see if your implementation works. If it does not work, read your code again to see what went wrong. Solve problems one at a time, starting small. Once you have those individual problems solved, you can combine them all to solve an even bigger problem.

Just like lego’s.

Hope this helped you in some way.