Max 5 points, announce winner

This commit is contained in:
NetMan 2024-01-09 19:13:16 +01:00
parent b83b1ed631
commit 8f9d6d689f
2 changed files with 22 additions and 9 deletions

View File

@ -16,15 +16,17 @@
font-size: xx-large; font-size: xx-large;
cursor: pointer; cursor: pointer;
} }
#result {
font-family: Arial, Helvetica, sans-serif;
font-size: larger;
}
</style> </style>
</head> </head>
<body> <body>
<button class="choose" value="rock">Rock</button> <button class="choose" value="rock">Rock</button>
<button class="choose" value="paper">Paper</button> <button class="choose" value="paper">Paper</button>
<button class="choose" value="scissors">Scissors</button> <button class="choose" value="scissors">Scissors</button>
<div id="result"> <div id="result"></div>
Result:
</div>
<script src="index.js"></script> <script src="index.js"></script>
</body> </body>
</html> </html>

View File

@ -6,11 +6,13 @@ function getComputerChoice() {
return choices[Math.floor(Math.random() * 3)]; 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 playerChoiceCapital = playerChoice.slice(0,1).toUpperCase() + playerChoice.slice(1,playerChoice.length)
let computerChoiceCapital = computerChoice.slice(0,1).toUpperCase() + computerChoice.slice(1,computerChoice.length) let computerChoiceCapital = computerChoice.slice(0,1).toUpperCase() + computerChoice.slice(1,computerChoice.length)
if (playerChoice == computerChoice) { if (playerChoice == computerChoice) {
points.playerAddPoints();
points.computerAddPoints();
return `It's a tie! ${playerChoiceCapital} vs ${computerChoiceCapital}.`; return `It's a tie! ${playerChoiceCapital} vs ${computerChoiceCapital}.`;
} else if ((playerChoice == "rock" && computerChoice == "paper") } else if ((playerChoice == "rock" && computerChoice == "paper")
|| (playerChoice == "paper" && computerChoice == "scissors") || (playerChoice == "paper" && computerChoice == "scissors")
@ -36,7 +38,7 @@ const points = (() => {
} }
function reset() { function reset() {
player = 0; player = 0;
computer = 0 computer = 0;
} }
return {get player() {return player}, return {get player() {return player},
get computer() {return computer}, get computer() {return computer},
@ -46,9 +48,18 @@ const points = (() => {
const buttons = document.querySelectorAll("button.choose"); const buttons = document.querySelectorAll("button.choose");
const resultDiv = document.querySelector("div#result"); const resultDiv = document.querySelector("div#result");
buttons.forEach(button => { function playGameRound(value) {
button.addEventListener("click", () => { let result = playRoundResult(value, getComputerChoice());
let result = playRound(button.value, getComputerChoice());
resultDiv.textContent = `Result: ${result}`; 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", () => playGameRound(button.value));
}); });