A Pen by Pappu Kumar Pashi on CodePen.
Created
August 24, 2020 21:24
-
-
Save PappuKP/1525a9e0662efb6fcf4d1e98a5a78462 to your computer and use it in GitHub Desktop.
Rock Paper Scissors
This file contains 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
<div class="container"> | |
<header class="header"> | |
<h1>Rock Paper Scissors</h1> | |
<button id="restart" class="restart-btn">Restart Game</button> | |
<div id="score" class="score"> | |
<p>Player: 0</p> | |
<p>Computer: 0</p> | |
</div> | |
</header> | |
<h2>Make Your Selection</h2> | |
<div class="choices"> | |
<i id="rock" class="choice fas fa-hand-rock fa-10x"></i> | |
<i id="paper" class="choice fas fa-hand-paper fa-10x"></i> | |
<i id="scissors" class="choice fas fa-hand-scissors fa-10x"></i> | |
</div> | |
</div> | |
<!-- Modal --> | |
<div class="modal"> | |
<div id="result" class="modal-content"></div> | |
</div> |
This file contains 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 choices = document.querySelectorAll('.choice'); | |
const score = document.getElementById('score'); | |
const result = document.getElementById('result'); | |
const restart = document.getElementById('restart'); | |
const modal = document.querySelector('.modal'); | |
const scoreboard = { | |
player: 0, | |
computer: 0 | |
}; | |
// Play game | |
function play(e) { | |
restart.style.display = 'inline-block'; | |
const playerChoice = e.target.id; | |
const computerChoice = getComputerChoice(); | |
const winner = getWinner(playerChoice, computerChoice); | |
showWinner(winner, computerChoice); | |
} | |
// Get computers choice | |
function getComputerChoice() { | |
const rand = Math.random(); | |
if (rand < 0.34) { | |
return 'rock'; | |
} else if (rand <= 0.67) { | |
return 'paper'; | |
} else { | |
return 'scissors'; | |
} | |
} | |
// Get game winner | |
function getWinner(p, c) { | |
if (p === c) { | |
return 'draw'; | |
} else if (p === 'rock') { | |
if (c === 'paper') { | |
return 'computer'; | |
} else { | |
return 'player'; | |
} | |
} else if (p === 'paper') { | |
if (c === 'scissors') { | |
return 'computer'; | |
} else { | |
return 'player'; | |
} | |
} else if (p === 'scissors') { | |
if (c === 'rock') { | |
return 'computer'; | |
} else { | |
return 'player'; | |
} | |
} | |
} | |
function showWinner(winner, computerChoice) { | |
if (winner === 'player') { | |
// Inc player score | |
scoreboard.player++; | |
// Show modal result | |
result.innerHTML = ` | |
<h1 class="text-win">You Win</h1> | |
<i class="fas fa-hand-${computerChoice} fa-10x"></i> | |
<p>Computer Chose <strong>${computerChoice.charAt(0).toUpperCase() + | |
computerChoice.slice(1)}</strong></p> | |
`; | |
} else if (winner === 'computer') { | |
// Inc computer score | |
scoreboard.computer++; | |
// Show modal result | |
result.innerHTML = ` | |
<h1 class="text-lose">You Lose</h1> | |
<i class="fas fa-hand-${computerChoice} fa-10x"></i> | |
<p>Computer Chose <strong>${computerChoice.charAt(0).toUpperCase() + | |
computerChoice.slice(1)}</strong></p> | |
`; | |
} else { | |
result.innerHTML = ` | |
<h1>It's A Draw</h1> | |
<i class="fas fa-hand-${computerChoice} fa-10x"></i> | |
<p>Computer Chose <strong>${computerChoice.charAt(0).toUpperCase() + | |
computerChoice.slice(1)}</strong></p> | |
`; | |
} | |
// Show score | |
score.innerHTML = ` | |
<p>Player: ${scoreboard.player}</p> | |
<p>Computer: ${scoreboard.computer}</p> | |
`; | |
modal.style.display = 'block'; | |
} | |
// Restart game | |
function restartGame() { | |
scoreboard.player = 0; | |
scoreboard.computer = 0; | |
score.innerHTML = ` | |
<p>Player: 0</p> | |
<p>Computer: 0</p> | |
`; | |
} | |
// Clear modal | |
function clearModal(e) { | |
if (e.target == modal) { | |
modal.style.display = 'none'; | |
} | |
} | |
// Event listeners | |
choices.forEach(choice => choice.addEventListener('click', play)); | |
window.addEventListener('click', clearModal); | |
restart.addEventListener('click', restartGame); |
This file contains 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
<script src="https://kit.fontawesome.com/3da1a747b2.js"></script> |
This file contains 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
@import url('https://fonts.googleapis.com/css?family=Roboto'); | |
:root { | |
--primary-color: #003699; | |
--dark-color: #333333; | |
--light-color: #f4f4f4; | |
--lose-color: #dc3545; | |
--win-color: #28a745; | |
--modal-duration: 1s; | |
} | |
* { | |
box-sizing: border-box; | |
padding: 0; | |
margin: 0; | |
} | |
body { | |
font-family: 'Roboto', sans-serif; | |
line-height: 1.6; | |
background: #fff; | |
color: #333; | |
} | |
.container { | |
max-width: 1100px; | |
margin: auto; | |
overflow: hidden; | |
padding: 0 2rem; | |
text-align: center; | |
} | |
.restart-btn { | |
display: none; | |
background: var(--light-color); | |
color: #333; | |
padding: 0.4rem 1.3rem; | |
font-size: 1rem; | |
cursor: pointer; | |
outline: none; | |
border: none; | |
margin-bottom: 1rem; | |
} | |
.restart-btn:hover { | |
background: var(--primary-color); | |
color: #fff; | |
} | |
.header { | |
text-align: center; | |
margin: 1rem 0; | |
} | |
.header h1 { | |
margin-bottom: 1rem; | |
} | |
.score { | |
display: grid; | |
grid-template-columns: repeat(2, 1fr); | |
font-size: 1.2rem; | |
color: #fff; | |
} | |
.score p:first-child { | |
background: var(--primary-color); | |
} | |
.score p:last-child { | |
background: var(--dark-color); | |
} | |
.choices { | |
display: grid; | |
grid-template-columns: repeat(3, 1fr); | |
grid-gap: 2rem; | |
margin-top: 3rem; | |
text-align: center; | |
} | |
.choice { | |
cursor: pointer; | |
} | |
.choice:hover { | |
color: var(--primary-color); | |
} | |
.text-win { | |
color: var(--win-color); | |
} | |
.text-lose { | |
color: var(--lose-color); | |
} | |
.modal { | |
display: none; | |
position: fixed; | |
z-index: 1; | |
left: 0; | |
top: 0; | |
height: 100%; | |
width: 100%; | |
overflow: auto; | |
background: rgba(0, 0, 0, 0.5); | |
} | |
.modal-content { | |
background: #fff; | |
text-align: center; | |
margin: 10% auto; | |
width: 350px; | |
border-radius: 10px; | |
padding: 3rem; | |
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17); | |
animation-name: modalopen; | |
animation-duration: var(--modal-duration); | |
} | |
.modal-content h1 { | |
margin-bottom: 1rem; | |
} | |
.modal-content p { | |
font-size: 1.2rem; | |
margin-top: 1rem; | |
} | |
@keyframes modalopen { | |
from { | |
opacity: 0; | |
} | |
to { | |
opacity: 1; | |
} | |
} | |
@media (max-width: 700px) { | |
.choice { | |
font-size: 110px; | |
} | |
} | |
@media (max-width: 500px) { | |
.choice { | |
font-size: 80px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment