Spock Rock Game

A JavaScript based Spock Rock Game feat. Confetti.js, Modules
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Tech Stack
2. Getting Started
   • Prerequisites
   • Installation
3. Implementation
4. Contributing
5. License
6. Contact
7. Acknowledgments

🙋 About The Project

Rock Paper Scissors Lizard Spock is an extension of the classic game of chance, Rock Paper Scissors, created by Sam Kass and Karen Bryla. Sam Kass explains he created the expanded game because it seemed like most games of Rock Paper Scissors with people you know would end in a tie. Rock Paper Scissors Lizard Spock was first mentioned in the Season 2 episode, The Lizard-Spock Expansion, the title of which references the game.

There is also a Confetti falling animation across the screen over the win. Just play & enjoy! 😄

(back to top)

🛠 Built With

• 
• 
• 
• 

(back to top)

🚀 Getting Started

This is an example of how you may start on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• Live Server Extension

Installation

1. First of all install Live Server extension by Ritwick Dey.
2. Once the extension was installed, then right-click on index.html and select Open with Live Server.
3. It'll open a new tab in browser & start serving the game. Enjoy!.

(back to top)

🏗️ Implementation

• First of all, we need to gather all functional requirements of the game like:
• Functional Requirements:

  1. Two players play the game by each picking a symbol randomly: the selected symbols determine who the winner is.

  2. The allowed moves are Paper, Rock, Scissors, Lizard, Spock and they interact as follows: “Scissors cuts paper, paper covers rock, rock crushes lizard, lizard poisons Spock, Spock smashes scissors, scissors decapitates lizard, lizard eats paper, paper disproves Spock, Spock vaporizes rock, rock crushes scissors.”

  3. If both players pick the same symbol, your application will not select a winner and declare the game a tie

• Then break the whole game into small Ui Components & start building indivisual components.

Ui Components:

1. Game Board

   • The whole game'll be inside of a Game-Board which receives certain width on different viewports.
   • There'll be two players: User & Computer.
   • The icons are outsourced from FontAwesome's regular icon collection & Each icon represents a player's move
   • The player container divided into two sections - one for User & one for computer.
   • Each section'll contain "player-name" followed by "score" and then "name-of-the-choice" the player selects.
   • Next, all the "move-icons" sits in line.
2. Player's Move Icon

   • For user's selection, when user click on an icon, it's color turns into black & updates the "name-of-the-choice" portion from "choice" (by-default) to the selected one.
   • For computer's choice, generate a number between 0 & 1 and divided whole (0, 1) interval into 5 parts - each of width 0.2. According as where does the generated number lie, we assign one from 'rock', 'paper', 'scissors', 'lizard', 'spock' respectively.
   • Once computer chooses it's move, the respected icon's color on the game board turns into black & updates the "name-of-the-choice" portion from "choice" (by-default) to the selected one.
   • Before allowing user to click again, the game board automatically reset previous choices of both player and computer.
   • Here "Switch Statement" is used to implement such feature in both cases.
3. Determining Winner

   • First of all, it's very crucial to choose a right data structure to hold choices:
   • 
   • Corresponding to the player's choice, if defeats array inside of that choice contains Computer's choice, then player wins. Otherwise Computer wins.
   • Finally, update the score of both player & computer in the game board.
4. Confetti falling animation over Win

   • Here we used confetti.js, a vanilla JS library for creating a configurable, high-performance confetti falling animation using HTML5 canvas and requestAnimFrame API.
   • The confetti.js is modified little bit to bring the code under anonymous function into global scope. So that these three functions: 'startConfetti', 'stopConfetti', 'removeConfetti' become globally available.
   • The good news is that modern browsers have started to support module functionality natively. This can only be a good thing — browsers can optimize loading of modules, making it more efficient than having to use a library and do all of that extra client-side processing and extra round trips.
   • In order to do that, firstly we have to export the above three specified functions & import them inside main script file. Then execute main script file as the top-level module:
   • 
   • But type="module" makes main script self-contained. That means the main script no longer shares in global scope with the elements in index.html
   • To make things globally available, pass it into Window object like this:
   • 

To see in action, please visit to the Link

(back to top)

🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

📜 License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

📮 Contact

Prasenjit Sutradhar - @twitter_handle - [email protected]

Project Link: https://github.com/Prasenjit-3433/Spock-Rock-Game

(back to top)

✌️ Acknowledgments

• Fontawesome
• Confett.js
• Heropatterns - SVG Background

(back to top)