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.

Transcript

1. Jogos: indo além do simples CSS Fernanda Bernardo
2. Fernanda Bernardo Engenheira de Software @Elo7 MVP @Microsoft @Help4Papers http://fernandabernardo.com.br @Feh_Bernardo
3. GIFS ❤❤❤
4. Repositório: http://bit.ly/2c2RsV1 Palestra: http://bit.ly/2cbNs6h
5. Repositório: http://bit.ly/2eLXyeP Palestra: http://bit.ly/2xDU5qq
7. Porque só CSS?
8. Divertido
9. Desafio
10. Aprendizado
12. We CSS
17. Como representar os elementos básicos do jogo?
19. cursor: url('images/bob.png'), default; .container { } <div class=“container”> </div> width: 100vw; height: 100vh;
21. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; }
22. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; } VW VH
23. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; } Viewport Width Viewport Height
24. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; } vmax vmin
25. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; } cursor: default; pointer; url('images/bob.png'), default;
26. .container { width: 100vw; height: 100vh; cursor: url('images/bob.png'), default; box-sizing: border-box; }
28. vw, vh, vmin, vmax cursor box-sizing
29. vw, vh, vmin, vmax cursor box-sizing
30. <div class=“container”> </div>
31. <div class=“container”> <main class=“game"> </main> </div> .container { position: relative; } .game { background: url('images/fundo.jpg'); position: absolute; }
33. Porque um bob esponja no espaço?
36. ?
37. E os inimigos?
39. <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); } }
40. vw, vh, vmin, vmax cursor box-sizing animation
41. vw, vh, vmin, vmax cursor box-sizing animation
42. <main class=“game”> </main> <div class="inimigo"></div> <div class="inimigo"></div> <div class="inimigo"></div> <div class="inimigo"></div> <div class="inimigo"></div>
43. <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>
44. #i1 { left: 9%; } #i2 { left: 23%; } #i3 { left: 37%; } #i4 { left: 65%; } #i5 { left: 90%; }
46. E como deixar os inimigos mais dinâmicos?
47. #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;}
49. E se tiver mais inimigos? #i6, #i7, #i8, #i9, #i10 { animation-delay: 10s; background-color: red; }
51. Como esconder? .inimigo { z-index: -1; animation-fill-mode: backwards; }
53. Como esconder? .inimigo { z-index: -1; animation-fill-mode: backwards; } @keyframes moving { 0% { z-index: -1; } 1% { z-index: 2; } 100% { z-index: 2; } }
55. vw, vh, vmin, vmax cursor box-sizing animation z-index
56. vw, vh, vmin, vmax cursor box-sizing animation z-index
59. <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; }
60. .oops { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: red; z-index: 10; } .inimigo:hover ~ .oops { display: block; }
61. .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; }
62. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores
63. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores
64. O que vamos conquistar?
67. <main class=“game”> </main> <div class="inimigo" id="i1"></div> [...] <div class="inimigo" id="i5"></div>
68. <main class=“game”> </main> <div class="inimigo" id="i1"></div> [...] <div class="inimigo" id="i5"></div> <input class=“coin” type="checkbox" id="c1"> </input>
69. .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; }
71. <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>
73. Como contar os pontos?
74. .game { counter-reset: pontos; } .game:after { content: counter(pontos) ‘/2'; } .coin:checked { counter-increment: pontos; }
75. .game { counter-reset: pontos; } .game:after { content: counter(pontos) ‘/2'; } .coin:checked { counter-increment: pontos; }
76. .game { counter-reset: blah; } .game:after { content: counter(blah) ‘/2'; } .coin:checked { counter-increment: blah; }
77. .coin:checked { counter-increment: pontos; }
78. .coin:checked { counter-increment: pontos; visibility: hidden; } display: none; ??? Visibility hidden X Display none
80. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter
81. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter
82. Como vence?
83. <main class=“game”> [...] <div class="venceu"> Venceu! :) </div> </main>
84. .venceu { display: none; position: absolute; width: 100%; height: 100%; background-color: green; top: 0; left: 0; } #c1:checked ~ #c2:checked ~ .venceu { display: block; }
85. #c1:checked ~ #c2:checked ~ .venceu { display: block; } Mais moedas? ~ #c3:checked ~ #c4:checked ~ #c5:checked
88. <main class=“game”> [...] <input class="coin" type="checkbox" id="c1"></input> [...] <input class="coin" type="checkbox" id=“c2"></input> [...] </main>
89. <main class=“game”> [...] <input class="coin" tabindex="-1" type="checkbox" id=“c1"></input> [...] <input class="coin” tabindex="-1" type="checkbox" id=“c2"></input> [...] </main>
90. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter tabindex
91. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter tabindex
93. <main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...] </main>
94. <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'); }
95. #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; }
97. <main class=“game”> <input type="checkbox" id="pause-button"></input> <label for="pause-button"></label> [...] <div class="pause-container"></div> </main>
98. .pause-container { display: none; background-color: black; opacity: 0.7; } #pause-button:checked ~ .pause-container { display: block; }
99. .pause-container .pause-container:before
100. Como colocar instruções?
101. <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>
102. 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; }
104. <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>
105. #intro:checked + #rules:checked ~ .rules { display: none; }
107. http://fernandabernardo.com.br/space-game/
108. vw, vh, vmin, vmax cursor box-sizing animation z-index seletores counter tabindex
109. • 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
110. http://fernandabernardo.com.br @Feh_Bernardo
111. bit.ly/front-basico 40% desconto