Skip to main content

RPS

An online version of the classic decider game.

RPS is the online experience for the classic game that has been played for ages. But how do you play by yourself? In this ever improving project, I took advantage of the great animation abilities in CSS3 and the easy logic found using CoffeeScript to complete this fun task. Once I dove a little deeper into front-end development about a year after creating my first web site and discovering Code School during that time, I wanted to try my hand at something a little more interactive than just a page of static content. I had also just learned about preprocessing JavaScript with that newfangled CoffeeScript and was itching to start using it on a real-world project. As with most of my projects, I was learning some design along the way as I made all of my own graphics for this game.

I really enjoy Rock, Paper, Scissors. It's a simple game that nearly every person has played at least once in their life for fun or profit. In designing the game, I set out to make it possible to get playing right away against the computer, a.k.a my dash of CoffeeScript controlling the logic and interactivity of the site (I kept the animations within the CSS as it should be). The only images on the site are the hands, rock, paper, and scissors, all created in Photoshop because that was what I knew how to use at that time. I am most proud of the super skeuomorphic buttons that were designed in Sketch but created with CSS gradients exported from that design and then refined in the browser.

Go ahead and try out a few rounds against the computer. There are still a few bugs to work out of the CoffeeScript, and I may get to them eventually, but for now just refresh the page if something strange happens after a round or two. Enjoy!