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>
<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>
<script src="script.js"></script>
</html>

122
script.js
View File

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