This course builds a classic Rock Paper Scissors game in Python using a modular programming method for a beginner-level coder.

simp.tar.gz

python

After learning the basics of Python, it’s a great idea to complete at least one hands-on project where you can build something from scratch using Python. This course offers the opportunity to build a basic but classic Rock Paper Scissors game, command-line style.

You’ll begin the course by looking at the end product and then building the game step-by-step, adding one tiny feature in each lesson. This way, you’ll add one or two helper functions to the codebase and then test them individually in the main controller function. Because of this modular approach, you’ll finish coding the game efficiently and professionally.

By the end of the course, you’ll have one complete hands-on project in Python added to your profile. That’s a great start!

Mini Course: Build Rock Paper Scissors with Python

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock Paper Scissors</title>
</head>
<body>
    
    <div class="cli-container" id="cli"></div>

    
    <button onclick="startGame()" class="reset-button">Reset Game</button>

    <script src="index.js"></script>
    
</body>
</html>

// Get a reference to the command-line interface container
const cli = document.getElementById("cli");

// initialize variable to keep track of game
let playerScore = 0;
let computerScore = 0;
let rounds = 0;
let currentRound = 0;
let playerChoice = "";

// Function to display game instructions
function displayInstructions() {
    cli.textContent += "Welcome to Rock Paper Scissors.\n\nThe rules are simple: \n1. Rock beats scissors \n2. Scissors beats paper \n3. Paper beats rock\n";
}

// Function to get number of rounds
function getRound() {
    cli.textContent += "\nHow many rounds would you like to play? \n";
    cli.innerHTML += `Rounds: <input type="text" id="numRounds" onkeydown="handleRoundInput(event)" oninput="hideBorder(event)"><br>`;
    // Focussing on the input field
    document.getElementById("numRounds").focus();
}

/**
 * Function to hide the border of the input field when typing
 * @param {Event} event - The event object
 */
function hideBorder(event) {
    // Get the input element that triggered the event
    const input = event.target;
    
    // Set the border style of the input element to "none" to hide the border
    input.style.border = "none";
}

// Function to get player choice
function getPlayerChoice() {
    // Display round number
    cli.textContent += `\nRound ${currentRound+1}\n`;
    // Display player choice
    cli.textContent += "Please enter rock, paper, or scissors: ";
    // Use a "hidden" input field with oninput to hide the border when typing
    cli.innerHTML += `\nChoice: <input type="text" id="userChoice" onkeydown="handleChoiceInput(event)" oninput="hideBorder(event)"><br>`;
    // Focussing on the input field
    document.getElementById("userChoice").focus();
}

/**
 * Function to handle user's choice
 * @param {Event} event - The keydown event
 */
function handleChoiceInput(event) {
    // Check if the Enter key was pressed
    if (event.key === "Enter") {
        // Get user's input from the input field.
        playerChoice = document.getElementById("userChoice").value;
        // Convert user's input to lowercase
        playerChoice = playerChoice.toLowerCase();

        // Check if the user's choice is valid
        if (playerChoice === "rock" || playerChoice === "paper" || playerChoice === "scissors") {
            // Display the user's choice and update round number
            cli.textContent += `${playerChoice}\n`;
            currentRound++;
            // Get the computer's choice
            getComputerChoice();
        } else {
            // If the choice is invalid, display an error message and prompt the user again
            cli.textContent += "Invalid choice. Please try again.\n";
            getPlayerChoice();
        }
    }
}

/**
 * Handle round input
 * 
 * @param {Event} event - The keydown event
 */
function handleRoundInput(event) {
    // Check if the Enter key was pressed
    if (event.key === "Enter") {
        // Get user's input from the input field.
        rounds = document.getElementById("numRounds").value;
        // Convert user's input to a number
        rounds = parseInt(rounds);
        // Check if the input is a valid number of rounds
        if (rounds > 0) {
            // Add the number to the output
            cli.textContent += `${rounds}\n`;
            // Update the number of rounds
            rounds = parseInt(rounds);
            // Start the first round
            getPlayerChoice();
        } else {
            // If the input is invalid, display an error message and prompt the user again
            cli.textContent += "Invalid number of rounds. Please try again.\n";
            getRound();
        }
    }
}

// Function to get computer choice
function getComputerChoice() {
    const choices = ["rock", "paper", "scissors"];
    computerChoice = choices[Math.floor(Math.random() * choices.length)];
    cli.textContent += `Computer chose ${computerChoice}.\n`;
    determineWinner(playerChoice, computerChoice);
}

/**
 * Function to determine the winner and update the score
 * @param {string} playerChoice - The user's choice
 * @param {string} computerChoice - The computer's choice
 */
function determineWinner(playerChoice, computerChoice) {
    // Check if it's a tie
    if (playerChoice === computerChoice) {
        cli.textContent += "It's a tie!\n";
    } 
    // Cases where the user wins.
    else if (
        (playerChoice === "rock" && computerChoice === "scissors") || (
            playerChoice === "scissors" &&
            computerChoice === "paper"  ) || (
            playerChoice === "paper" &&
            computerChoice === "rock"
        )
    ) {
        cli.textContent += "You won the round!\n";
        playerScore++;
    } 
    // Cases where the computer wins.
    else {
        cli.textContent += "Computer won the round!\n";
        computerScore++;
    }

    // Check if the game is over
    if (currentRound === rounds) {
        // Display the final score
        displayScore();
    } else {
        // Get the next player's choice
        getPlayerChoice();
    }
}

/**
 * Function to display the final score.
 * It checks the playerScore and computerScore to determine the winner.
 * If the playerScore is greater than the computerScore, the player wins.
 * If the computerScore is greater than the playerScore, the computer wins.
 * If the scores are equal, it's a tie.
 */
function displayScore() {
    // Concatenate the playerScore and computerScore to display the final score
    cli.textContent += "\nFinal score: Player: " + playerScore + " Computer: " + computerScore + "\n";
    
    // Check the winner and display the appropriate message
    if (playerScore > computerScore) {
        cli.textContent += "You won!\n"; // Player wins
    } else if (playerScore < computerScore) {
        cli.textContent += "Computer won!\n"; // Computer wins
    } else {
        cli.textContent += "It's a tie!\n"; // It's a tie
    }
}

// Function to start the game
function startGame() {
    playerScore = 0;
    computerScore = 0;
    rounds = 0;
    currentRound = 0;
    playerChoice = "";
    computerChoice = "";
    cli.textContent = "";
    displayInstructions();
    getRound();
}

// Start the game
startGame();




/* Styling for the command-line interface container */
.cli-container {
    font-family: monospace;
    white-space: pre;
    background-color: black;
    color: white;
    padding: 10px;
    min-height: 380px;
    overflow-y: auto;
}

/* Styling for the text input box */
input[type="text"] {
    background-color: black;
    color: white;
    border: none; /* Hide the border */
    width: 10ch; /* Adjust the width as needed */
    outline: none; /* Remove the focus outline */
}

/* Styling for the reset button black background, white text, and white border on top right corner of the container */
.reset-button {
    background-color: black;
    color: white;
    border: 1px solid white; /* Adjust the border style and color */
    padding: 5px 8px;
    font-size: 14px;
    cursor: pointer;
    /* position of the button */
    position: absolute;
    top: 20px;
    right: 20px;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s; /* Adjust the duration as needed */
}

/* Styling for the reset button when hovered over */
.reset-button:hover {
    background-color: gray; /* Change the background color when hovered over */
    border-color: black; /* Change the border color when hovered over */
    color: black;
}

/* Styling for the reset button when clicked */
.reset-button:active {
    background-color: white; /* Change the background color when hovered over */
    border-color: black; /* Change the border color when hovered over */
    color: black;
}

codemirror

Learn to break down the game into its components.

__default

Modular Breakdown

How to start

Game flow revisited