Task 4: Implementing Game Logic
This task involves implementing the game logic for the “Rock, Paper, Scissors” game. It starts by adding a card component to showcase the game’s outcome. Next, the task sets up JavaScript for the gameplay logic. It involves creating a new JavaScript file and linking it to the HTML file. Then, it adds id attributes to some elements for easy access in the JavaScript file. Lastly, the JavaScript file contains code that runs when a user interacts with the “Rock”, “Paper”, or “Scissors” buttons on the webpage.
Step 1: Add a Card Component for Game Outcomes
Now, let’s integrate a card component into our app to showcase the game outcome.
A card is essentially a bordered box with padding around its content. It offers options for headers, footers, content, colors, and more.
Paste the following snippet at the end of the body element, precisely above the <script> tag:
<div class="container">
<div class="card">
<div class="card-body">
<h5 class="card-title">Draw!</h5>
<div>You selected scissors!<br/>The computer chose scissors!</div>
</div>
</div>
</div>Here’s the outcome:
Step 2: Set Up JavaScript for Gameplay Logic
Our application’s design and styling are complete! Now, it’s time to implement the game.
Create an index.js file and link it to index.html by adding the following script element at the end of the body element, right above the </body> tag:
<script src="index.js"></script>Additionally, add id attributes to some elements for easy access in index.js:
<div class="container my-5">
<div class="row gap-2">
<div class="col-sm">
- <button class="btn btn-primary btn-lg w-100">Rock</button>
+ <button id="rock" class="btn btn-primary btn-lg w-100">Rock</button>
</div>
<div class="col-sm">
- <button class="btn btn-primary btn-lg w-100">Paper</button>
+ <button id="paper" class="btn btn-primary btn-lg w-100">Paper</button>
</div>
<div class="col-sm">
- <button class="btn btn-primary btn-lg w-100">Scissors</button>
+ <button id="scissors" class="btn btn-primary btn-lg w-100">Scissors</button>
</div>
</div>
</div>
<div class="container">
<div class="card">
<div class="card-body">
- <h5 class="card-title">Draw!</h5>
+ <h5 id="result" class="card-title">Draw!</h5>
- <div>You selected scissors!<br/>The computer chose scissors!</div>
+ <div id="message">You selected scissors!<br/>The computer chose scissors!</div>
</div>
</div>
</div>Next, add the following code to index.js:
const rock = document.getElementById("rock");
const paper = document.getElementById("paper");
const scissors = document.getElementById("scissors");
function play(event) {
const userChoice = event.target.id;
console.log(userChoice);
}
rock.addEventListener("click", play);
paper.addEventListener("click", play);
scissors.addEventListener("click", play);The index.js file contains JavaScript code that runs when a user interacts with the “Rock”, “Paper”, or “Scissors” buttons on the webpage.
- The first three lines retrieve references to these buttons using the
document.getElementByIdmethod. The ids “rock”, “paper”, and “scissors” correspond to these buttons. - The
playfunction is then defined. It takes an event object, which automatically passes to event handlers in JavaScript and contains information about the specific event. Theevent.target.idproperty is used to get the id of the clicked button, which is then logged to the console. - The
addEventListenermethod attaches theplayfunction as an event handler to the “click” event for each button. When any of these buttons are clicked, theplayfunction executes.
Now, run and test the application: open the developer tool and click on each button.
Step 3: Implement Computer’s Random Choice
Let’s modify the script to allow the computer to select a choice randomly:
const choices = ["rock", "paper", "scissors"];
function play (event) {
const userChoice = event.target.id;
console.log("User choice is", userChoice);
const randomNumber = Math.floor(Math.random() * choices.length);
const computerChoice = choices[randomNumber];
console.log("Computer choice is", computerChoice);
}Now, run and test the application: click on any of the button and check the console.
Step 4: Integrate Game Logic to Determine Winner
Now, let’s incorporate the game logic:
if (computerChoice === userChoice) {
console.log("It's a draw!");
} else if (computerChoice === "rock" && userChoice === "paper") {
console.log("You win!");
} else if (computerChoice === "rock" && userChoice === "scissors") {
console.log("You lose!");
} else if (computerChoice === "paper" && userChoice === "scissors") {
console.log("You win!");
} else if (computerChoice === "paper" && userChoice === "rock") {
console.log("You lose!");
} else if (computerChoice === "scissors" && userChoice === "rock") {
console.log("You win!");
} else if (computerChoice === "scissors" && userChoice === "paper") {
console.log("You lose!");
}Now, run and test the application: click on any of the button and check the console.
Step 5: Display Game Results on the Web Page
Instead of displaying the game state in the console, let’s modify the application to inject the results into the HTML page.
Here’s how the final script.js should look:
const rock = document.getElementById("rock");
const paper = document.getElementById("paper");
const scissors = document.getElementById("scissors");
const result = document.getElementById("result");
const message = document.getElementById("message");
const choices = ["rock", "paper", "scissors"];
function play(event) {
const userChoice = event.target.id;
message.innerHTML = "You selected " + userChoice + "!" + "<br/>";
const randomNumber = Math.floor(Math.random() * choices.length);
const computerChoice = choices[randomNumber];
message.innerHTML += "The computer chose " + computerChoice + "!";
if (computerChoice === userChoice) {
result.innerHTML = "Draw!";
} else if (computerChoice === "rock" && userChoice === "paper") {
result.innerHTML = "You win!";
} else if (computerChoice === "rock" && userChoice === "scissors") {
result.innerHTML = "You lost!";
} else if (computerChoice === "paper" && userChoice === "scissors") {
result.innerHTML = "You win!";
} else if (computerChoice === "paper" && userChoice === "rock") {
result.innerHTML = "You lose!";
} else if (computerChoice === "scissors" && userChoice === "rock") {
result.innerHTML = "You win!";
} else if (computerChoice === "scissors" && userChoice === "paper") {
result.innerHTML = "You lose!";
}
}
rock.addEventListener("click", play);
paper.addEventListener("click", play);
scissors.addEventListener("click", play);Now, let’s run the application: click on any of the button!
That concludes our Rock Paper Scissors game!