Game - part 1

by cgreinhold

HTML

<input id="1" type="checkbox" />
<label for="1"></label>
<input id="2" type="checkbox" />
<label for="2"></label>
<input id="3" type="checkbox" />
<label for="3"></label>
<input id="4" type="checkbox" />
<label for="4"></label>
<input id="5" type="checkbox" />
<label for="5"></label>
<footer>
  frutas selecionadas
</footer>
<div class="final">
  Bom trabalho
</div>

CSS

body {
  color: white;
  text-align: center;
  user-select: none;
  font-weight: bold;
  font-family: Arial;
  overflow: hidden;
}

label[for="1"]:before {
  content: '🍎';
}

label[for="2"]:before {
  content: '🍇';
}

label[for="3"]:before {
  content: '🥝';
}

label[for="4"]:before {
  content: '🥥';
}

label[for="5"]:before {
  content: '🍍';
}

input:checked + label:before {
  content: '🥙';
}

input:checked + label {
  pointer-events: none;
}

input {
  position: absolute;
  left: -100vw;
  zoom: 3;
}

input {
  counter-increment: frutas;
}
    
input:checked {
  counter-increment: frutas frutas-selecionadas;
}

footer {
  background-color: #f03a17;
  color: white;
  height: 1.5rem;
  width: 100vw;
  position: absolute;
  bottom: 0;
}

footer:before {
  content: counter(frutas-selecionadas) '/' counter(frutas) ' ';
}

label {
  animation: move 5s infinite linear alternate;
  display: inline-block;
}

@keyframes move {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(calc(30vh)) translateX(50px);
  }
  40% {
    transform: translateY(calc(80vh - 3rem)) translateX(-150px);
  }
  60% {
    transform: translateY(calc(50vh - 3rem)) translateX(-100px);
  }
  80% {
    transform: translateY(calc(85vh - 3rem)) translateX(100px);
  }
  100% {
    transform: translateY(calc(100vh - 3rem));
  }
}

label:nth-of-type(even) {
  animation-direction: alternate-reverse;
  animation-duration: 3.5;
  transform: translateY(calc(100vh - 3rem));
}

label:nth-of-type(n + 3) {
  animation-delay: 1s;
}

label:nth-of-type(-n + 3) {
  animation-duration: 7s;
}

input:checked + label {
  animation-play-state: paused;
}

.final {
  width: 100%;
  height: calc(100vh - 3rem);
  position: absolute;
  align-items: center;
  justify-content: center;
  color: black;
  font-size: xx-large;
  display: none;
}

input:checked
  ~ input:checked
  ~ input:checked
  ~ input:checked
  ~ input:checked
  ~ .final {
  display: flex;
}