Tutorial: How to make a snazzy Rock, Paper, Scissors game

Introduction

I recently made a Rock, Paper, Scissors game using HTML, CSS, and JavaScript/jQuery.  Some of my basic logic was based off some pre-work I completed for GA, but even some of my previous code had to be scrapped for it to work effectively.

I decided to do this since it was a simpler project that felt doable, which I realized was far more effective for learning than taking on a huge project that I may never finish. Who knew?

It took me ~2 days to complete (though I had some of the structure figured out before that as pre-work from General Assembly).  Rather than writing a post about the things I learned, I feel like it’s more useful for me (and maybe some others) to write about how I made it.

*You can play around with the finished version HERE.*

For those who don’t know the rules of the game for some reason, here they are.  It’s still unclear why exactly paper beats rock. So it goes.


 Pre-requisites

Though in this tutorial, I’ll be providing code snippets and you can virtually build it with little knowledge of programming whatsoever,  BUT it’s much more helpful to learn from the ground up.  If you have a basic understanding of the syntax and abilities of HTML, CSS, JavaScript, jQuery, and you have some knowledge about the DOM then feel free to skip this part. 

I’m a huge fan of Codecademy, Khan Academy, and Dash (General Assembly’s HTML/CSS/JavaScript tutorials).  All of these are free.  Here’s a rundown of each:

  • Codecademy:  What’s great about these tutorials is the structure.  It really allows you to tackle a tiny piece at a time when learning syntax, terminology, and basic logic.
  • Khan Academy:  The thing I like most about KA’s platform is that it utilizes a mix of interactive videos and short challenges.   You can scrub through the video, and manipulate the code at any point.  It also encourages creativity and tinkering, and even has a strong community built in (hats off to my former coworker, Pamela for her work creating these!)
    • Check these out: HTML/CSS: Making webpages, HTML/JS: Making webpages interactive with JavaScript, HTML/JS: Making webpages interactive with jQuery
  • Dash
    • Before being interviewed for General Assembly’s WDI program, I completed all five of the tutorials.  What sets Dash apart from the two above is that it combines a lot of bits and pieces of knowledge from before into a few mini-projects that you can show off to your friends.  The slideshows and interactive programming environment are also helpful when self-teaching.

Now that we are somewhat comfortable with the syntax and whatnot…let’s set up our files and host it on a local server!


Set up your file structure

Here is what my file structure looked like:

Screen Shot 2015-12-18 at 10.56.27 AM

Right now, let’s just set up all of our directories so that we won’t have to worry about that later.  Let’s do this via our command line (just for learnin’s sake)!

Within your command line, navigate to a directory of your choice (i.e. “Web Projects”).   I chose my “General Assembly” folder to be my parent directory.  Here is a screenshot of the commands I used to create my file structure:

Screen Shot 2016-01-12 at 2.28.42 PM

Images!

I quickly whipped up these graphics in Illustrator using vector shapes and the pen tool.  For the sake of time, I won’t go into the details in how to make cool geometric shapes. But…here is a folder of them for your own purposes! Yay! Download and move them into your images folder.


Set up your local server

In order to test your full application, you’ll need to host it on your local web server.   Here’s one way to do this:

  1. Navigate to your rockpaperscissors directory in your command line.
  2. Follow these instructions.  For the part that tells you to type in  “http-server [path] [options]”, I typed in:
http-server -p 8080 &

in my command line, which essentially allows me to view my app in my browser using the URL:

localhost:8080

For the sake of consistency, let’s use Google Chrome and type our URL (above) into the browser.  Do you get a blank page? If so, great!  Right click and click “Inspect” then go to the tab “Sources” – Do you see your beautiful rockpaperscissors directory complete with your beautiful files?  If not, make sure that you navigated to your directory before setting up your http server.   OKAY, ENOUGH SET UP ALREADY! Let’s start OMG.


HTML: the bare bones

As you may know, HTML is a mark up language to let your browser understand your document structure.  It is the skeleton of your entire project, and what you will be manipulating with both your CSS and JavaScript (I guess with this metaphor, CSS is the skin and clothing, and for this project, JS is the actual functionality of your body).

Open a new document in the text editor of your choice (I use Atom – it’s free and beautiful), and save the file as index.html in your rockpaperscissors folder.

Let’s first start with the typical structure of any HTML document. You need to declare the !DOCTYPE, create the head with a title, and create the body. Like so:

Screen Shot 2016-01-12 at 3.22.48 PM.png

Refresh your Google Chrome page where you accessed it last.  You’ll see a blank page, but hopefully you’ll notice the title that shows up on the tab is what’s between those <title> tags!

Linking CSS and JS within your HTML

In order to make your CSS and JS interact with your bare bones HTML, we’ll need to link them within the <head></head> !

First, let’s include links for jQuery (the library we’ll use in our JavaScript file), and for our ‘main.js‘ file where almost all of the functionality and logic of the game will go. Copy/paste this into your <head> tags:

http://code.jquery.com/jquery-2.1.4.js
 http://js/main.js

Next, let’s include links for our CSS files in the head:

 <link href="css/style.css" rel="stylesheet" type="text/css">
 <link href="css/shake.css" rel="stylesheet" type="text/css">

Let’s now move on to the main blueprint of our site.

Divs, divs, divs

How do we know what to do!?  Let’s look at the end product that we want.  Though there are better methods of designing this game (and I urge you to reformat to enhance its usability), this will be our “mockup” page to model our app on:

Screen Shot 2016-01-12 at 2.35.48 PM

If you break this up into sections, you can see three main segments:

  • The entire header box
    • (with the heading and scoreboard inside)
  • The selection of weaponry section
    • (rock, paper, scissors images)
  • The result message box
    • (the white block at the bottom that says who won)

You can think of each of these as a “div,” or container.  These containers help us organize our site into several sections.

Let’s code these divs within our HTML file now.  I named them “header-container”, “option-container”, and “winner.” Within these main divs, I

 

Screen Shot 2016-01-13 at 12.55.26 PM

Continue this pattern of finding out what sub-containers you could include within these larger containers (Remember the heading, scoreboard, etc.?).

Check out my final HTML here: https://github.com/nreddy216/rockpaperscissors/blob/master/index.html


CSS

Full disclosure: I kind of hate CSS. So far, at least.  As a designer,  I *love* what CSS can do, but I *hate* how it doesn’t always do what I think I tell it to do. It’s complicated.

For this reason, some of my CSS in this might be a byproduct of me doing hacky things to make something look right.  Use at your own risk, and modify until it makes the most sense to you.

Though I think it’s better to tinker around and figure out how you personally want the page to look (this will also help you learn better),  I’ll just supply my hacky CSS file for the sake of speed.  You’ll want to copy/paste this into your style.css file (also available here on Github):


For the shaky movement, I downloaded code from this beautiful site with a variety of CSS shakes: https://elrumordelaluz.github.io/csshake/

You can choose the shake you like the most, and copy/paste it into your “shake.css” file.


JavaScript/jQuery

Finally! The main functionality of it all.

In terms of the overall logic of Rock, Paper, Scissors.  Think about who the players are of this game and how they each make their decision.  You, as the player, have to provide input through clicking on an image.  The computer, however, makes a random decision (unless you are a pro at machine learning, in which case you would not be reading this tutorial).   Try to write down some pseudocode on how this would work – AKA the algorithm you would use to create this program in plain, human language.

Before taking a peek at my own code, try to come up with an overarching logical structure of your own, just for the game’s sake.  Test it out in repl.it or JSFiddle with simple return statements.

Then, play the web game and note down all interactions that occur.

Here are some questions that might help. Try to answer them as specifically as possible, and think about how you could potentially improve on the entire design:

  1. What is the user presented with initially?
  2. How does the user know what’s clickable?
  3. What happens when a user clicks an option (rock, paper, scissors)?
    • NOTE: Think about ALL of the interactions. How does the score change? What happens to the sign at the bottom? What do the colors signify?
  4. What happens when the user clicks/hovers the refresh button near the scoreboard?
  5. What happens when a user clicks the bottom white box (the “winner” div)?  Is this intuitive to you? If not, what would you do instead?

You can write down these interactions in pseudocode.  For example, “if a user hovers over an option, the image shakes.” Or “if a user clicks on an option, the text within the result div changes to reveal the winner.”  Each of these interactions can then be entered into the code.

For the sake of time and clarity, here’s my code with the comments included.  Unfortunately WordPress isn’t the best for copying/pasting all of my JS code (something I can hopefully troubleshoot later)!  But fortunately there is Github : https://github.com/nreddy216/rockpaperscissors


GitHub & GitHub pages

This is something I’ll actually come back to in the future.  You should be able to view your application on your browser at your local server, but I KNOW you want to show it off to your mom.  For now, this is a very helpful way to learn how to push it up onto your github pages: pages.github.com


Learnings

  • After making this small project, I realized how much more effective it was to make mini-projects vs. a giant undertaking (like a ~totally new app that revolutionizes the way we live and disrupts the universe~).
  • Actually designing the UX before just coding what I imagined at the top of my head would be a better plan next time. This was a very obvious misstep that I was aware I was doing, but I honestly just wanted to code and not worry too much about the usability.
  • Coding is fun! I started to form a slight addiction when iterating on the app. I’m pretty excited for GA to start soon.
  • Tutorials are difficult and take a long time to write, even for simple programs like this.  I’d love feedback on this particular tutorial (Was it even helpful?!) I’ll be experimenting with different types of tutorials along the way…Stay tuned.

Okay, I’m going to go before I risk making this blog ever longer. Later, y’all!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s