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!

An attempt to organize my learnin’

Hi, future readers.  I’m Nidhi, and I’m learning to code (You’re now supposed to say, “Hi, Nidhi” and tell me that I’m in a safe space to share my feelings.)

The “TL;DR” version of the mess below: This blog is to help me track my coding progress, help me problem-solve, & share some nuggets of knowledge. I’m also going to be an Opportunity Fund Fellow at General Assembly for Jan 2016, so I’ll probably be talking about that soon!

b7e

_____________________________________________________

I’m starting this blog for a few reasons:

  1. I want a way to discuss the problems I’m facing as I’m learning.
  2. I am one of those people who needs to write things down/read them to remember them.  Which is why I don’t know people’s names unless they wear name tags. (I still call my boyfriend ‘you’)
  3. Hopefully I can harness good ol’ societal pressure to persuade me to make cooler things. Like a web app that will automatically make your friends purchase everything in your “Save for Later” section on Amazon. Such a brilliant idea, amirite?
  4. There’s a slim chance that in the not-so-distant future, my ramblings will help someone as they learn.  If it’s in the distant future, then these words will mean nothing unless translated to Newspeak.
  5. I also want to (at some point!) have a solid list of free resources that can help self-learners out there with the basics of web development.  There are a plethora out there, and it’s hard to distinguish which the best are.  I remember the first hurdle I faced was “Well, I get the basics of coding….but WHERE DO I PUT MY CODE?!”  It’s amazing how many great coding resources don’t go over this.

A little about my me (besides the fact that I use A LOT OF PARENTHESES WHEN I WRITE):

I majored in Math & Film in college, and specialized in digital media. I took a few non-major CS courses in college, but tended to feel discouraged and confused at times (without then realizing that ~*everyone*~ feels this way when learning to code).  Also, coding seemed dull at the time and anytime someone said ‘database’ I would tune out, so I didn’t go out of my way to become a CS genius.  After I moved to the Bay Area for a fellowship at Khan Academy, I became more interested in the possibilities of technology and design.  I’m especially fascinated in using coding for creative +design endeavors – i.e. interactive storytelling, education (see: Explorable Explanations), and interaction design.

In mid-January, I’ll start as an Opportunity Fund Fellow at General Assembly’s  Web Development Bootcamp, where I’ll be learning to code full-time for three months.  I’m pretty excited about this, though I know I have a lot to learn beforehand to make good use of my time.

Where I am now in my learnin’:

  • I’ve gotten pretty familiar with HTML/CSS, though I’m realizing lately that there is a lot more to know about CSS (and how terrible it can be when you just want it to do a simple thing)
  • I’ve become more comfortable with JavaScript in terms of syntax and basic logic (using for/while loops for iteration, using collections, etc.).   I’m also getting familiar with jQuery, though it’s far from rolling off the tips of my fingers.
  • I’m now using Terminal for things (big step!) and have gotten over my fear of committing things to GitHub. I also know how to host my site locally now. Things are looking up. I still haven’t gotten used to putting a project up for the world to see yet.
  • I have taught myself ~some ~Ruby (from Aug-October), but now have forgotten most of it. I also learned more about specs and tests using testfirst.org.
  • I’m still learning about how computers work.  It seems important to know considering I spend the majority of my time on one….though I think I enjoy tinkering more so than I enjoy knowing about the reason why it works.
  • Currently, I’m working on publishing a simply “Rock, Paper, Scissors” app using HTML/CSS + JavaScript/jQuery.

Okay, this ended up being significantly longer than I intended.

Bye!