RPS - The Classic Game of Rock, Paper, Scissors

Purpose:

For entertainment and amusement.

Authors: Clayton Jones, Daniel Nguyen, Thomas Tilahun, Bhagirath Bhatt

Last Updated: December 19, 2019

Deployed Site: https://jobdat.github.io/RPS/

The project was a team assignment. We selected something simple to work on - the ageold game of Rock, Paper, Scissors. The game was built with HTML, JavaScript, CSS, used EaselJS and TweenJS for the animation functions and other resources mentioned at the end of this readme.

How to run the app

From the terminal 'open index.html' from root of the project

'live-server' from the root of the project

Click the deployed link above

Wireframe and Domain Model

Draw.io link

Technologies Used

JavaScript, GitHub, Ubuntu, VS Code, EaselJS, TweenJS

Features:

Game Description

Only one user can play against the cpu. Enter your name into available name entry on the name entry page. Once you enter your name, you select rounds (3, 5, 7) to play, select your weapon. When you make your choice click "next" to start the fight. After Win, Loss, or Tie is determined, you can click "next" to play the next round.

Name Entry

The first page is a form to create a user data/profile. The checkUser function was used to verify if the user data existed, and if not it created the profile and stored it in local storage.

Function player data

The player data code would populate the player name. The function checks for the user data. If user data exists then it is updated and stored in local storage. If not, then it creates the user profile and stores it in local storage.

Round Select Screen

Featured three buttons with options to select 3, 5, or 7 rounds. Additionally we added a next button. The next button advanced the game to the next round. The rounds data was put into a constructor which moved it to a player constructor object.

Round counter

The rounds counter keeps track of the rounds played, wins/losses by the users or cpu, and stores the data to the local storage.

Main Game Screen

The screen features the weapons choice buttons, Rock, Paper, Scissors. The user selects the weapon by clicking the button to choose the weapon. The CPU weapon is selected randomly and stored as a variable. Fight feature displays the battle animation.

The screen additionally displays the front page to begin the fight. A button activates animation for playing rock, paper, scissors.

Animation screen

The animation screen brings in the chosen weapons and animates the fight. The winner's weapon remains on the screen briefly while the loser weapon is "knocked off" the screen. In the event of a tie both weapons remain on the screen briefly. A segment of the js code is displayed below.

Code testing

To ensure funtionality, testing functions were incorporated at specific points in the js. This primarily allowed us to test the functions and features of the game as we moved along in making this game.