Pure CSS Rock, Paper, Scissors game

2022

This Rock, Paper, Scissors game is written in HTML and CSS. No JavaScript is required!

The state management is done with CSS selectors and hidden radio buttons. When the user chooses a weapon and clicks the "Play" button, this secretly chooses the weapon for the computer as well. This works since the button is actually three radio button labels on top of each other, and their z-indices are changing all the time.

This is similar to the CodePen Pure CSS Game Rock Paper Scissor by Jerry Low.

screenshot
  • Browser game
  • CSS
  • Tutorial