10h30/odin-rock-paper-scissor
1
0
Fork 0
mirror of https://github.com/10h30/odin-rock-paper-scissor.git synced 2026-07-11 18:56:01 +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> <title>Document</title>
</head> </head>
<body> <body>
<script src="script.js"></script>> <script src="script.js"></script>
<div class="content"></div>
</body> </body>
</html> </html>
script.js
+52 -20
View File
@@ -18,27 +18,50 @@ function getHumanChoice() {
return input; 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 humanScore = 0;
let computerScore = 0; let computerScore = 0;
function playRound() { function playRound() {
const humanChoice = getHumanChoice(); const humanChoice = this.textContent;
const computerChoice = getComputerChoice(); 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()) { switch (humanChoice.toUpperCase()) {
case "ROCK" : case "ROCK" :
switch (computerChoice.toUpperCase()) { switch (computerChoice.toUpperCase()) {
case "ROCK" :
console.log("Draw");
break;
case "PAPER" : case "PAPER" :
console.log("You lose! Paper beats Rock");
computerScore++; computerScore++;
result.textContent = "You lose! Paper beats Rock. Current score: Computer " + computerScore + " / Human " + humanScore;
break; break;
case "SCISSOR" : case "SCISSOR" :
console.log("You win! Rock beats Scissor");
humanScore++; humanScore++;
result.textContent = "You win! Rock beats Scissor. Current score: Computer " + computerScore + " / Human " + humanScore;
break; break;
} }
break; break;
@@ -46,15 +69,12 @@ function playRound() {
case "PAPER" : case "PAPER" :
switch (computerChoice.toUpperCase()) { switch (computerChoice.toUpperCase()) {
case "ROCK" : case "ROCK" :
console.log("You win! Paper beats Rock");
humanScore++; humanScore++;
break; result.textContent = "You win! Paper beats Rock. Current score: Computer " + computerScore + " / Human " + humanScore;
case "PAPER" :
console.log("Draw");
break; break;
case "SCISSOR" : case "SCISSOR" :
console.log("You lose! Scissor beats Paper");
computerScore++; computerScore++;
result.textContent = "You lose! Scissor beats Paper. Current score: Computer " + computerScore + " / Human " + humanScore;
break; break;
} }
break; break;
@@ -62,40 +82,52 @@ function playRound() {
case "SCISSOR": case "SCISSOR":
switch (computerChoice.toUpperCase()) { switch (computerChoice.toUpperCase()) {
case "ROCK" : case "ROCK" :
console.log("You lose! Rock beats Scissor");
computerScore++; computerScore++;
result.textContent = "You lose! Rock beats Scissor. Current score: Computer " + computerScore + " / Human " + humanScore;
break; break;
case "PAPER" : case "PAPER" :
console.log("You win! Scissor beats Paper");
humanScore++; humanScore++;
break; result.textContent = "You win! Scissor beats Paper. Current score: Computer " + computerScore + " / Human " + humanScore;
case "SCISSOR" :
console.log("Draw");
break; break;
} }
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() { function playGames() {
//playRound(humanSelection, computerSelection); //playRound(humanSelection, computerSelection);
const resultPanel = document.createElement("div")
const result = document.createElement("p")
for (let i = 0; i < 5; i++) { for (let i = 0; i < 5; i++) {
playRound(); playRound();
} }
if (humanScore > computerScore) { if (humanScore > computerScore) {
console.log("You Win!"); console.log("You Win!");
result.textContent = "You Win";
} }
else if (humanScore == computerScore) { else if (humanScore == computerScore) {
console.log("Draw"); console.log("Draw");
result.textContent = "Draw";
} }
else { else {
console.log("You Lose"); console.log("You Lose");
result.textContent = "You Lose";
} }
console.log("The score is: " + humanScore + ":" + computerScore) console.log("The score is: " + humanScore + ":" + computerScore)
} }
playGames(); //playGames();