Rock Paper Scissors, Spock Lizard?

Rock Paper Scissors with a very annoying 80's twist.

Link to project: Coming Soon

How It's Made:

Tech used: HTML, CSS, JavaScript, Framework of choice

Under The Hood: This simple game is using HTML, CSS, and Vanilla JavaScript. The HTML and CSS are strictly cosmetic. The most important components from the framework are the buttons and the table that contains the scoreboard. Within the JavaScript that is where all the magic happens. Using the methods, Math.random & Math.round we are able to randomly generate a rational number between 0 & 1. We then split the percentage of the rational number between all arguments. By using the event listener .onclick we are able to then use the functions that we created to allow the user the ability to click each button and receive a response. With each response the bot randomly chooses a argument and the results are compared with another boolean.

Optimizations

Due to the fast turn around of this project I was not able to add all the functionality that I would hope for. The following is things I would add or change.

1. Inability to exit game until you beat it. a) The purpose of this game was to be annoying. I would have added event listeners that activated whenever the user moused up towards the address bar.

2. Unlocking part 2 of game, Spock & Lizard. a) After getting between 5-10 wins in a row. The Spock and lizard would be added and you would have to get another 5 wins to be able to unlock the ability to exit the game. This would be handled with a toggle class and conditionals.

Lessons Learned:

What I really took away from this was how to use Math.random, Math.floor, Math.ceil, and Math.round. Beyond that, the hands on practice with boolean made understand how if/else really works.

Examples:

Take a look at these couple examples that I have in my own portfolio:

Coming Soon: