1. Rock Paper Scissors Project

In this project, you will create a simple Rock, Paper, Scissors game using JavaScript. The project will allow users to choose between Rock, Paper, or Scissors, and the computer will randomly generate a choice. The game will then compare the user's choice with the computer's to determine the outcome: win, lose, or draw.

2. Key Concepts:
  • Conditional Logic (if-else statements)
  • Random Number Generation (Math.random())
  • Event Handling with Buttons
  • Basic Game Logic

  • 3. The Code:
    				
    					<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Rock paper scissors</title>
    </head>
    <body>
        
    
        <p>Rock Paper Scissors</p>
    
        <button onclick="
        const randomNumber = Math.random();
        if (randomNumber >= 0 && randomNumber < 1/3){
            console.log(('You picked rock. Computer picked paper. You lose'));
        } else if (randomNumber >= 1/3 && randomNumber < 2/3){
            console.log(('You picked rock. Computer picked Scissors. You win'));
        } else if (randomNumber >= 2/3 && randomNumber < 1){
            console.log(('You picked rock. Computer also picked rock . It is a draw'));
        }">Rock</button>
        
        <button onclick="
        const randomNumber1 = Math.random();
        if (randomNumber1 >= 0 && randomNumber1 < 1/3){
            console.log(('You picked Paper. Computer also picked paper. It is a draw'));
        } else if (randomNumber1 >= 1/3 && randomNumber1 < 2/3){
            console.log(('You picked Paper. Computer picked Scissors. You lose'));
        } else if (randomNumber1 >= 2/3 && randomNumber1 < 1){
            console.log(('You picked Paper. Computer picked rock . You win'));
        }">Paper</button>
    
        <button onclick="
        const randomNumber2 = Math.random();
        if (randomNumber2 >= 0 && randomNumber2 < 1/3){
            console.log(('You picked Scissors. Computer picked paper. You win'));
        } else if (randomNumber2 >= 1/3 && randomNumber2 < 2/3){
            console.log(('You picked Scissors. Computer also picked Scissors. It is a draw'));
        } else if (randomNumber2 >= 2/3 && randomNumber2 < 1){
            console.log(('You picked Scissors. Computer picked rock. You lose'));
        }">Scissors</button>
    
    				
    			

    4. Project Breakdown:

    1. Game Options:

    • There are three options for the user to select: Rock, Paper, and Scissors.
    • Each option is represented by a button that triggers the game logic when clicked.

    2. Random Number Generation:

    • The computer’s choice is determined using Math.random(), which generates a random number between 0 and 1.
    • Based on the random number, the computer picks one of the three options:
      • 0 ≤ randomNumber < 1/3: Paper
      • 1/3 ≤ randomNumber < 2/3: Scissors
      • 2/3 ≤ randomNumber < 1: Rock

    3. Game Logic:

    • The game compares the user’s selection to the computer’s selection using conditional statements (if-else if).
    • The game then outputs whether the user won, lost, or drew.


    5: JavaScript Example (Rock Button):

    				
    					<button onclick="
        const randomNumber = Math.random();
        if (randomNumber >= 0 && randomNumber < 1/3){
            console.log('You picked rock. Computer picked paper. You lose');
        } else if (randomNumber >= 1/3 && randomNumber < 2/3){
            console.log('You picked rock. Computer picked Scissors. You win');
        } else if (randomNumber >= 2/3 && randomNumber < 1){
            console.log('You picked rock. Computer also picked rock. It is a draw');
        }">Rock</button>
    
    
    				
    			
    The same logic is applied to the Paper and Scissors buttons, with adjusted outcomes for each scenario.


    6. Learning Outcomes:

  • You will understand how to use the Math.random() function to generate random values.
  • You'll practice writing and debugging conditional statements to handle multiple outcomes.
  • You will implement basic event handling with buttons in HTML and JavaScript.
  • You'll understand how to implement a simple game loop with user input and computer-generated values.

  • 7. Conclusion
    This project is a fun and interactive way to practice your JavaScript skills while building a classic game!
    ×