tod
/
odin-rps
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: tod:8f9d6d689ff080e50d46efe0351417d80f650534
Branches Tags
tod:main
..
compare: tod:fa0adb794a30bd340aca57e98e92cc9041ac1c18
Branches Tags
tod:main

No commits in common. "8f9d6d689ff080e50d46efe0351417d80f650534" and "fa0adb794a30bd340aca57e98e92cc9041ac1c18" have entirely different histories.
8f9d6d689f ... fa0adb794a

2 changed files with 47 additions and 27 deletions
Show Stats Expand all files Collapse all files

18
index.html
View File

@ -5,8 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissors</title>
<style>
.choose {
margin: 20px;
button {
margin: 50px;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
padding: 20px;
border: 2px solid #000;
border-radius: 35px;
@ -15,18 +18,13 @@
font-weight: 700;
font-size: xx-large;
cursor: pointer;
}
#result {
font-family: Arial, Helvetica, sans-serif;
font-size: larger;
transform: translate(-50%, -50%);
display: block;
}
</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"></div>
<button onclick="game(this)">Start<br>game</button>
<script src="index.js"></script>
</body>
</html>

58
index.js
View File

@ -1,12 +1,10 @@
'use strict';
const choices = ["rock", "paper", "scissors"];
function getComputerChoice() {
return choices[Math.floor(Math.random() * 3)];
}
function playRoundResult(playerChoice, computerChoice) {
function playRound(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)
@ -38,28 +36,52 @@ const points = (() => {
}
function reset() {
player = 0;
computer = 0;
computer = 0
}
return {get player() {return player},
get computer() {return computer},
playerAddPoints, computerAddPoints, reset};
})()
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]}`;
function game(clickEvent) {
clickEvent.setAttribute('onclick', ' ');
points.reset();
for (let i = 0; i < 5; i++) {
let correctOption = false
let playerChoice;
while (correctOption == false) {
playerChoice = prompt("What do you choose, 'rock', 'paper' or 'scissors'?");
if (playerChoice) {
choices.forEach(element => {
if (playerChoice.toLowerCase().trim() == element) {
correctOption = true
return;
}
})
} else if (confirm(`Do you wanna quit the game?`)) {
clickEvent.setAttribute('onclick', 'game(this)');
throw new Error("Exited the game on user's request");
}
}
buttons.forEach(button => {
button.addEventListener("click", () => playGameRound(button.value));
});
let round = playRound(playerChoice, getComputerChoice());
let pointsString = `Points: ${points.player}:${points.computer}\n`;
alert(pointsString + round);
}
let confirmString;
if (points.player > points.computer) {
confirmString = `You won ${points.player}:${points.computer}`
} else if (points.player == points.computer) {
confirmString = `That was a ${points.player}:${points.computer} tie`
} else if (points.player < points.computer) {
confirmString = `You lost ${points.player}:${points.computer}`
}
if (confirm(`${confirmString}, do you wanna restart the game?`)) {
game();
}
}
// game();