🟨 JavaScript 4 | 🪨 Rock 📄 Paper ✂️ Scissors

Yesterday I went through the first 4 hours of this really nice free JavaScript course by SuperSimpleDev and today I want to share one exercise I found really interesting: Rock Paper Scissors. As always below is my code :)

Exercise: Rock Paper Scissors

Objective: Create a web page where a user can play Rock Paper Scissors against the computer.

Requirements:

HTML Structure:
- Create an HTML file with the basic structure (doctype, html, head, and body tags).
- Inside the body, include a title for your game using a paragraph or heading tag (e.g., <h1>Rock Paper Scissors</h1>).
- Add three buttons labeled "Rock", "Paper", and "Scissors".
JavaScript Logic:
- For each button, write an onclick event handler that contains the game logic.
- The game logic should:
  - Generate a random choice for the computer (rock, paper, or scissors).
  - Compare the computer's choice with the user's choice (based on which button they clicked).
  - Determine the winner and display the result.
Implementing the Game Logic:
- Use Math.random() to generate the computer's choice.
- Use if...else statements to determine the winner.
- Log the computer's choice and the result of the game to the console.
Customization (Optional):
- Feel free to add custom styles with CSS or additional features to enhance the user experience.

My Code

What I find so interesting about this is how ‘mathy’ it gets to generate a random play by the computer. In Python I don’t need to get into math at all.

I also just keep forgetting to put semicolons all the time because I never had to place them in Python. But I’m getting more used to them already now :)

<!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();

        let computerMove = ''

        if (randomNumber >= 0 && randomNumber < 1 /3 ) {
            computerMove = 'rock';
        } else if (randomNumber >= 1 / 3 && randomNumber < 2 / 3 ) {
            computerMove = 'paper';
        } else {
            computerMove = 'scissors';
        };

        console.log(computerMove);

        let result = '';

        if (computerMove === 'rock') {
            result = 'Tie.';
        } else if (computerMove === 'paper') {
            result = 'You Lose';
        } else if (computerMove === 'scissors') {
            result = 'You Win';
        }

        console.log(`You picked rock. Computer picked ${computerMove}. ${result}`)

    ">Rock</button>
    <button onclick="
    const randomNumber = Math.random();

    let computerMove = ''

    if (randomNumber >= 0 && randomNumber < 1 /3 ) {
        computerMove = 'rock';
    } else if (randomNumber >= 1 / 3 && randomNumber < 2 / 3 ) {
        computerMove = 'paper';
    } else {
        computerMove = 'scissors';
    };

    console.log(computerMove);

    let result = '';

    if (computerMove === 'rock') {
        result = 'You win.';
    } else if (computerMove === 'paper') {
        result = 'Tie';
    } else if (computerMove === 'scissors') {
        result = 'You lose';
    }

    console.log(`You picked paper. Computer picked ${computerMove}. ${result}`)

">Paper</button>
    <button onclick="
    const randomNumber = Math.random();

    let computerMove = ''

    if (randomNumber >= 0 && randomNumber < 1 /3 ) {
        computerMove = 'rock';
    } else if (randomNumber >= 1 / 3 && randomNumber < 2 / 3 ) {
        computerMove = 'paper';
    } else {
        computerMove = 'scissors';
    };

    console.log(computerMove);

    let result = '';

    if (computerMove === 'rock') {
        result = 'You lose.';
    } else if (computerMove === 'paper') {
        result = 'You win';
    } else if (computerMove === 'scissors') {
        result = 'Tie';
    }

    console.log(`You picked scissors. Computer picked ${computerMove}. ${result}`)

">Scissors</button>
    <script>

    </script>
</body>

</html>