Rock, Paper, Scissors: A Journey Through Time, Strategy, and Code.
Rock, Paper, Scissors is a simple yet widely popular hand game that people worldwide have enjoyed for centuries. The game’s simple rules and universally understood gestures make it a staple for settling disputes, making decisions, or simply passing the time. In this blog post, we will explore the rich history of Rock, Paper, Scissors, how to play the game, building the game and it’s code structure, and how developers can advance their coding skills.
History of Rock, Paper, Scissors:
The origins of Rock, Paper, Scissors can be traced back to ancient China, where a game called “shoushiling” was played around 200 BC. This early version of the game involved three animal gestures: a tiger, a chicken, and a worm. The tiger would defeat the chicken, the chicken would defeat the worm, and the worm would defeat the tiger, creating a circular relationship similar to modern Rock, Paper, Scissors.
The game eventually made its way to Japan, where it became known as “Jan-ken-pon” and gained widespread popularity during the Edo period (1603–1868). The Japanese version replaced the original animal gestures with the familiar Rock, Paper, and scissors hand signs we know today. Over time, the game spread throughout Asia and eventually to the West, where it remains a popular pastime.
How to Play Rock, Paper, Scissors
Rock, Paper, Scissors is a two-player game where players simultaneously form one of three shapes with their hands. The three possible shapes are:
- Rock: a closed fist
- Paper: an open hand with fingers extended
- Scissors: a partially open hand with the index and middle fingers extended and separated
The winner is determined based on the following rules:
- Rock beats Scissors (Rock crushes Scissors)
- Paper beats Rock (Paper covers Rock)
- Scissors beat Paper (Scissors cut Paper)
The game results in a tie if both players choose the same shape. The game can be played as a single round or a series of rounds, with the winner being the player who wins most of the rounds.
Developing Rock, Paper, Scissors:
Developing a digital version of Rock, Paper, Scissors is an excellent way for developers to practice and hone their coding skills. A digital version can be built using HTML, CSS, and JavaScript to provide a user interface and game logic.
The code structure for building Rock, Paper, Scissors can be broken down into several key components:
- HTML structure: The HTML file defines the structure and content of the game, including buttons for the user to choose their move and display areas for the results and scores.
- CSS styling: The CSS file provides the styling for the game, including layout, colors, fonts, and other visual elements. (although this script will lack style and focus on functionality)
- JavaScript logic: The JavaScript file contains the game’s logic, including functions for handling user input, determining the computer’s move, comparing moves to determine the winner, and updating the displayed scores and results.
Now, let’s dive deeper into the code structure and explore how each component works together to create a fully functioning Rock, Paper, Scissors game.
HTML Structure:
<!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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Rock, Paper, Scissors</h1>
<p>Choose your move:</p>
<button id="rock" onclick="handleClick('rock')">Rock</button>
<button id="paper" onclick="handleClick('paper')">Paper</button>
<button id="scissors" onclick="handleClick('scissors')">Scissors</button>
<div id="result"></div>
<div>
<span>User Score:</span>
<span id="user-score">0</span>
</div>
<div>
<span>Computer Score:</span>
<span id="computer-score">0</span>
</div>
<script src="script.js"></script>
</body>
</html>The HTML structure serves as the foundation for the game, defining the elements that will be visible to the user. The primary components of the HTML structure include:
[…]
<body>: This element contains the content that will be rendered on the page. It includes headings, paragraphs, buttons, and other user interface elements.<h1>: This heading element displays the game’s title, “Rock, Paper, Scissors”.<p>: This paragraph element provides instructions for the user, informing them to choose their move.<button>: These elements represent the options for the user to select their move (Rock, Paper, or Scissors). Each button has an id attribute for easy selection in the JavaScript file and an onclick attribute that triggers the handleClick() function with the corresponding move as an argument.<div id=”result”>: This div element is a container for displaying the result of each round. The id attribute allows us to select and update this element using JavaScript.User and Computer Score: These div elements contain the user and computer scores. Each score is wrapped in a span element with a unique id attribute for easy selection and updating with JavaScript.<script src=”script.js”></script>: This script element links the JavaScript file to the HTML document. It is placed at the body element’s end to ensure that the HTML content is fully loaded before the JavaScript code is executed.
JavaScript Structure:
let userScore = 0;
let computerScore = 0;
let roundsPlayed = 0;
const getUserChoice = userInput => {
return userInput.toLowerCase();
};
const getComputerChoice = () => {
const number = Math.floor(Math.random() * 3);
return ["rock", "paper", "scissors"][number];
};
const determineWinner = (userChoice, computerChoice) => {
if (userChoice === computerChoice) {
return "It's a tie!";
}
const winConditions = {
rock: "scissors",
paper: "rock",
scissors: "paper",
};
return winConditions[userChoice] === computerChoice
? "User wins!"
: "Computer wins!";
};
const checkGameOver = () => {
if (userScore >= 3) {
alert("User wins the game!");
resetGame();
} else if (computerScore >= 3) {
alert("Computer wins the game!");
resetGame();
}
};
const resetGame = () => {
userScore = 0;
computerScore = 0;
roundsPlayed = 0;
document.getElementById("user-score").textContent = userScore;
document.getElementById("computer-score").textContent = computerScore;
document.getElementById("result").innerHTML = "";
};
const handleClick = choice => {
if (roundsPlayed >= 5) {
alert("Game over! Please start a new game.");
resetGame();
return;
}
const userChoice = getUserChoice(choice);
const computerChoice = getComputerChoice();
const result = determineWinner(userChoice, computerChoice);
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = `User: ${userChoice} vs. Computer: ${computerChoice} - ${result}`;
if (result === "User wins!") {
userScore++;
} else if (result === "Computer wins!") {
computerScore++;
}
document.getElementById("user-score").textContent = userScore;
document.getElementById("computer-score").textContent = computerScore;
roundsPlayed++;
checkGameOver();
};The JavaScript file contains the game logic, including functions for handling user input, determining the computer’s move, comparing moves to determine the winner, and updating the displayed scores and results. By developing the JavaScript logic for a Rock, Paper, Scissors game, developers can gain experience in various aspects of programming, such as functions, conditionals, and event handling.
- Declared and initialize the global variables:
userScor,computerScore,roundsPlayedstore the user’s score, computer’s score, and the total number of rounds played. getUserChoice()function: This function takes a user input (a string) and returns its lowercase version. This is done to ensure that the game logic works with a consistent case.getComputerChoice()function: This function generates a random choice for the computer. It generates a random number between 0 and 2 and maps it to the corresponding choice (rock, paper, or scissors).determineWinner()function: This function takes the user’s choice and computer’s choice and determines the winner of the round. It checks if the choices are equal (a tie) or finds the winner based on the winning conditions defined in thewinConditionsobject.checkGameOver()function: This function checks if the game is over based on the best of 5 rounds condition. If the user or the computer has won 3 or more rounds, the game is considered over, and an alert is shown with the winner’s name. After displaying the alert, theresetGame()function is called to reset the game state.resetGame()function: This function resets the game state by setting the user’s score, computer’s score, and rounds played to 0. It also updates the displayed scores and clears the result text.handleClick()function: The `handleClick()` function is called when the user clicks on any of the rock, paper, or scissors buttons. It first checks if the game is already over (5 rounds played) and displays an alert to start a new game if necessary. Then, the function retrieves the user’s choice (passed as an argument) and the computer’s choice (generated randomly). It determines the winner using thedetermineWinner()function and updates the result text. If the user or the computer wins the round, their score is incremented, and the displayed scores are updated accordingly. TheroundsPlayedvariable is also incremented, and thecheckGameOver()function is called to see if the game has ended.
Advancing Coding Skills by Building Rock, Paper, Scissors
Building a digital version of Rock, Paper, Scissors offers developers several opportunities to grow their coding skills, including:
- Understanding and manipulating the DOM (Document Object Model): By building a Rock, Paper, Scissors game, developers can gain experience selecting, creating, and modifying HTML elements using JavaScript.
- Event handling: The game requires event listeners to detect and respond to user input, providing valuable experience working with JavaScript events.
- Implementing game logic: Developing the game’s logic allows developers to practice writing functions, using conditionals, and working with variables.
- CSS styling: Designing the game’s appearance allows developers to work with CSS properties and selectors, improving their understanding of web design principles.
- Code organization and best practices: Creating a Rock, Paper, Scissors game encourages developers to write clean, organized code, adhere to best practices, and consider scalability and maintainability in their projects.
Rock, Paper, Scissors has a long and fascinating history, transcending cultural and geographical boundaries. By developing a digital version of this timeless game, developers can engage with a beloved pastime and hone their skills in HTML, CSS, and JavaScript. Building a Rock, Paper, Scissors game presents an excellent opportunity to practice working with the DOM, event handling, game logic, and CSS styling while learning valuable lessons in code organization and best practices.
Furthermore, this project can serve as a foundation for further exploration and creativity. Developers can build upon the basic Rock, Paper, Scissors game by implementing additional features like animations, sound effects, leaderboards, and alternative game modes. Developers will gain a deeper understanding of web development principles and techniques as they refine and expand their projects.
Ultimately, creating a Rock, Paper, Scissors game is a fun and rewarding way for developers to improve their coding skills while contributing to the rich history of this classic game. So, whether you’re a seasoned developer looking for a new challenge or a beginner seeking an accessible project, why not give this timeless game a digital twist and watch as your coding skills reach new heights? Good luck!
