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.

1. JOGOS:
Indo Além do
simples CSS
Fernanda Bernardo

2. Sobre
Desenvolvedora Full Stack

3. JOGOS

4. JOGOS

5. JOGOS
+

6. JOGOS
+ +

7. JOGOS
+ +
X

8. Por que só CSS?

10. Tchau!

12. Diversão

13. Diversão
Desafio

14. Diversão
Desafio
Aprendizado

16. Como?

17. - Eventos
- Animações
- Condições

18. - Eventos
- Animações
- Condições ESTILOS

19. Inspiração
Duck Hunt
http://codepen.io/vaielab/full/yoKEF/
Maintaining CSS Style States
http://dabblet.com/gist/2076449

20. VAMOS COMEÇAR?

23. Como representar
com HTML e CSS???

24. Elementos

25. Elementos
<form>
…
<div class=”arvore”>
<div class=”sprite tronco”></div>
<div class=”sprite galho-direito”></div>
<div class=”sprite galho-esquerdo”></div>
…
</div>
<div class=”timberman”>
<div class=”chao”>
</form>

26. Elementos
<form>
…
<div class=”arvore”>
<div class=”sprite tronco”></div>
<div class=”sprite galho-direito”></div>
<div class=”sprite galho-esquerdo”></div>
…
</div>
<div class=”timberman”>
<div class=”chao”>
</form>

27. Elementos
<form>
…
<div class=”arvore”>
<div class=”sprite tronco”></div>
<div class=”sprite galho-direito”></div>
<div class=”sprite galho-esquerdo”></div>
…
</div>
<div class=”timberman”>
<div class=”chao”>
</form>

28. Elementos
<form>
…
<div class=”arvore”>
<div class=”sprite tronco”></div>
<div class=”sprite galho-direito”></div>
<div class=”sprite galho-esquerdo”></div>
…
</div>
<div class=”timberman”>
<div class=”chao”>
</form>

29. Elementos
<form>
…
<div class=”arvore”>
<div class=”sprite tronco”></div>
<div class=”sprite galho-direito”></div>
<div class=”sprite galho-esquerdo”></div>
…
</div>
<div class=”timberman”>
<div class=”chao”>
</form>

30. Elementos
<form>
…
<div class=”arvore”>
<div class=”sprite tronco”></div>
<div class=”sprite galho-direito”></div>
<div class=”sprite galho-esquerdo”></div>
…
</div>
<div class=”timberman”>
<div class=”chao”>
</form>

31. Elementos
.chao, .tronco, .galho-direito,
.galho-esquerdo, .timberman {
background: url(‘...’);
position: absolute;
}
.timberman {
z-index: 2;
}

33. bloco
bloco
bloco

34. Como fazer
ele viver?

35. Animação
.timberman {
background-position: 0 0;
animation: timberman-animation 0.5s;
animation-iteration-count: infinite;
animation-timing-function: steps(2);
}
@keyframes timberman-animation {
to {
background-position: -426px 0;
}
}

36. Animação
.timberman {
background-position: 0 0;
animation: timberman-animation 0.5s;
animation-iteration-count: infinite;
animation-timing-function: steps(2);
}
@keyframes timberman-animation {
to {
background-position: -426px 0;
}
}
animação da
posição do
background

37. Animação
.timberman {
background-position: 0 0;
animation: timberman-animation 0.5s;
animation-iteration-count: infinite;
animation-timing-function: steps(2);
}
@keyframes timberman-animation {
to {
background-position: -426px 0;
}
}

39. Como movimentar
para direita/esquerda?

40. Pseudo-classes
- Dinâmicas: mudam de acordo
com o estado
- Estruturais: selecionar um
elemento na estrutura

41. Pseudo-classes

42. Checkbox Hack

43. Movimentação
Inputs - Radio
<form>
<input type="radio"
name="bloco1"
value="esq" />
<input type="radio"
name="bloco1"
value="dir" />
</form>

45. Movimentação
<form>
<label for="bloco1-esq"></label>
<label for="bloco1-dir"></label>
<input id="bloco1-esq" type="radio"
name="bloco1" value="esq" />
<input id="bloco1-dir" type="radio"
name="bloco1" value="dir" />
</form>

46. <form>
<label for="bloco1-esq"></label>
<label for="bloco1-dir"></label>
<input id="bloco1-esq" type="radio"
name="bloco1" value="esq" />
<input id="bloco1-dir" type="radio"
name="bloco1" value="dir" />
</form>
Movimentação

47. label label

48. Movimentação
[value="dir"]:checked ~ .timberman {
left: calc(100% - 200px);
transform: scaleX(-1);
}
[value="esq"]:checked ~ .timberman {
left: 50%;
}

50. Como movimentar
para “cima”?

51. Transition Árvore
<form>
…
<div class=”arvore”>
<div class=”sprite tronco”></div>
<div class=”sprite galho-direito”></div>
<div class=”sprite galho-esquerdo”></div>
…
</div>
<div class=”timberman”>
<div class=”chao”>
</form>

52. Transition Árvore
.sprite {
transition: transform 1s ease-in;
}
:checked ~ .arvore .sprite {
transform: translateY(190px);
}

53. Transition Árvore
.sprite {
transition: transform 1s ease-in;
}
:checked ~ .arvore .sprite {
transform: translateY(190px);
}
height de cada tronco

55. Como manter o
estado do movimento?

56. <form>
<input type="radio" name="bloco1"/>
<input type="radio" name="bloco2"/>
<input type="radio" name="bloco3"/>
<input type="radio" name="bloco4"/>
<input type="radio" name="bloco5"/>
...
</form>

57. Transition Árvore
.sprite {
transition: transform 1s ease-in;
}
:checked ~ .arvore .sprite {
transform: translateY(190px);
}

58. Transition Árvore
.sprite {
transition: transform 1s ease-in;
}
:checked ~ .arvore .sprite {
transform: translateY(190px);
}
:checked ~ :checked ~ .arvore .sprite {
transform: translateY(380px);
}

59. Transition Árvore
.sprite {
transition: transform 1s ease-in;
}
:checked ~ .arvore .sprite {
transform: translateY(190px);
}
:checked ~ :checked ~ .arvore .sprite {
transform: translateY(380px);
}
...

60. O que acontece
agora?

61. Labels
<form>
<label for="bloco1-esq"/>
<label for="bloco2-esq"/>
<label for="bloco3-esq"/>
<label for="bloco4-esq"/>
<label for="bloco5-esq"/>
...
</form>

62. Movimentação
label:nth-of-type(n+3) {
display: none;
}

63. Movimentação
[id^="bloco1"]:checked ~ [for^="bloco2"]{
display: block;
}

64. Movimentação
[id^="bloco1"]:checked ~ [for^="bloco2"]{
display: block;
}
[id^="bloco2"]:checked ~ [for^="bloco3"]{
display: block;
}

65. Movimentação
[id^="bloco1"]:checked ~ [for^="bloco2"]{
display: block;
}
[id^="bloco2"]:checked ~ [for^="bloco3"]{
display: block;
}
[id^="bloco3"]:checked ~ [for^="bloco4"]{
display: block;
}

66. Movimentação
[id^="bloco1"]:checked ~ [for^="bloco2"]{
display: block;
}
[id^="bloco2"]:checked ~ [for^="bloco3"]{
display: block;
}
[id^="bloco3"]:checked ~ [for^="bloco4"]{
display: block;
}
...

67. Como o jogo
acaba?

68. Obstáculos

69. Obstáculos
<form>
<label for="bloco1-esq"></label>
<label for="bloco1-dir"></label>
<input class=”vive” ... value="esq"
/>
<input class=”mata” ... value="dir"
/>
<div class="morreu"></div>
…
</form>

70. Obstáculos
label
label
input
input
label
label
input
input
...
div.arvore
...
div.sprite.tronco
div.sprite.galho-direito
div.sprite.tronco

71. Obstáculos
label
label
input
input
label
label
input
input
...
div.arvore
...
div.sprite.tronco
div.sprite.galho-direito
div.sprite.tronco
1
n

72. Obstáculos
label
label
input
input
label
label
input
input
...
div.arvore
...
div.sprite.tronco
div.sprite.galho-direito
div.sprite.tronco
1
n
1

73. Obstáculos
label
label
input
input
label
label
input
input
...
div.arvore
...
div.sprite.tronco
div.sprite.galho-direito
div.sprite.tronco
1
n
1
2

74. Obstáculos
label
label
input
input
label
label
input
input
...
div.arvore
…
div.sprite.tronco
div.sprite.tronco
div.sprite.galho-direito
div.sprite.tronco

75. Obstáculos
label
label
input
input
label
label
input
input
...
div.arvore
…
div.sprite.tronco
div.sprite.tronco
div.sprite.galho-direito
div.sprite.tronco
2

76. Obstáculos
label
label
input
input
label
label
input
input
...
div.arvore
…
div.sprite.tronco
div.sprite.tronco
div.sprite.galho-direito
div.sprite.tronco
2
mata
1
2

78. Tempo

79. Tempo
<form>
<label for="bloco1-esq"></label>
<label for="bloco1-dir"></label>
<input class=”vive” value="esq" />
<input class=”mata” value="dir" />
<div class="progresso"></div>
<div class="morreu"></div>
…
</form>

80. Tempo
.progresso {
animation: preenche 5s;
animation-timing-function: linear;
animation-fill-mode: both;
}
@keyframes preenche {
from { width: 0%; }
to { width: 50%; }
}

81. Tempo
[name="bloco1"] + .progresso,
[name="bloco1"] + .progresso + .morreu {
animation-delay: 0;
}

82. Tempo
[name="bloco1"] + .progresso,
[name="bloco1"] + .progresso + .morreu {
animation-delay: 0;
}
[name="bloco2"] + .progresso,
[name="bloco2"] + .progresso + .morreu {
animation-delay: 0.5s;
}

83. Tempo
[name="bloco1"] + .progresso,
[name="bloco1"] + .progresso + .morreu {
animation-delay: 0;
}
[name="bloco2"] + .progresso,
[name="bloco2"] + .progresso + .morreu {
animation-delay: 0.5s;
}
...

84. Tempo
.vive:checked + .progresso,
.vive:checked + input + .progresso,
.vive:checked + .progresso + .morreu,
.vive:checked + input + .progresso + .morreu
{
display: none;
}
input
input
.progresso
.morreu

85. Tempo
.vive:checked + .progresso,
.vive:checked + input + .progresso,
.vive:checked + .progresso + .morreu,
.vive:checked + input + .progresso + .morreu
{
display: none;
}
input
input
.progresso
.morreu

86. Tempo
.vive:checked + .progresso,
.vive:checked + input + .progresso,
.vive:checked + .progresso + .morreu,
.vive:checked + input + .progresso + .morreu
{
display: none;
}
input
input
.progresso
.morreu

88. Tela Game Over
.morreu {
background: url(“gameover.png”);
animation: morre 5s;
animation-fill-mode: both;
}
@keyframes morre {
0%, 99% { visibility: hidden; }
100% { visibility: visible; }
}

89. .morreu {
background: url(“gameover.png”);
animation: morre 5s;
animation-fill-mode: both;
}
@keyframes morre {
0%, 99% { visibility: hidden; }
100% { visibility: visible; }
}
Tela Game Over
demora quase 5s para
mostrar a tela

90. Tela Game Over
.mata:checked + .morreu,
.mata:checked + input + .morreu {
animation: none;
visibility: visible;
}
.mata:checked ~ .timberman {
background: url('rip.png');
}

91. Vencer

92. Vencer
<form>
…
<div class=”arvore”>
<div class=”sprite tronco”></div>
<div class=”sprite galho-direito”></div>
<div class=”sprite galho-esquerdo”></div>
…
</div>
<div class=”timberman”>
<div class=”chao”>
<div class=”venceu”>
</form>

93. Vencer
.venceu {
display: none;
background-color: green;
}

94. Vencer
.venceu {
display: none;
background-color: green;
}
[id^=”bloco12”]:checked ~ .venceu {
display: block;
}

95. Vencer
.venceu {
display: none;
background-color: green;
}
[id^=”bloco12”]:checked ~ .venceu {
display: block;
}
EASY WIN!

96. Vencer
.venceu {
display: none;
background-color: green;
}
:checked ~ :checked ~ ... ~ :checked ~
.venceu {
display: block;
}

98. Desafios

99. Desafios
- Pontuação
- Rotate de cada bloco
- Animation timberman cortando
- Play do jogo
- Responsividade

100. github.com/FernandaBernardo
/timberman-css
fernanda.bernardo@elo7.com