Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jogos: indo além do simples CSS!

Jogos: indo além do simples CSS!

Há quem pense que o CSS serve somente para aplicar estilos a determinados elementos, e realmente seu principal objetivo é esse! Mas alguém já pensou que seria possível capturar eventos, como um evento de clique por exemplo, e gerar algum tipo de animação com isso? E falar que com isso é possível criar um jogo? Neste talk explicarei como criar um jogo simples, sem uma linha de javascript, usando apenas HTML e CSS. Além de muitas de suas funcionalidades: pseudo-elementos, pseudo-classes, animations, entre outras.

Fernanda Bernardo

September 05, 2018
Tweet

More Decks by Fernanda Bernardo

Other Decks in Technology

Transcript

  1. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; }

    cursor: default; pointer; url('images/bob.png'), default;
  2. <div class=“container”> <main class=“game"> </main> </div> .container { position: relative;

    } .game { background: url('images/fundo.jpg'); position: absolute; }
  3. ?

  4. <main class=“game”> </main> <div class="inimigo"></div> .inimigo { } width: 20px;

    height: 20px; border-radius: 50%; background-color: white; position: absolute; left: 9%; animation-name: moving; animation-duration: 6s; @keyframes moving { 0% { top: 0; } 100% { top: calc(100% - 25px); } }
  5. <main class=“game”> </main> <div class="inimigo" id="i1"></div> <div class="inimigo" id="i2"></div> <div

    class="inimigo" id="i3"></div> <div class="inimigo" id="i4"></div> <div class="inimigo" id="i5"></div>
  6. #i1 { left: 9%; } #i2 { left: 23%; }

    #i3 { left: 37%; } #i4 { left: 65%; } #i5 { left: 90%; }
  7. #i1 { animation-duration: 6s; animation-iteration-count: 2;} #i2 { animation-duration: 5s;

    animation-iteration-count: 2;} #i3 { animation-duration: 7s; animation-iteration-count: 2;} #i4 { animation-duration: 12s; animation-iteration-count: 1;} #i5 { animation-duration: 10s; animation-iteration-count: 1;}
  8. E se tiver mais inimigos? #i6, #i7, #i8, #i9, #i10

    { animation-delay: 10s; background-color: red; }
  9. Como esconder? .inimigo { z-index: -1; animation-fill-mode: backwards; } @keyframes

    moving { 0% { z-index: -1; } 1% { z-index: 2; } 100% { z-index: 2; } }
  10. <main class=“game”> </main> [...] <div class=“oops"> Game Over :( </div>

    .oops { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: red; z-index: 10; }
  11. .oops { display: none; position: absolute; top: 0; left: 0;

    width: 100%; height: 100%; background-color: red; z-index: 10; } .inimigo:hover ~ .oops { display: block; }
  12. .oops { display: none; position: absolute; top: 0; left: 0;

    width: 100%; height: 100%; background-color: red; z-index: 10; } .inimigo:hover ~ .oops { display: block; } .oops:hover { display: block; }
  13. .coin { width: 20px; height: 20px; background-color: yellow; border-radius: 50%;

    position: absolute; left: 9%; -webkit-appearance: none; animation-name: moving; animation-duration: 6s; } .coin:checked { visibility: hidden; }
  14. <main class=“game”> <div class="inimigo" id="i1"></div> <div class="inimigo" id="i2"></div> <div class="inimigo"

    id="i3"></div> <input class="coin" type="checkbox" id=“c1"> </input> <div class="inimigo" id="i4"></div> <input class=“coin" type="checkbox" id=“c2"> </input> <div class="inimigo" id="i5"></div> </main>
  15. .venceu { display: none; position: absolute; width: 100%; height: 100%;

    background-color: green; top: 0; left: 0; } #c1:checked ~ #c2:checked ~ .venceu { display: block; }
  16. #c1:checked ~ #c2:checked ~ .venceu { display: block; } Mais

    moedas? ~ #c3:checked ~ #c4:checked ~ #c5:checked
  17. <main class=“game”> [...] <input class="coin" tabindex="-1" type="checkbox" id=“c1"></input> [...] <input

    class="coin” tabindex="-1" type="checkbox" id=“c2"></input> [...] </main>
  18. <main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...] </main> #pause-button

    + label { background-image: url('images/pause.png'); } #pause-button:checked + label { background-image: url('images/play.png'); }
  19. #pause-button ~ .inimigo, #pause-button ~ .coin { animation-play-state: running; }

    <main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...] </main> #pause-button:checked ~ .inimigo, #pause-button:checked ~ .coin { animation-play-state: paused; }
  20. <div class="container"> <input id="intro" type="checkbox"> <section class="intro"> <h2>Space Game</h2> <p>Jogo

    só com CSS, sem Javascript ;D</p> <label for=“intro">Play!</label> </section> [… .game] </div>
  21. div .container input #intro section .intro h2 p label for=intro

    .intro { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 15; } label[for=“intro"] { padding: 1em; font-size: 1.2em; background-color: purple; border-radius: 5px; margin: 1em 25%; display: inline-block; border: 1px solid purple; } #intro:checked ~ .intro { display: none; }
  22. <section class="rules"> <div> <h3>Regras</h3> <ul> <li>Mova seu personagem com o

    mouse</li> <li>Clique nas moedas para coletá-las</li> <li>Fuja dos tiros</li> </ul> <label for="rules">Entendi :)</label> </div> </section>