Max 5 points, announce winner
This commit is contained in:
parent
b83b1ed631
commit
8f9d6d689f
|
@ -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>
|
23
index.js
23
index.js
|
@ -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));
|
||||||
});
|
});
|
Loading…
Reference in New Issue