Intro
I am trying to make a rock, paper scissors game. I need to save 2 player inputs in 1 function (preferably). So when playerOne clicks on “rock” and playerTwo clicks on “paper” it will save that too.
Separate variables, same function.
Requirements
- Can’t use any libraries, must be 100% vanilla JS.
What I currently have
function getPlayerOption(playerOne, playerTwo) {
console.log(playerOne);
console.log(playerTwo);
}h1 {
text-align: center;
}
#player_turn {
color: rgb(255, 0, 0);
}
.container {
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-around;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rock, paper, scissors!</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>Player <span id="player_turn">1</span> pick an option!</h1>
<div class="container">
<div class="box">
<p onclick="getPlayerOption('rock')" id="rock">
Rock
</p>
</div>
<div class="box">
<p onclick="getPlayerOption('paper')" id="paper">
Paper
</p>
</div>
<div class="box">
<p onclick="getPlayerOption('scissors')" id="scissors">
Scissors
</p>
</div>
</div>
</body>
</html>Output that I want
First click is on “rock” and second click is one “paper” output in console will be:
Console; -> "rock" -> "paper"
Thank you for your time and efforts.
Advertisement
Answer
You could create a class for the game and store the inputs in member variables.
class Game {
playerOne = null;
playerTwo = null;
getPlayerOption(input) {
if (this.playerOne) {
this.playerTwo = input;
this.print();
this.reset();
} else {
this.playerOne = input;
}
}
print() {
console.log(this.playerOne);
console.log(this.playerTwo);
}
reset() {
this.playerOne = null;
this.playerTwo = null;
}
}
const game = new Game();h1 {
text-align: center;
}
#player_turn {
color: rgb(255, 0, 0);
}
.container {
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-around;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rock, paper, scissors!</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>Player <span id="player_turn">1</span> pick an option!</h1>
<div class="container">
<div class="box">
<p onclick="game.getPlayerOption('rock')" id="rock">
Rock
</p>
</div>
<div class="box">
<p onclick="game.getPlayerOption('paper')" id="paper">
Paper
</p>
</div>
<div class="box">
<p onclick="game.getPlayerOption('scissors')" id="scissors">
Scissors
</p>
</div>
</div>
</body>
</html>