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.
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.
- 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!)
- 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:
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:
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:
- Navigate to your rockpaperscissors directory in your command line.
- 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:
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
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:
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> !
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:
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
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
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.
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:
- What is the user presented with initially?
- How does the user know what’s clickable?
- 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?
- What happens when the user clicks/hovers the refresh button near the scoreboard?
- 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
- 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!