Work

Rock Paper Scissors

A simple JavaScript game with an HTML5/CSS3 interface

October, 2015

Congratulations!

You’ve won this game!

Play Again

Rock Paper Scissors

You

Opponent

Choose a move.

Good luck!

About Rock Paper Scissors

This game was produced as my solo project at the end of the first week of the JavaScript curriculum in Phase 0, the remote preparatory program for Dev Bootcamp. It was written in vanilla HTML, CSS, and JavaScript. The assignment was to create a simple game using Javascript, although the instructions were left rather open-ended:

"It's up to you to decide how much detail you want to go in to. If you are having fun, keep working and solidifying your understanding of JavaScript objects and functions. If you're bored and feel like you've gotten enough out of it after writing a few objects and functions that work together, consider yourself done."

The minimum requirements for completing the challenge were fairly modest:

Create at least 2 objects with properties
Create at least 2 functions that interact with those objects by adding or modifying the object's properties.
Call each function (invoke the function). Make sure the output is actually what you expect!

Even though it was not required, I wanted to make a playable game, not just a few objects and functions run by canned code to simulate a game. This created a problem, though, in that JavaScript isn't as friendly to text-based games that run in the terminal as are some other languages, like Python and Ruby. Even simple games like Tic Tac Toe and Othello require the capacity to display a text-graphics version of a game board—something that I didn't initially see as feasible with JavaScript. Since a JS game pretty much has to be played in a web browser, to get to the JavaScript console, I decided to write a game that could be played entirely in prompt and alert windows. Since Rock-Paper-Scissors has no board to display, needs only a single character of user input each turn ("R", "P", or "S"), and can present its results in text ("You chose rock. Your opponent chose paper. You lose this round."), it seemed a perfect fit. The fact that it required no more sophisticated AI than randomly picking one of three possible moves for the computer player made it even more appealing.

I began by pseudocoding and then coding a complete, playable version of Rock Paper Scissors that pitted the player against the computer in a best-three-out-of-five game that ran entirely through prompt and alert pop-up windows. I then realized that inserting DOM-manipulation code into the game's functions wouldn't be that difficult, so I constructed a preliminary interface in HTML, and hooked the game events to its elements. The biggest change in transitioning from a text-based version of the game to one with a web-app-style interface was shifting from running the game turns through a while loop to initiating each turn with an onclick event. Once I worked that out, the rest fell into place fairly quickly. I finished the development process by reorganizing the layout of the game interface, simplifying it and using colors (blue for the player, gold for the opponent) to make it clearer and more intuitive.