Created
October 16, 2024 16:23
-
-
Save Cema2019/388878b06ace847bc5edcb4ddb477f40 to your computer and use it in GitHub Desktop.
Rock, paper and scissor game
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body class='bg-light d-flex flex-column justify-content-center align-items-center min-vh-100'> | |
| <div class="container"> | |
| <h1 class='text-center text-decoration-underline text-uppercase fs-2 fs-md-1'>Rock, paper & Scissors game</h1> | |
| <h2 class='my-3 my-md-5 fs-4 fs-md-3 text-center'>Try your luck against the computer</h2> | |
| <div class="row justify-content-center g-3"> | |
| <div id='scissors' class='col-6 col-md-4 text-center'> | |
| <img src="https://img.freepik.com/free-vector/golden-scissors-isolated_1284-41795.jpg?w=740&t=st=1728665576~exp=1728666176~hmac=05c7fd587561a84c1ba556035be9f6ab61d33289be88db10d0a0eff8abb19652" | |
| alt="scissors" | |
| class="img-fluid border border-dark pulse rounded" | |
| style="width: 100%; max-width: 150px; height: auto; aspect-ratio: 1; object-fit: cover; cursor: pointer;"> | |
| </div> | |
| <div id='rock' class='col-6 col-md-4 text-center'> | |
| <img src="https://img.freepik.com/free-psd/rocks-stones-isolated_23-2151445123.jpg?t=st=1728664789~exp=1728668389~hmac=1adec94c29d62a4a55c19f03e011bd07eeeab9dd56b37d46c85c0b5cb96174b7&w=1050" | |
| alt="rock" | |
| class="img-fluid border border-dark pulse rounded" | |
| style="width: 100%; max-width: 150px; height: auto; aspect-ratio: 1; object-fit: cover; cursor: pointer;"> | |
| </div> | |
| <div id='paper' class='col-6 col-md-4 text-center'> | |
| <img src="https://img.freepik.com/premium-photo/piece-paper-with-white-sheet-that-says-word-it_1089669-23000.jpg?w=250" | |
| alt="paper" | |
| class="img-fluid border border-dark pulse rounded" | |
| style="width: 100%; max-width: 150px; height: auto; aspect-ratio: 1; object-fit: cover; cursor: pointer;"> | |
| </div> | |
| </div> | |
| <div class='my-3'> | |
| <p class="fs-5">You chose: <span id='playerChoice' class='text-success fw-bold ms-2 fs-4'></span></p> | |
| <p class="fs-5">The computer chose: <span id='pcChoice' class='text-primary fw-bold ms-2 fs-4'></span></p> | |
| <p class='text-center fw-bold fs-5'>Result: <span id='winner' class='ms-2 bg-info fst-italic fs-3 rounded'></span></p> | |
| <p id='counter' class='text-center'></p> | |
| </div> | |
| </div> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const icons = ['rock', 'paper', 'scissors']; | |
| const selectRandom = () => { | |
| const randomIndex = Math.floor(Math.random() * icons.length); | |
| return icons[randomIndex]; | |
| }; | |
| let count = 0; | |
| // Function to determine the winner | |
| const determineWinner = (playerChoice, pcChoice) => { | |
| if (playerChoice === pcChoice) return "It's a tie!"; | |
| let result = ( | |
| (playerChoice === 'rock' && pcChoice === 'scissors') || | |
| (playerChoice === 'scissors' && pcChoice === 'paper') || | |
| (playerChoice === 'paper' && pcChoice === 'rock') | |
| ) ? "You win!": "Computer wins!"; | |
| if (result === "You win!") count++; | |
| if (result === "Computer wins!") count = 0; | |
| return result; | |
| }; | |
| // Function to handle the game logic when the user clicks on an option | |
| const handlePlayerChoice = (playerChoice) => { | |
| const pcChoice = selectRandom(); | |
| document.getElementById('playerChoice').textContent = playerChoice; | |
| document.getElementById('pcChoice').textContent = pcChoice; | |
| document.getElementById('winner').textContent = determineWinner(playerChoice, pcChoice); | |
| document.getElementById('counter').textContent = `Wins: ${count}`; | |
| }; | |
| // Attach event listeners directly to the elements with id | |
| document.getElementById('rock').addEventListener('click', () => handlePlayerChoice ('rock')); | |
| document.getElementById('paper').addEventListener('click', () => handlePlayerChoice ('paper')); | |
| document.getElementById('scissors').addEventListener('click', () => handlePlayerChoice ('scissors')); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| .pulse { | |
| transition: transform 0.3s ease; | |
| } | |
| .pulse:hover { | |
| animation: pulse 1s infinite; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment