Rock paper scissors

index.html

<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>

main.tour

{
  "$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! "
    }
  ]
}

rock-paper-scissors.markdown

Rock paper scissors

A Pen by rafaelcastrocouto on CodePen.

License.

script.js

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);
}

style.css

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;
}