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

create UI

Browse Source
This commit is contained in:
Synobbol 2023-01-30 14:59:19 +01:00
parent bd24adc2d7
commit 1c07bbbab4
2 changed files with 84 additions and 44 deletions
Show Stats Download Patch File Download Diff File 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>

122
script.js
View File

@ -39,62 +39,100 @@ 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;
playerSelection = playerSelection.toLowerCase();
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"){
result = "You Lose! Paper beats Rock"; result.textContent = "You Lose! Paper beats Rock";
console.log(playerSelection, computerSelection, result); state = false;
return false;
} }
else if(playerSelection === "paper" && computerSelection == "rock"){ else if(playerSelection === "paper" && computerSelection == "rock"){
result = "You Win! Paper beats Rock"; result.textContent = "You Win! Paper beats Rock";
console.log(playerSelection, computerSelection, result); state = true;
return true;
} }
else if(playerSelection === "paper" && computerSelection == "scissors"){ else if(playerSelection === "paper" && computerSelection == "scissors"){
result = "You Lose! Scissors beats Paper"; result.textContent = "You Lose! Scissors beats Paper";
console.log(playerSelection, computerSelection, result); state = false;
return false;
} }
else if(playerSelection === "scissors" && computerSelection == "paper"){ else if(playerSelection === "scissors" && computerSelection == "paper"){
result = "You Win! Scissors beats Paper"; result.textContent = "You Win! Scissors beats Paper";
console.log(playerSelection, computerSelection, result); state = true;
return true;
} }
else if(playerSelection === "rock" && computerSelection == "scissors"){ else if(playerSelection === "rock" && computerSelection == "scissors"){
result = "You Win! Rock beats Scissors"; result.textContent = "You Win! Rock beats Scissors";
console.log(playerSelection, computerSelection, result); state = true;
return true;
} }
else if(playerSelection === "scissors" && computerSelection == "rock"){ else if(playerSelection === "scissors" && computerSelection == "rock"){
result = "You Lose! Rock beats Scissors"; result.textContent = "You Lose! Rock beats Scissors";
console.log(playerSelection, computerSelection, result); state = false;
return false;
} }
else{ else{
console.log(playerSelection, computerSelection,result); result.textContent = "It's a Tie!";
return null; state = null;
} }
}
// console.log(playRound("Paper", getComputerChoice()));
function game(){ container.appendChild(result);
return state;
}
function game(player1, player2){
let player = 0; let player = 0;
let computer = 0; let computer = 0;
let win = "You win"; const container = document.querySelector("#result");
let score = document.createElement("p");
let result = document.createElement("p");
result.textContent = "You win";
while (player || computer < 5) { while (player < 5 && computer < 5) {
let party = playRound(prompt("Rock, Paper or Scissors?"), getComputerChoice()); let party = playRound(player1, player2);
score.textContent = `Player score: ${player}/5 Computer score: ${computer}/5`;
container.appendChild(score);
if(party === true){ if(party === true){
player +=1; player +=1;
@ -102,17 +140,15 @@ function game(){
else if(party === false){ else if(party === false){
computer +=1; computer +=1;
} }
console.log(`Player score: ${player}/5, Computer score: ${computer}/5`);
if(player === 5){ if(player === 5){
return win = "You win!"; result.textContent = "You win!";
container.appendChild(result);
} }
else if(computer === 5){ else if(computer === 5){
return win = "Computer wins!"; result.textContent = "Computer wins!";
container.appendChild(result);
} }
} }
} }
console.log(game());