└── RockPaperScissors ├── style └── style.css ├── RPS.html └── script └── script.js /RockPaperScissors/style/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: Arial, sans-serif; 3 | text-align: center; 4 | background-color: #f0f0f0; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | #game{ 9 | margin: 50px auto; 10 | padding: 20px; 11 | border: 1px solid #ccc; 12 | background-color: #fff; 13 | width: 300px; 14 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); 15 | } 16 | 17 | button.choice{ 18 | margin: 10px; 19 | padding: 10px 20px; 20 | font-size: 16px; 21 | background-color: aqua; 22 | color: black; 23 | } 24 | 25 | #result { 26 | font-size: 20px; 27 | margin: 20px 0; 28 | } 29 | #score{ 30 | font-size: 18px; 31 | margin: 10px; 32 | } -------------------------------------------------------------------------------- /RockPaperScissors/RPS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ROCK, PAPER, SCISSORS 7 | 8 | 9 | 10 |

11 |

Rock, Paper, Scissors

12 |

13 | 14 | 15 | 16 |

17 |

18 |

Player: 0 Computer:0

19 | 20 |

21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /RockPaperScissors/script/script.js: -------------------------------------------------------------------------------- 1 | let Hchoices = document.querySelectorAll('.choice'); 2 | let userChoice ; 3 | let Human = document.getElementById('human'); 4 | let Computer = document.getElementById('computer'); 5 | let HumanScore = +Human.textContent; 6 | let ComputerScore = +Computer.textContent; 7 | 8 | 9 | for (let i = 0; i < Hchoices.length; i++) { 10 | Hchoices[i].addEventListener('click', function () { 11 | userChoice = Hchoices[i].id; 12 | let ComputerChoices = getComputerChoices(); 13 | console.log(userChoice,ComputerChoices); 14 | let winner = checkWinner(userChoice,ComputerChoices); 15 | 16 | }); 17 | } 18 | 19 | function getComputerChoices() { 20 | let ComputerChoices = ['rock', 'paper', 'scissor']; 21 | let selectedIndex = parseInt(Math.random() * 3); 22 | return ComputerChoices[selectedIndex]; 23 | } 24 | 25 | function checkWinner(player, computer) { 26 | if (player === computer) { 27 | return 'draw'; 28 | } else if ( 29 | (player === 'rock' && computer === 'scissor') || 30 | (player === 'paper' && computer === 'rock') || 31 | (player === 'scissor' && computer === 'paper') 32 | ) { 33 | HumanScore = HumanScore + 1; 34 | Human.textContent = HumanScore; 35 | 36 | } else { 37 | ComputerScore=ComputerScore + 1; 38 | Computer.textContent =ComputerScore; 39 | } 40 | } 41 | 42 | function toggleBackground() { 43 | let body = document.body; 44 | let currentColor = body.style.backgroundColor; 45 | if (currentColor === "black") { 46 | body.style.backgroundColor = "white"; 47 | } else { 48 | body.style.backgroundColor = "black"; 49 | } 50 | } 51 | 52 | let mode = document.getElementById('mode'); 53 | mode.addEventListener('click', toggleBackground); 54 | 55 | --------------------------------------------------------------------------------