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

225 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

  • Be the first to like this

Jogos 3.0 - MVP Conf

  1. 1. Edição 2018 #mvpconf Fernanda Bernardo Visual Studio and Development Technologies Jogos: indo além do simples CSS
  2. 2. #mvpconf Patrocínio:
  3. 3. #mvpconf Beneficiários do Evento: APAE-Associação de Pais e Amigos dos Excepcionais Lar da Criança Ninho de Paz Para quem quiser doar outros valores além das inscrições: CAIXA ECONÔMICA FEDERAL AG: 0504 CC: 01823-0 CNPJ: 89.078.059/0001-06 ITAU UNIBANCO AS Agência: 467 CC: 611109 CNPJ 53.372.454/0001-50
  4. 4. #mvpconf @Feh_Bernardo http://fernandabernardo.com.br Biografia Engenheira de Software @Elo7 Mentora @Training Center @Help4Papers
  5. 5. GIFS ❤❤❤
  6. 6. Repositório: http://bit.ly/2c2RsV1 Palestra: http://bit.ly/2cbNs6h
  7. 7. Repositório: http://bit.ly/2eLXyeP Palestra: http://bit.ly/2xDU5qq
  8. 8. Porque só CSS?
  9. 9. Divertido
  10. 10. Desafio
  11. 11. Aprendizado
  12. 12. We CSS
  13. 13. Como representar os elementos básicos do jogo?
  14. 14. cursor: url('images/bob.png'), default; .container { } <div class=“container”> </div> width: 100vw; height: 100vh;
  15. 15. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; }
  16. 16. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; } VW VH
  17. 17. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; } Viewport Width Viewport Height
  18. 18. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; } vmax vmin
  19. 19. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; } cursor: default;pointer;url('images/bob.png'), default;
  20. 20. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; box-sizing: border-box; }
  21. 21. vw, vh, vmin, vmax cursor box-sizing
  22. 22. vw, vh, vmin, vmax cursor box-sizing
  23. 23. <div class=“container”> </div>
  24. 24. <div class=“container”> <main class=“game"> </main> </div> .container { position: relative; } .game { background: url('images/fundo.jpg'); position: absolute; }
  25. 25. Porque um bob esponja no espaço?
  26. 26. ?
  27. 27. E os inimigos?
  28. 28. <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); } }
  29. 29. vw, vh, vmin, vmax cursor box-sizing animation
  30. 30. vw, vh, vmin, vmax cursor box-sizing animation
  31. 31. <main class=“game”> </main> <div class="inimigo"></div> <div class="inimigo"></div> <div class="inimigo"></div> <div class="inimigo"></div> <div class="inimigo"></div>
  32. 32. <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>
  33. 33. #i1 { left: 9%; } #i2 { left: 23%; } #i3 { left: 37%; } #i4 { left: 65%; } #i5 { left: 90%; }
  34. 34. E como deixar os inimigos mais dinâmicos?
  35. 35. #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;}
  36. 36. E se tiver mais inimigos? #i6, #i7, #i8, #i9, #i10 { animation-delay: 10s; background-color: red; }
  37. 37. Como esconder? .inimigo { z-index: -1; animation-fill-mode: backwards; }
  38. 38. Como esconder? .inimigo { z-index: -1; animation-fill-mode: backwards; } @keyframes moving { 0% { z-index: -1; } 1% { z-index: 2; } 100% { z-index: 2; } }
  39. 39. vw, vh, vmin, vmax cursor box-sizing animation z-index
  40. 40. vw, vh, vmin, vmax cursor box-sizing animation z-index
  41. 41. <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; }
  42. 42. .oops { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: red; z-index: 10; } .inimigo:hover ~ .oops { display: block; }
  43. 43. .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; }
  44. 44. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores
  45. 45. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores
  46. 46. O que vamos conquistar?
  47. 47. <main class=“game”> </main> <div class="inimigo" id="i1"></div> [...] <div class="inimigo" id="i5"></div>
  48. 48. <main class=“game”> </main> <div class="inimigo" id="i1"></div> [...] <div class="inimigo" id="i5"></div> <input class=“coin” type="checkbox" id="c1"> </input>
  49. 49. .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; }
  50. 50. <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>
  51. 51. Como contar os pontos?
  52. 52. .game { counter-reset: pontos; } .game:after { content: counter(pontos) ‘/2'; } .coin:checked { counter-increment: pontos; }
  53. 53. .game { counter-reset: pontos; } .game:after { content: counter(pontos) ‘/2'; } .coin:checked { counter-increment: pontos; }
  54. 54. .game { counter-reset: blah; } .game:after { content: counter(blah) ‘/2'; } .coin:checked { counter-increment: blah; }
  55. 55. .coin:checked { counter-increment: pontos; }
  56. 56. .coin:checked { counter-increment: pontos; visibility: hidden; } display: none; ???Visibility hidden X Display none
  57. 57. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter
  58. 58. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter
  59. 59. Como vence?
  60. 60. <main class=“game”> [...] <div class="venceu"> Venceu! :) </div> </main>
  61. 61. .venceu { display: none; position: absolute; width: 100%; height: 100%; background-color: green; top: 0; left: 0; } #c1:checked ~ #c2:checked ~ .venceu { display: block; }
  62. 62. #c1:checked ~ #c2:checked ~ .venceu { display: block; } Mais moedas? ~ #c3:checked ~ #c4:checked ~ #c5:checked
  63. 63. <main class=“game”> [...] <input class="coin" type="checkbox" id="c1"></input> [...] <input class="coin" type="checkbox" id=“c2"></input> [...] </main>
  64. 64. <main class=“game”> [...] <input class="coin" tabindex="-1" type="checkbox" id=“c1"></input> [...] <input class="coin” tabindex="-1" type="checkbox" id=“c2"></input> [...] </main>
  65. 65. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter tabindex
  66. 66. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter tabindex
  67. 67. <main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...] </main>
  68. 68. <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'); }
  69. 69. #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; }
  70. 70. <main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...] <div class="pause-container"></div> </main>
  71. 71. .pause-container { display: none; background-color: black; opacity: 0.7; } #pause-button:checked ~ .pause-container { display: block; }
  72. 72. .pause-container .pause-container:before
  73. 73. Como colocar instruções?
  74. 74. <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>
  75. 75. 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; }
  76. 76. <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>
  77. 77. #intro:checked + #rules:checked ~ .rules { display: none; }
  78. 78. http://fernandabernardo.com.br/space-game/
  79. 79. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter tabindex
  80. 80. • 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
  81. 81. http://fernandabernardo.com.br @Feh_Bernardo #mvpconf

×