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">
<title>Rock Paper Scissors</title>
<style>
button {
margin: 50px;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
.choose {
margin: 20px;
padding: 20px;
border: 2px solid #000;
border-radius: 35px;
@ -18,13 +15,18 @@
font-weight: 700;
font-size: xx-large;
cursor: pointer;
transform: translate(-50%, -50%);
display: block;
}
#result {
font-family: Arial, Helvetica, sans-serif;
font-size: larger;
}
</style>
</head>
<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>
</body>
</html>

56
index.js
View File

@ -1,10 +1,12 @@
'use strict';
const choices = ["rock", "paper", "scissors"];
function getComputerChoice() {
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 computerChoiceCapital = computerChoice.slice(0,1).toUpperCase() + computerChoice.slice(1,computerChoice.length)
@ -36,52 +38,28 @@ const points = (() => {
}
function reset() {
player = 0;
computer = 0
computer = 0;
}
return {get player() {return player},
get computer() {return computer},
playerAddPoints, computerAddPoints, reset};
})()
function game(clickEvent) {
clickEvent.setAttribute('onclick', ' ');
points.reset();
const buttons = document.querySelectorAll("button.choose");
const resultDiv = document.querySelector("div#result");
for (let i = 0; i < 5; i++) {
let correctOption = false
let playerChoice;
function playGameRound(value) {
let result = playRoundResult(value, getComputerChoice());
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 > 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();
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();
}
}
// game();
buttons.forEach(button => {
button.addEventListener("click", () => playGameRound(button.value));
});