Max 5 points, announce winner
This commit is contained in:
		
							parent
							
								
									b83b1ed631
								
							
						
					
					
						commit
						8f9d6d689f
					
				|  | @ -16,15 +16,17 @@ | ||||||
|             font-size: xx-large; |             font-size: xx-large; | ||||||
|             cursor: pointer; |             cursor: pointer; | ||||||
|         } |         } | ||||||
|  |         #result { | ||||||
|  |             font-family: Arial, Helvetica, sans-serif; | ||||||
|  |             font-size: larger; | ||||||
|  |         } | ||||||
|     </style> |     </style> | ||||||
| </head> | </head> | ||||||
| <body> | <body> | ||||||
|     <button class="choose" value="rock">Rock</button> |     <button class="choose" value="rock">Rock</button> | ||||||
|     <button class="choose" value="paper">Paper</button> |     <button class="choose" value="paper">Paper</button> | ||||||
|     <button class="choose" value="scissors">Scissors</button> |     <button class="choose" value="scissors">Scissors</button> | ||||||
|     <div id="result"> |     <div id="result"></div> | ||||||
|         Result: |  | ||||||
|     </div> |  | ||||||
|     <script src="index.js"></script> |     <script src="index.js"></script> | ||||||
| </body> | </body> | ||||||
| </html> | </html> | ||||||
							
								
								
									
										23
									
								
								index.js
								
								
								
								
							
							
						
						
									
										23
									
								
								index.js
								
								
								
								
							|  | @ -6,11 +6,13 @@ function getComputerChoice() { | ||||||
|     return choices[Math.floor(Math.random() * 3)]; |     return choices[Math.floor(Math.random() * 3)]; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| function playRound(playerChoice, computerChoice) { | function playRoundResult(playerChoice, computerChoice) { | ||||||
|     let playerChoiceCapital = playerChoice.slice(0,1).toUpperCase() + playerChoice.slice(1,playerChoice.length) |     let playerChoiceCapital = playerChoice.slice(0,1).toUpperCase() + playerChoice.slice(1,playerChoice.length) | ||||||
|     let computerChoiceCapital = computerChoice.slice(0,1).toUpperCase() + computerChoice.slice(1,computerChoice.length) |     let computerChoiceCapital = computerChoice.slice(0,1).toUpperCase() + computerChoice.slice(1,computerChoice.length) | ||||||
| 
 | 
 | ||||||
|     if (playerChoice == computerChoice) { |     if (playerChoice == computerChoice) { | ||||||
|  |         points.playerAddPoints(); | ||||||
|  |         points.computerAddPoints(); | ||||||
|         return `It's a tie! ${playerChoiceCapital} vs ${computerChoiceCapital}.`; |         return `It's a tie! ${playerChoiceCapital} vs ${computerChoiceCapital}.`; | ||||||
|     } else if ((playerChoice == "rock" && computerChoice == "paper") |     } else if ((playerChoice == "rock" && computerChoice == "paper") | ||||||
|             || (playerChoice == "paper" && computerChoice == "scissors") |             || (playerChoice == "paper" && computerChoice == "scissors") | ||||||
|  | @ -36,7 +38,7 @@ const points = (() => { | ||||||
|     } |     } | ||||||
|     function reset() { |     function reset() { | ||||||
|         player = 0; |         player = 0; | ||||||
|         computer = 0 |         computer = 0; | ||||||
|     } |     } | ||||||
|     return {get player() {return player}, |     return {get player() {return player}, | ||||||
|             get computer() {return computer}, |             get computer() {return computer}, | ||||||
|  | @ -46,9 +48,18 @@ const points = (() => { | ||||||
| const buttons = document.querySelectorAll("button.choose"); | const buttons = document.querySelectorAll("button.choose"); | ||||||
| const resultDiv = document.querySelector("div#result"); | const resultDiv = document.querySelector("div#result"); | ||||||
| 
 | 
 | ||||||
|  | function playGameRound(value) { | ||||||
|  |     let result = playRoundResult(value, getComputerChoice()); | ||||||
|  |     resultDiv.textContent = `Result: ${result}`; | ||||||
|  |     let point = []; | ||||||
|  | 
 | ||||||
|  |     if ((points.player >= 5 && (point = ["Player",  points.player, "Computer", points.computer])) | ||||||
|  |     ||(points.computer >= 5 && (point = ["Computer",points.computer, "Player", points.player]))) { | ||||||
|  |         resultDiv.innerText += `\r\n${point[0]} won against ${point[2]} ${point[1]}:${point[3]}`; | ||||||
|  |         points.reset(); | ||||||
|  |     } | ||||||
|  | } | ||||||
|  | 
 | ||||||
| buttons.forEach(button => { | buttons.forEach(button => { | ||||||
|     button.addEventListener("click", () => { |     button.addEventListener("click", () => playGameRound(button.value)); | ||||||
|         let result = playRound(button.value, getComputerChoice()); |  | ||||||
|         resultDiv.textContent = `Result: ${result}`; |  | ||||||
|     }); |  | ||||||
| }); | }); | ||||||
		Loading…
	
		Reference in New Issue