A Pen by Brad Traversy on CodePen.
Created
February 15, 2021 15:49
-
-
Save badasscodr/1dd7030ca45c7074cb9132debef99fdc 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