Skip to content

Instantly share code, notes, and snippets.

@lostintangent
Last active August 15, 2023 21:26
Show Gist options
  • Save lostintangent/9fe2a7792b025db004ff44b91fccdfbf to your computer and use it in GitHub Desktop.
Save lostintangent/9fe2a7792b025db004ff44b91fccdfbf to your computer and use it in GitHub Desktop.
Rock paper scissors
<span id="pc" class="hidden">✊</span>
<div id="player">
<span id="rock">✊</span>
<span id="paper">🤚</span>
<span id="scissor">✌️</span>
</div>
<p class="hidden">You Win</p>
{
"$schema": "https://aka.ms/codetour-schema",
"title": "Rock paper scissors",
"description": "Rock paper scissors",
"steps": [
{
"file": "index.html",
"line": 5,
"description": "These elements define the game \"hands\", using simple emoji characters. Try changing them and watch it take effect immediately!"
},
{
"file": "style.css",
"line": 6,
"description": "This is the game board's background color. Click on the color swatch to bring up a picker that you can easily explore."
},
{
"file": "script.js",
"line": 33,
"description": "This specifies the message that is displayed when you win the game. Change it and make sure you get the credit you so glaringly deserve! "
}
]
}
const spans = document.querySelectorAll('#player span');
const pc = document.querySelector('#pc');
const msg = document.querySelector('p');
var target;
const clicked = (event) => {
if (!document.body.classList.contains('noclick')) {
document.body.classList.add('noclick');
target = event.target;
for (var span of spans) {
if (target !== span) {
span.classList.add('hidden');
}
}
var random = parseInt(Math.random() * 3);
pc.textContent = spans[random].textContent;
pc.dataset.id = spans[random].id;
pc.classList.remove('hidden');
setTimeout(results, 250);
}
};
const results = function () {
if (target.id == pc.dataset.id) {
msg.textContent = 'Draw';
}
if (target.id == 'rock' && pc.dataset.id == 'paper' ||
target.id == 'paper' && pc.dataset.id == 'scissor'||
target.id == 'scissor' && pc.dataset.id == 'rock') {
msg.textContent = 'You lost :(';
}
if (target.id == 'rock' && pc.dataset.id == 'scissor' ||
target.id == 'paper' && pc.dataset.id == 'rock' ||
target.id == 'scissor' && pc.dataset.id == 'paper') {
msg.textContent = 'You Win!';
}
msg.classList.remove('hidden');
setTimeout(reset, 1500);
}
const reset = function () {
for (var span of spans) {
span.classList.remove('hidden');
}
msg.classList.add('hidden');
pc.classList.add('hidden');
setTimeout(function () {
document.body.classList.remove('noclick');
}, 500);
}
for (var span of spans) {
span.addEventListener('click', clicked);
}
body {
display: grid;
place-content: center;
height: 100vh;
font-size: 80px;
background: rgb(2, 53, 13);
overflow: hidden;
min-width: 300px;
user-select: none;
}
#player span {
cursor: pointer;
transition: opacity 0.5s;
opacity: 1;
color: white;
}
#player span.hidden {
opacity: 0;
}
#pc {
position: absolute;
top: 40px;
left: calc(50vw - 40px);
transform: rotate(180deg);
transition: top 0.5s;
}
#pc.hidden {
top: -120px;
}
p {
position: absolute;
width: 100vw;
text-align: center;
bottom: 40px;
margin: 0;
color: #fff;
transition: bottom 0.5s;
}
p.hidden {
bottom: -200px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment