10h30/odin-rock-paper-scissor
1
0
Fork 0
mirror of https://github.com/10h30/odin-rock-paper-scissor.git synced 2026-07-11 10:46:02 +09:00
Code Issues Packages Projects Releases Wiki Activity

Add simple UI

Browse Source
This commit is contained in:
Thuan Bui
2025-02-23 09:25:36 +09:00
parent bed1a2dfae
commit 560e6fe232
2 changed files with 82 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+2 -1
View File
@@ -6,6 +6,7 @@
<title>Document</title>
</head>
<body>
<script src="script.js"></script>>
<script src="script.js"></script>
<div class="content"></div>
</body>
</html>
script.js
+52 -20
View File
@@ -18,27 +18,50 @@ function getHumanChoice() {
return input;
}
const content = document.querySelector("div")
const finalResult = document.createElement("p")
const rockButton = document.createElement("button")
rockButton.textContent = "Rock";
const paperButton = document.createElement("button")
paperButton.textContent = "Paper";
const scissorButton = document.createElement("button")
scissorButton.textContent = "Scissor";
content.appendChild(rockButton)
content.appendChild(paperButton)
content.appendChild(scissorButton)
content.appendChild(finalResult)
rockButton.addEventListener("click", playRound);
paperButton.addEventListener("click", playRound);
scissorButton.addEventListener("click", playRound);
let humanScore = 0;
let computerScore = 0;
function playRound() {
const humanChoice = getHumanChoice();
const humanChoice = this.textContent;
const computerChoice = getComputerChoice();
console.log(humanChoice.toUpperCase());
console.log(computerChoice.toUpperCase());
const resultPanel = document.createElement("div")
const result = document.createElement("p")
resultPanel.appendChild(result);
content.appendChild(resultPanel)
if (humanChoice.toUpperCase() === computerChoice.toUpperCase()) {
result.textContent = "Draw";
}
else {
switch (humanChoice.toUpperCase()) {
case "ROCK" :
switch (computerChoice.toUpperCase()) {
case "ROCK" :
console.log("Draw");
break;
case "PAPER" :
console.log("You lose! Paper beats Rock");
computerScore++;
result.textContent = "You lose! Paper beats Rock. Current score: Computer " + computerScore + " / Human " + humanScore;
break;
case "SCISSOR" :
console.log("You win! Rock beats Scissor");
humanScore++;
result.textContent = "You win! Rock beats Scissor. Current score: Computer " + computerScore + " / Human " + humanScore;
break;
}
break;
@@ -46,15 +69,12 @@ function playRound() {
case "PAPER" :
switch (computerChoice.toUpperCase()) {
case "ROCK" :
console.log("You win! Paper beats Rock");
humanScore++;
break;
case "PAPER" :
console.log("Draw");
result.textContent = "You win! Paper beats Rock. Current score: Computer " + computerScore + " / Human " + humanScore;
break;
case "SCISSOR" :
console.log("You lose! Scissor beats Paper");
computerScore++;
result.textContent = "You lose! Scissor beats Paper. Current score: Computer " + computerScore + " / Human " + humanScore;
break;
}
break;
@@ -62,40 +82,52 @@ function playRound() {
case "SCISSOR":
switch (computerChoice.toUpperCase()) {
case "ROCK" :
console.log("You lose! Rock beats Scissor");
computerScore++;
result.textContent = "You lose! Rock beats Scissor. Current score: Computer " + computerScore + " / Human " + humanScore;
break;
case "PAPER" :
console.log("You win! Scissor beats Paper");
humanScore++;
break;
case "SCISSOR" :
console.log("Draw");
result.textContent = "You win! Scissor beats Paper. Current score: Computer " + computerScore + " / Human " + humanScore;
break;
}
break;
}
}
if (humanScore === 5) {
finalResult.textContent = "Congratulation. You Win!";
humanScore = 0;
computerScore = 0;
}
if (computerScore === 5) {
finalResult.textContent = "Sorry. You Lose!";
humanScore = 0;
computerScore = 0;
}
}
function playGames() {
//playRound(humanSelection, computerSelection);
const resultPanel = document.createElement("div")
const result = document.createElement("p")
for (let i = 0; i < 5; i++) {
playRound();
}
if (humanScore > computerScore) {
console.log("You Win!");
result.textContent = "You Win";
}
else if (humanScore == computerScore) {
console.log("Draw");
result.textContent = "Draw";
}
else {
console.log("You Lose");
result.textContent = "You Lose";
}
console.log("The score is: " + humanScore + ":" + computerScore)
}
playGames();
//playGames();