Submitted

Rock, Paper, Scissors Game with JavaScript and CSS Class Toggling

@nisenihonjin

Desktop design screenshot for the Rock, Paper, Scissors game coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View Challenge

Design Comparison

SolutionDesign

Report

0

Accessibility Issues

0

HTML Issues

View Report

nisenihonjin’s questions for the community

How to Play

  • You pick a "token" to see if you beat the house.
  • Chances of winning are always 50%-50%; you will never tie.
  • You can switch between "normal" mode and "bonus" mode by clicking logo image
  • Both normal and bonus mode scores are saved in localStorage so they will persist on the next visit to the page

CSS

  • While there were a lot of colors included in the style guide, I had to guess some of them from the design screenshots (eg: edge of tokens, shadows, focus glow).
  • To accommodate CSS transitions, I have a lot of high specificity selectors, so I feel the CSS is kind of bloated, and any hints as to how to simplify it would be appreciated.
  • Since there are a lot of transitions, I included the will-change property, but I've also read this can put on a strain on resources. I didn't notice a drop in performance either with or without it, so maybe it would be better to go without?
  • For the rules dialog on big screens, I wanted it to appear in the middle of the page regardless of window size, but I could only get it to work by setting the elements top property and animating it. I know animating the top property requires a re-paint of the page and thus is not high-performance. If anyone can think of a way to get the rules dialog exactly centered on the page without using it, please let me know.
  • I had to figure out what the coordinates of the position of each tokens around a circle was using trigonometry and putting each final value in by hand. Would there be a better way to figure it out with the calc function?
  • I'm using quite a few CSS variables, but I feel like I could have done more to make it more DRY. If you have any suggestions, I'd love to hear them.
  • In Safari, the SVG images get really blurry when scaled; I looked around but couldn't find a solution that fixed it. Please let me know if there's anything I could have done!

HTML

  • since this isn't some article/typical HTML and has lots of interaction/animations, I was kind of stuck as to how to organize the HTML. Is there a better way to lay this out?

Community Feedback

@iadefidipe

Posted

This is great, I love the animations. I am definitely studying your implementation.

0

Give some feedback to @nisenihonjin about their solution...

Slack logo

Join our Slack community

Join over 80,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!