Fundamentals (Paid)
  • 🚀Course Overview
  • Course Logistics
    • 🏫Course Methodology
      • 🧩Course Components
      • 💬Community Channels
      • 🎲Course Projects
    • 💻Required Hardware and Software
      • ☝️Required Software 1
      • ✌️Required Software 2
      • 👍Recommended Setup
    • 🗓️Schedule
    • 💡Tips and Tricks
      • 📒Coding Strategies
      • 🛠️Tooling Pro Tips
    • 🎓Post-Course
      • 🎓LinkedIn Certificates
      • 🚂Bootcamp Admission Criteria
  • 1: Introduction
    • 1.1: What is Coding?
    • 1.2: Web Browsers
    • 1.3: Command Line
    • Additional Resources 1
  • 2: Basic Data Manipulation
    • 2: Operators and Expressions
      • 2.1: Arithmetic Operators | Mathematical Expressions
      • 2.2: Assignment Operators | Variables
    • 2.3: Our First Program
    • Additional Resources 2
  • 3: Structuring and Debugging Code
    • 3.1: Functions
    • 3.2: Errors
    • Additional Resources 3
  • 4: Conditional Logic
    • 4.1: Intro to Logic
    • 4.2: Pseudo-Code, Boolean Or
    • 4.3: Boolean AND, NOT
    • 4.4: Input Validation
    • Additional Resources 4
  • 5: Managing State and Input Validation
    • 5.1: Program Lifecycle and State
    • 5.2: Program State for Game Modes
    • Additional Resources 5
  • 6: Arrays and Iteration
    • 6.1: Arrays
    • 6.2: Loops
    • 6.3: Loops with Arrays
    • Additional Resources 6
  • 7: Version Control
    • 7.1: Git
    • Additional Resources 7
  • 8: GitHub
    • 8.1: Intro to GitHub
    • 8.2: GitHub Fork and Clone
    • 8.3: GitHub Pull Request
    • 8.4: GitHub Repo Browsing
    • 8.5: Deployment
    • Additional Resources 8
  • 9: JavaScript Objects
    • 9.1: JavaScript Objects
    • 9.2: Card Deck Generation with Loops
  • 10: Advanced
    • 10.1 HTML
    • 10.2: CSS
    • 10.3: The Document Object Model
    • 10.4: DOM Manipulation
    • 10.5: Advanced Debugging with Sources Tab
  • 11: POST COURSE EXERCISES
    • DOM
    • Further Readings
  • In-Class Exercises
    • Day 2: Basic File and Data Manipulation
    • Day 3: Functions
    • Day 4: If Statements, Boolean Or, Boolean And
    • Day 5: Program State
    • Day 6: Scissors Paper Stone Redux
    • Day 7: Loops
    • Day 8: Arrays and Loops
    • Day 9: Beat That Redux
    • Day 10: Moar Cards / Chat Bot
    • Day 11: Blackjack Redux, DOM
  • Projects
    • Project 1: Scissors Paper Stone
      • Project 1: Scissors Paper Stone (Part 1)
      • Project 1: Scissors Paper Stone (Part 2)
    • Project 2: Beat That!
    • Project 3: Blackjack
  • Past Projects
    • Drawing With Emojis
    • Guess the Word
Powered by GitBook
On this page
  • Introduction
  • Setup
  • Base
  • Basic Scissors Paper Stone
  • Input Validation
  • More Comfortable
  • Formatting
  • Reverse Game
  • Reference Solution
  1. Projects
  2. Project 1: Scissors Paper Stone

Project 1: Scissors Paper Stone (Part 1)

✂️📃💎😜

PreviousProject 1: Scissors Paper StoneNextProject 1: Scissors Paper Stone (Part 2)

Last updated 2 years ago

Introduction

For our first project we will make our own version of the classic game. We have split this project into 2 parts to cater to the pace of Rocket's Fundamentals course. See the for when we have assigned each part.

Part 1 works with the technologies we have learnt so far in Fundamentals, and Part 2 adds additional technologies that we learn in subsequent course days.

Setup

  1. Create a project directory in your fundamentals code folder to host your projects if you haven't already.

  2. Make a copy of the for your Scissors Paper Stone project.

Base

Basic Scissors Paper Stone

Create a basic version of Scissors Paper Stone where the user inputs one of "scissors", "paper", or "stone", the program internally randomly chooses scissors, paper, or stone, and the program outputs whether the user won, the program won, or it's a draw.

Rules: scissors beats paper, paper beats stone, and stone beats scissors. If both parties choose the same object, it's a draw.

Unsure how to start? Try these steps:

  1. Write some pseudo code.

    • What is the input going to be?

    • What should the output be?

    • How will the computer's option be randomly generated?

    • How many different cases are there?

  2. Draw a simple flowchart to help you visualise the overall control flow of the program.

  3. Start small, test while you build and be ready to debug.

    • It's unwise to attempt to build the entire program in one go before testing.

    • Know that the final shape and form of your program will look different from when you are building it.

    • You can write new lines of code within main first, check that the code works as intended, and then "relocate" / refactor your code as a helper function.

    • Utilise console.log() sensibly to check for the right and .

    • Try to test as frequently as you can, and whenever you make a significant change. It builds confidence that things are working as they should and you will catch bugs as soon as they pop up.

  4. your code:

    1. Is all of your logic in main()? Can more lines of code be in helper functions?

    2. Are there any unwieldy or long helper functions? Should they be sub-routines which call helper functions instead?

    3. Can any of the logic be streamlined?

Input Validation

More Comfortable

Formatting

The computer chose scissors ✂️.
You chose paper 🗒.

You lose! Bummer.

Now you can type "scissors" "paper" or "stone" to play another round!

Reverse Game

You decide to prank your friends and create an SPS game where the rules are reversed: scissors beat stone, stone beats paper, and paper beats scissors. Create a version where the rules are reversed. The user can choose to try their luck at reversed mode by adding the word "reversed" to their choice. For example: "reversed stone".

Reference Solution

Sometimes the user types something other than "scissors", "paper", or "stone" during gameplay. Add to check if what the user types is a valid choice, and if not, kindly let the user know that there are only 3 input options, and ask them to try again.

Make the output of your game look nice. You can use string '<br>' to create in the output. Your output might look something like this:

for SPS-Part1 (up till More Comfortable). Please only refer to the reference solution after you have attempted the project. Note that there are many ways to implement the project and the reference solution is only 1 way.

input validation
new lines
View the reference solution
Scissors Paper Stone
Course Schedule
Fundamentals Starter Code
Refactor
control flow
values