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

56
index.js
View File

@ -1,12 +1,10 @@
'use strict';
const choices = ["rock", "paper", "scissors"]; const choices = ["rock", "paper", "scissors"];
function getComputerChoice() { function getComputerChoice() {
return choices[Math.floor(Math.random() * 3)]; 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 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)
@ -38,28 +36,52 @@ 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},
playerAddPoints, computerAddPoints, reset}; playerAddPoints, computerAddPoints, reset};
})() })()
const buttons = document.querySelectorAll("button.choose"); function game(clickEvent) {
const resultDiv = document.querySelector("div#result"); clickEvent.setAttribute('onclick', ' ');
points.reset();
function playGameRound(value) { for (let i = 0; i < 5; i++) {
let result = playRoundResult(value, getComputerChoice()); let correctOption = false
resultDiv.textContent = `Result: ${result}`; let playerChoice;
let point = [];
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");
}
}
let round = playRound(playerChoice, getComputerChoice());
let pointsString = `Points: ${points.player}:${points.computer}\n`;
alert(pointsString + round);
}
if ((points.player >= 5 && (point = ["Player", points.player, "Computer", points.computer])) let confirmString;
||(points.computer >= 5 && (point = ["Computer",points.computer, "Player", points.player]))) { if (points.player > points.computer) {
resultDiv.innerText += `\r\n${point[0]} won against ${point[2]} ${point[1]}:${point[3]}`; confirmString = `You won ${points.player}:${points.computer}`
points.reset(); } 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();
} }
} }
buttons.forEach(button => { // game();
button.addEventListener("click", () => playGameRound(button.value));
});