Delve into JavaScript essentials, leveraging Python knowledge. Gain insights into similarities, differences, OOP concepts, libraries, and build a Rock Paper Scissors game. Transition smoothly to JavaScript.

mlxtend.tar.gz

JavaScript Docker

Spa Docker

Python

This course will guide you through JavaScript programming essentials by leveraging your existing Python knowledge. It highlights the similarities and differences between JavaScript and Python and covers program structure, built-in data types, variables, operators, arithmetic expressions, user-defined functions, and libraries.

You’ll dive into OOP concepts on classes and objects, control flow statements, and collections (arrays, lists, maps) alongside loops. You’ll also explore commonly used libraries in JavaScript. In the culminating project, you’ll apply your skills by developing a classic Rock Paper Scissors game where one player is the computer. 

After completing the course, you’ll have a comprehensive understanding of JavaScript, enabling you to transition smoothly from Python while building robust, real-world applications.

JavaScript for Python Programmers

**Rock Paper Scissors** is a simple hand gesture game. When played by two people, each player simultaneously makes a hand gesture representing one of three options: 
- Rock (a closed fist)
- Paper (an open hand)
- Scissors (a fist with the index and middle fingers extended)

The winner of the game is determined by a set of rules that dictate which gesture beats which other gesture. The game is often used to settle disputes or make decisions in a fun and lighthearted way.

# Rules

The rules of Rock Paper Scissors are simple and easy to understand. These are listed below:

- **Rock beats scissors:** If one player makes a fist to represent rock, and the other player extends their index and middle fingers to represent scissors, the player with the rock wins.

- **Scissors beats paper:** If one player extends their index and middle fingers to represent scissors, and the other player makes a flat hand gesture to represent paper, the player with the scissors wins.

- **Paper beats rock:** If one player makes a flat hand gesture to represent paper, and the other player makes a fist to represent rock, the player with the paper wins.

If both players make the same gesture, it’s a tie, and the game is usually played again until there is a winner. Depending on the players’ preferences, the game can be played as a single round or as a best-of-three or best-of-five series.

# Implemented game

In this course, we’ll make a CLI version of the Rock Paper Scissors game using the JavaScript programming language. We’ll first take a deep dive into the game requirements and then walk you through the process step by step to develop the final product!

The widget below shows the final outlook of the game. Interact with it to better understand our goal:

<!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 about the basic rules of Rock Paper Scissors.

Introduction

From Python to JavaScript

Project: Rock Paper Scissors Game

Introduction

Rules

Implemented game