I’ve been trying ages on how to figure out how to work out who is the winner but everything I’ve tried hasn’t worked I was wondering if anyone could help me out as I am new to JavaScript. I hope this is enough information to go off of if not let me know and I will try my best to give additional information if needed.
here is my code
const buttons = document.getElementsByClassName('buttons')
const playerScore = document.getElementById('player-score')
const botScore = document.getElementById('bots-score')
const playerImage = document.getElementById('player-image')
const botImage = document.getElementById('bot-image')
const choices = ['rock', 'paper', 'scissors']
/*Event listener for buttons*/
for (let button of buttons) {
button.addEventListener('click', function() {
let playerChoice = this.getAttribute('data-choice');
playGame(playerChoice)
})
}
/*Main function for game */
function playGame(playerChoice) {
playerImage.src = `assets/images/${choices[playerChoice]}.png`;
playerImage.alt = choices[playerChoice]
let botChoice = Math.floor(Math.random() * 3);
botImage.src = `assets/images/${choices[botChoice]}.png`;
botImage.alt = choices[botChoice];
let result = checkWinner(choices[botChoice], choices[playerChoice]);
}
/*Check winner*/
function checkWinner(playerchoice, botchoice) {
if (playerChoice == 'rock') {
if (botChoice == 'scissors') {
console.log('player wins')
}
}
}@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
/*General styes*/
html {
min-height: 100%;
position: relative;
}
body {
font-family: 'Anton', sans-serif;
margin: 0;
}
/*Header*/
header {
text-align: center;
height: 50px;
}
/*Game Area*/
#game-area {
width: 75%;
margin-left: auto;
margin-right: auto;
margin-top: 1%;
text-align: center;
}
#players-choice {
float: left;
background-color: lightgrey;
width: 45%;
}
#player-image {
width: 75%;
}
#bots-choice {
float: right;
background-color: lightgrey;
width: 45%;
}
#bot-image {
width: 75%;
}
/*Choices area*/
#choices {
display: inline-block;
margin: 10px;
width: 100%;
height: 40px;
font-size: 150%;
/*background-color: aqua;*/
}
#choices button {
all: unset;
display: inline-block;
margin: 2%;
}
/*footer*/
footer {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
box-sizing: border-box;
min-height: 80px;
padding-top: 5px;
text-align: center;
background-color: lightgrey;
}
/*Rules*/
/*#rules{
font-size: 15px;
}*/
/*media query:desktops and larger(1200px and wider)*/
@media screen and (min-width: 1200px) {
#choices button:hover {
text-decoration: underline;
}
}<header>
<h1>Rock Paper Scissors</h1>
</header>
<main>
<section id="game-area">
<!--player-->
<div id="players-choice">
<!--players Score-->
<h2 class="scores">
Your Score:
<span id="player-score">0</span>
</h2>
<!--Players Image-->
<img id="player-image" src="assets/images/6793733.png" alt="image of 3 hands one rock, one paper, and one scissors" />
</div>
<!--Computer-->
<div id="bots-choice">
<!--Computers score-->
<h2 class="scores">
Bots Score:
<span id="bots-score">0</span>
</h2>
<!--Computers image-->
<img id="bot-image" src="assets/images/6793733.png" alt="image of 3 hands one rock, one paper, and one scissors" />
</div>
<!--Buttons-->
<div id="choices">
<h3>Make your choice:</h3>
<button class="buttons" aria-label="rock" data-choice="0">Rock</button>
<button class="buttons" aria-label="paper" data-choice="1">Paper</button>
<button class="buttons" aria-label="scissors" data-choice="2">Scissors</button>
</div>
</section>
</main>
<footer>
<div id="rules">
<h2>Paper beats Rock | Rock beats Scissors | Scissors beats Paper</h2>
</div>
</footer>
2
Answers
You didn’t declare the parameters in the
checkWinnersfunctionYou don’t need to check every combination.
Basically, you have three possible outcomes:
But you don’t need to check both the player and the bot.
Because: If it’s not a tie and the player hasn’t won, the bot must have won.
So your checkWinner function could look like this: