IT3049C - Ben Leach

Table of Contents

Search

3. Rock Paper Scissors

Table of contents

  1. Lab Goals
    1. Guidelines
  2. Game Flow
  3. Instructions
  4. Extra Credit Opportunity
    1. Unit tests (3 points per test)
    2. Reset Game Button (3 points)
    3. UI Design
    4. Use Buttons instead of Dropdown (1 Extra Credit Points)
  5. Output

Lab Goals

  1. Build our first game using HTML, CSS, and JavaScript.
  2. Demonstrate ability to use Bootstrap to setup the page layout.
  3. Demonstrate ability to create forms with the form/input elements.
  4. Demonstrate understanding of event-oriented programming.

Guidelines

  • commit your code frequently.
  • Use useful commit messages.
  • Make sure tests pass.
  • at the end of each of the following steps, run the tests to make sure you finished the step correctly.
  • Don’t forget to fill out the self assessment on the README file.

Game Flow

This assignment, we will be building the Rock, Paper, Scissors(RPS) game. We will be utilizing the concepts and techniques covered in the past few weeks to allow a user to play against the Computer. The game flow should be:

  1. Web page loads with a form to input user’s name (input is required, they cannot submit it without a value).
    • concepts: Building forms, Event-handeling, user input validation.
  2. User submits name and a new form appears with an input for Rock, Paper, or Scissors.
    • You can use:
      • select/dropdown
      • OR buttons
      • text buttons (but why would you do that!)
  3. User submits the form with their selection (input is required, they cannot submit it without a selection)
  4. Computer Generates a response.
  5. Determine the winner.
  6. Display the winner.
  7. Keep history of selections and winner of each round and display it.
  8. Reset the form after each round
  9. User should be able to start a new game.

Instructions

  1. run npm install
  2. Setting up the Layout
  3. Styling using CSS and Bootstrap 4
  4. Implementing Game Logic
  5. Putting it all together
  6. Finalize and Submit

Extra Credit Opportunity

Unit tests (3 points per test)

Reset Game Button (3 points)

User can Reset the game and Type in a new player name (3 points)

UI Design

Make the game aesthetically pleasing while satisfying the UI tests

  • (just adding Rock Paper Scissor images doesn’t count ☺)

    Use Buttons instead of Dropdown (1 Extra Credit Points)

Output

example image

Table of contents