Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Jogos 3.0

543 views

Published on

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.

Published in: Technology
  • Be the first to comment

Jogos 3.0

  1. 1. Jogos: indo além do simples CSS Fernanda Bernardo
  2. 2. Fernanda Bernardo Engenheira de Software @Elo7 Mentora @Training Center @Help4Papers http://fernandabernardo.com.br @Feh_Bernardo
  3. 3. GIFS ❤❤❤
  4. 4. Repositório: http://bit.ly/2c2RsV1 Palestra: http://bit.ly/2cbNs6h
  5. 5. Repositório: http://bit.ly/2eLXyeP Palestra: http://bit.ly/2xDU5qq
  6. 6. Porque só CSS?
  7. 7. Divertido
  8. 8. Desafio
  9. 9. Aprendizado
  10. 10. We CSS
  11. 11. Como representar os elementos básicos do jogo?
  12. 12. cursor: url('images/bob.png'), default; .container { } <div class=“container”> </div> width: 100vw; height: 100vh;
  13. 13. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; }
  14. 14. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; } VW VH
  15. 15. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; } Viewport Width Viewport Height
  16. 16. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; } vmax vmin
  17. 17. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; } cursor: default;pointer;url('images/bob.png'), default;
  18. 18. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; box-sizing: border-box; }
  19. 19. vw, vh, vmin, vmax cursor box-sizing
  20. 20. vw, vh, vmin, vmax cursor box-sizing
  21. 21. <div class=“container”> </div>
  22. 22. <div class=“container”> <main class=“game"> </main> </div> .container { position: relative; } .game { background: url('images/fundo.jpg'); position: absolute; }
  23. 23. Porque um bob esponja no espaço?
  24. 24. ?
  25. 25. E os inimigos?
  26. 26. <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); } }
  27. 27. vw, vh, vmin, vmax cursor box-sizing animation
  28. 28. vw, vh, vmin, vmax cursor box-sizing animation
  29. 29. <main class=“game”> </main> <div class="inimigo"></div> <div class="inimigo"></div> <div class="inimigo"></div> <div class="inimigo"></div> <div class="inimigo"></div>
  30. 30. <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>
  31. 31. #i1 { left: 9%; } #i2 { left: 23%; } #i3 { left: 37%; } #i4 { left: 65%; } #i5 { left: 90%; }
  32. 32. E como deixar os inimigos mais dinâmicos?
  33. 33. #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;}
  34. 34. E se tiver mais inimigos? #i6, #i7, #i8, #i9, #i10 { animation-delay: 10s; background-color: red; }
  35. 35. Como esconder? .inimigo { z-index: -1; animation-fill-mode: backwards; }
  36. 36. Como esconder? .inimigo { z-index: -1; animation-fill-mode: backwards; } @keyframes moving { 0% { z-index: -1; } 1% { z-index: 2; } 100% { z-index: 2; } }
  37. 37. vw, vh, vmin, vmax cursor box-sizing animation z-index
  38. 38. vw, vh, vmin, vmax cursor box-sizing animation z-index
  39. 39. <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; }
  40. 40. .oops { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: red; z-index: 10; } .inimigo:hover ~ .oops { display: block; }
  41. 41. .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; }
  42. 42. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores
  43. 43. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores
  44. 44. O que vamos conquistar?
  45. 45. <main class=“game”> </main> <div class="inimigo" id="i1"></div> [...] <div class="inimigo" id="i5"></div>
  46. 46. <main class=“game”> </main> <div class="inimigo" id="i1"></div> [...] <div class="inimigo" id="i5"></div> <input class=“coin” type="checkbox" id="c1"> </input>
  47. 47. .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; }
  48. 48. <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>
  49. 49. Como contar os pontos?
  50. 50. .game { counter-reset: pontos; } .game:after { content: counter(pontos) ‘/2'; } .coin:checked { counter-increment: pontos; }
  51. 51. .game { counter-reset: pontos; } .game:after { content: counter(pontos) ‘/2'; } .coin:checked { counter-increment: pontos; }
  52. 52. .game { counter-reset: blah; } .game:after { content: counter(blah) ‘/2'; } .coin:checked { counter-increment: blah; }
  53. 53. .coin:checked { counter-increment: pontos; }
  54. 54. .coin:checked { counter-increment: pontos; visibility: hidden; } display: none; ???Visibility hidden X Display none
  55. 55. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter
  56. 56. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter
  57. 57. Como vence?
  58. 58. <main class=“game”> [...] <div class="venceu"> Venceu! :) </div> </main>
  59. 59. .venceu { display: none; position: absolute; width: 100%; height: 100%; background-color: green; top: 0; left: 0; } #c1:checked ~ #c2:checked ~ .venceu { display: block; }
  60. 60. #c1:checked ~ #c2:checked ~ .venceu { display: block; } Mais moedas? ~ #c3:checked ~ #c4:checked ~ #c5:checked
  61. 61. <main class=“game”> [...] <input class="coin" type="checkbox" id="c1"></input> [...] <input class="coin" type="checkbox" id=“c2"></input> [...] </main>
  62. 62. <main class=“game”> [...] <input class="coin" tabindex="-1" type="checkbox" id=“c1"></input> [...] <input class="coin” tabindex="-1" type="checkbox" id=“c2"></input> [...] </main>
  63. 63. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter tabindex
  64. 64. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter tabindex
  65. 65. <main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...] </main>
  66. 66. <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'); }
  67. 67. #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; }
  68. 68. <main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...] <div class="pause-container"></div> </main>
  69. 69. .pause-container { display: none; background-color: black; opacity: 0.7; } #pause-button:checked ~ .pause-container { display: block; }
  70. 70. .pause-container .pause-container:before
  71. 71. Como colocar instruções?
  72. 72. <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>
  73. 73. 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; }
  74. 74. <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>
  75. 75. #intro:checked + #rules:checked ~ .rules { display: none; }
  76. 76. http://fernandabernardo.com.br/space-game/
  77. 77. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter tabindex
  78. 78. • http://minocernota.com/articles/pure_css_game/ • http://codepen.io/vaielab/full/yoKEF/ • http://dabblet.com/gist/2076449 • http://ryan-kahn.com/static/onlyCSS/ • http://fernandabernardo.com.br/piano-tiles/ • https://github.com/FernandaBernardo/timberman-css Biografia
  79. 79. http://fernandabernardo.com.br @Feh_Bernardo
  80. 80. bit.ly/front-basico 40% desconto

×