<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<style>
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.wrapper {
background: #1c1c1c;
color: white;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
flex-direction: column;
}
.buttons {
display: flex;
gap: 20px;
}
button {
height: 100px;
width: 100px;
font-size: 48px;
border-radius: 30px;
cursor: pointer;
}
.resultContainer {
font-size: 2rem;
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="buttons">
<button class="rpsButton" value="Rock">✊</button>
<button class="rpsButton" value="Paper">🤚</button>
<button class="rpsButton" value="Scissors">✌</button>
</div>
<div class="resultContainer">
<div id="player-score"></div>
<div id="hands"></div>
<div id="result"></div>
<button id='endGameButton'>🔴</button>
</div>
</div>
<script>
// we are creating an object to save athe computer score and the player score
const totalScore = { computerScore: 0, playerScore: 0 }
function getComputerChoice() {
const rpsChoice = ['Rock', 'Paper', 'Scissors']
const randomNumber = Math.floor(Math.random() * 3)
return rpsChoice[randomNumber]
}
// In the computer choice function, we are creating an array with the words rock, paper an scissors... Then we are going to get a random number multiplied by 3 so we can get a random number inside 3 .Then we floor it using 'Math.floor()' function which is going to round off all the decimal numbers generated by the random functions.
// Finally we return the array variable name with the random generation variable in box brackets.
function getResult(playerChoice, computerChoice) {
// we are passing 2 arguments in this function.
let score;
// we are creating an empty variable.
if (playerChoice == computerChoice) {
score = 0
} else if (playerChoice == 'Rock' && computerChoice == 'Scissors') {
score = 1
} else if (playerChoice == 'Paper' && computerChoice == 'Rock') {
score = 1
} else if (playerChoice == 'Scissors' && computerChoice == 'Paper') {
score = 1
}
else {
score = -1
}
return score
}
const resultDiv = document.getElementById('result')
const handsDiv = document.getElementById('hands')
const playerScoreDiv = document.getElementById('player-score')
function showResult(score, playerChoice, computerChoice) {
if (score == -1) {
resultDiv.innerText = 'You lose :('
} else if (score == 0) {
resultDiv.innerText = "It's a draw :|"
} else {
resultDiv.innerText = 'You won! :)'
}
handsDiv.innerText = `(me)${playerChoice} vs ${computerChoice}(robot)`
playerScoreDiv.innerText = `player score: ${totalScore['playerScore']}`
}
// ** Calculate who won and show it on the screen **
function onClickRPS(playerChoice) {
const computerChoice = getComputerChoice()
score = getResult(playerChoice, computerChoice)
totalScore['playerScore'] += score
showResult(score, playerChoice, computerChoice)
}
function playGame() {
const rpsButtons = document.querySelectorAll('.rpsButton')
rpsButtons.forEach(rpsButton => {
rpsButton.onclick = () => onClickRPS(rpsButton.value)
})
const endGameButton = document.getElementById('endGameButton')
endGameButton.onclick = () => endGame(totalScore)
function endGame(totalScore) {
totalScore['playerScore'] = 0
totalScore['computerScore'] = 0
resultDiv.innerText = ''
handsDiv.innerText = ''
playerScoreDiv.innerText = ''
}
}
playGame()
</script>
</body>
</html>