synobbol/Odin_RockPaperScissors
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: synobbol:97544cafe5b2779bf001652e3a684b494596c43f
Branches Tags
synobbol:main
..
compare: synobbol:main
Branches Tags
synobbol:main

3 Commits
97544cafe5 ... main

Author SHA1 Message Date
Synobbol
1c07bbbab4 create UI 2023-01-30 14:59:19 +01:00
Synobbol
bd24adc2d7 create rounds and keep score 2023-01-17 18:50:15 +01:00
Synobbol
65b89e8ac0 Add case-insensitivity 2023-01-17 16:40:12 +01:00
2 changed files with 101 additions and 19 deletions
Expand all files Collapse all files

6
index.html
View File

@ -8,7 +8,11 @@
</head> </head>
<body> <body>
<button data-word="rock" class="btn">Rock</button>
<button data-word="paper" class="btn">Paper</button>
<button data-word="scissors" class="btn">Scissors</button>
<div id="content"></div>
<div id="result"></div>
</body> </body>
<script src="script.js"></script> <script src="script.js"></script>
</html> </html>

110
script.js
View File

@ -39,38 +39,116 @@ function getComputerChoice(){
return computer; return computer;
} }
const btns = Array.from(document.querySelectorAll('.btn'));
btns.forEach(btn => btn.addEventListener('click', graphicGame));
let player = 0;
let computer = 0;
const container = document.querySelector("#content");
let score = document.createElement("p");
score.textContent = `Player score: ${player}/5 - Computer score: ${computer}/5`;
container.appendChild(score);
function graphicGame(player1, player2){
if (player < 5 && computer < 5) {
let party = playRound(player1, player2);
if(party === true){
player +=1;
}
else if(party === false){
computer +=1;
}
score.textContent = `Player score: ${player}/5 - Computer score: ${computer}/5`;
let resultScore = document.createElement("p");
if(player === 5){
resultScore.textContent = "You win!";
container.appendChild(resultScore);
btns.forEach(btn => btn.disabled = true);
}
else if(computer === 5){
resultScore.textContent = "Computer wins!";
container.appendChild(resultScore);
btns.forEach(btn => btn.disabled = true);
}
}
}
function playRound(playerSelection, computerSelection){ function playRound(playerSelection, computerSelection){
let result = "It's a Tie!"; let state = null;
computerSelection = getComputerChoice();
playerSelection = playerSelection.target.dataset.word;
//playerSelection = playerSelection.toLowerCase();
let result = document.createElement("p");
if (playerSelection === "rock" && computerSelection == "paper"){ if (playerSelection === "rock" && computerSelection == "paper"){
console.log(playerSelection, computerSelection); result.textContent = "You Lose! Paper beats Rock";
return result = "You Lose! Paper beats Rock"; state = false;
} }
else if(playerSelection === "paper" && computerSelection == "rock"){ else if(playerSelection === "paper" && computerSelection == "rock"){
console.log(playerSelection, computerSelection); result.textContent = "You Win! Paper beats Rock";
return result = "You Win! Paper beats Rock"; state = true;
} }
else if(playerSelection === "paper" && computerSelection == "scissors"){ else if(playerSelection === "paper" && computerSelection == "scissors"){
console.log(playerSelection, computerSelection); result.textContent = "You Lose! Scissors beats Paper";
return result = "You Lose! Scissors beats Paper"; state = false;
} }
else if(playerSelection === "scissors" && computerSelection == "paper"){ else if(playerSelection === "scissors" && computerSelection == "paper"){
console.log(playerSelection, computerSelection); result.textContent = "You Win! Scissors beats Paper";
return result = "You Win! Scissors beats Paper"; state = true;
} }
else if(playerSelection === "rock" && computerSelection == "scissors"){ else if(playerSelection === "rock" && computerSelection == "scissors"){
console.log(playerSelection, computerSelection); result.textContent = "You Win! Rock beats Scissors";
return result = "You Win! Rock beats Scissors"; state = true;
} }
else if(playerSelection === "scissors" && computerSelection == "rock"){ else if(playerSelection === "scissors" && computerSelection == "rock"){
console.log(playerSelection, computerSelection); result.textContent = "You Lose! Rock beats Scissors";
return result = "You Lose! Rock beats Scissors"; state = false;
} }
else{ else{
console.log(playerSelection, computerSelection); result.textContent = "It's a Tie!";
return result; state = null;
}
container.appendChild(result);
return state;
}
function game(player1, player2){
let player = 0;
let computer = 0;
const container = document.querySelector("#result");
let score = document.createElement("p");
let result = document.createElement("p");
result.textContent = "You win";
while (player < 5 && computer < 5) {
let party = playRound(player1, player2);
score.textContent = `Player score: ${player}/5 Computer score: ${computer}/5`;
container.appendChild(score);
if(party === true){
player +=1;
}
else if(party === false){
computer +=1;
}
if(player === 5){
result.textContent = "You win!";
container.appendChild(result);
}
else if(computer === 5){
result.textContent = "Computer wins!";
container.appendChild(result);
}
} }
} }
console.log(playRound("Paper", getComputerChoice()));