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

Compare commits

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

3 Commits
fa0adb794a ... 8f9d6d689f

Author SHA1 Message Date
NetMan 8f9d6d689f Max 5 points, announce winner 2024-01-09 19:13:16 +01:00
NetMan b83b1ed631 Removed points in case of Tie 2024-01-09 18:59:37 +01:00
NetMan 807ce0487b Added basic DOM functionality 
Instead of prompt() and console now using DOM elements
 2024-01-09 18:53:33 +01:00
2 changed files with 27 additions and 47 deletions
Show Stats Expand all files Collapse all files

18
index.html
View File

@ -5,11 +5,8 @@
<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>
button { .choose {
margin: 50px; margin: 20px;
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;
@ -18,13 +15,18 @@
font-weight: 700; font-weight: 700;
font-size: xx-large; font-size: xx-large;
cursor: pointer; cursor: pointer;
transform: translate(-50%, -50%); }
display: block; #result {
font-family: Arial, Helvetica, sans-serif;
font-size: larger;
} }
</style> </style>
</head> </head>
<body> <body>
<button onclick="game(this)">Start<br>game</button> <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>
<script src="index.js"></script> <script src="index.js"></script>
</body> </body>
</html> </html>

56
index.js
View File

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