Rock, Paper, Scissors?

I was reminded of The Odin Project while Googling for portfolio project ideas. The first project under JavaScript fundamentals was for a Rock Paper Scissors game.

The assignment called for making a game of rock paper scissors that was played via the console. The user could input their choice into the console, the computer would randomly select its own choice, then a winner is declared.

The Odin Project does a good job of giving you a good place to start building your code without holding your hand through it. They instruct you on what functions would be best to create, then suggest that you can/should rework any functions to be more useful for you.

A few days after completing it, I came across a few creative coding inspirations and had the idea to give my game a UI to make it playable with just a few clicks.

Challenges:

  • I tried setting a variable of computerDisplay to be document.getElementById(“computer-turn”) but was getting console errors.
    Uncaught TypeError: Cannot read property 'value' of null

    Some research helped me figure out that the browser was saying that the element didn’t exist in the HTML file, despite the fact thatput it there.  But, what the error really meant was that the JavaScript file was telling the browser to look for the HTML elements before the page actually loaded them. My script tag was in my head tag. Oops! Moving the script tag to the bottom fixed this issue.

  • The game scales down for smaller browser sizes, but not quite in the way that I want it to.  One downside to using CodePen to develop is that it becomes very tempting and easy to develop specifically for the browser you’re using. It looked great as I resized my browser to smaller and smaller sizes. Not as great when I actually loaded it on my phone. Next update to this will also include a true mobile stylesheet.

    Mobile Screenshot

One thing that I wish I had done differently was to code more of this in a text editor instead of Code Pen. I love seeing instant results on screen (I am a millennial), but it also would have been cool to see the revision history as this project evolved.

As always, I am learning.

https://codepen.io/cerita/full/jYLZVK/

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s