Max 5 points, announce winner
This commit is contained in:
parent
b83b1ed631
commit
8f9d6d689f
|
@ -16,15 +16,17 @@
|
|||
font-size: xx-large;
|
||||
cursor: pointer;
|
||||
}
|
||||
#result {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: larger;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button class="choose" value="rock">Rock</button>
|
||||
<button class="choose" value="paper">Paper</button>
|
||||
<button class="choose" value="scissors">Scissors</button>
|
||||
<div id="result">
|
||||
Result:
|
||||
</div>
|
||||
<div id="result"></div>
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
23
index.js
23
index.js
|
@ -6,11 +6,13 @@ function getComputerChoice() {
|
|||
return choices[Math.floor(Math.random() * 3)];
|
||||
}
|
||||
|
||||
function playRound(playerChoice, computerChoice) {
|
||||
function playRoundResult(playerChoice, computerChoice) {
|
||||
let playerChoiceCapital = playerChoice.slice(0,1).toUpperCase() + playerChoice.slice(1,playerChoice.length)
|
||||
let computerChoiceCapital = computerChoice.slice(0,1).toUpperCase() + computerChoice.slice(1,computerChoice.length)
|
||||
|
||||
if (playerChoice == computerChoice) {
|
||||
points.playerAddPoints();
|
||||
points.computerAddPoints();
|
||||
return `It's a tie! ${playerChoiceCapital} vs ${computerChoiceCapital}.`;
|
||||
} else if ((playerChoice == "rock" && computerChoice == "paper")
|
||||
|| (playerChoice == "paper" && computerChoice == "scissors")
|
||||
|
@ -36,7 +38,7 @@ const points = (() => {
|
|||
}
|
||||
function reset() {
|
||||
player = 0;
|
||||
computer = 0
|
||||
computer = 0;
|
||||
}
|
||||
return {get player() {return player},
|
||||
get computer() {return computer},
|
||||
|
@ -46,9 +48,18 @@ const points = (() => {
|
|||
const buttons = document.querySelectorAll("button.choose");
|
||||
const resultDiv = document.querySelector("div#result");
|
||||
|
||||
function playGameRound(value) {
|
||||
let result = playRoundResult(value, getComputerChoice());
|
||||
resultDiv.textContent = `Result: ${result}`;
|
||||
let point = [];
|
||||
|
||||
if ((points.player >= 5 && (point = ["Player", points.player, "Computer", points.computer]))
|
||||
||(points.computer >= 5 && (point = ["Computer",points.computer, "Player", points.player]))) {
|
||||
resultDiv.innerText += `\r\n${point[0]} won against ${point[2]} ${point[1]}:${point[3]}`;
|
||||
points.reset();
|
||||
}
|
||||
}
|
||||
|
||||
buttons.forEach(button => {
|
||||
button.addEventListener("click", () => {
|
||||
let result = playRound(button.value, getComputerChoice());
|
||||
resultDiv.textContent = `Result: ${result}`;
|
||||
});
|
||||
button.addEventListener("click", () => playGameRound(button.value));
|
||||
});
|
Loading…
Reference in New Issue