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
onclickevent 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.
- For each button, write an
-
Implementing the Game Logic:
- Use
Math.random()to generate the computer's choice. - Use
if...elsestatements to determine the winner. - Log the computer's choice and the result of the game to the console.
- Use
-
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>
Top comments (0)