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. Edição 2018
#mvpconf
Fernanda Bernardo
Visual Studio and Development Technologies
Jogos: indo além do simples CSS

2. #mvpconf
Patrocínio:

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. #mvpconf
@Feh_Bernardo
http://fernandabernardo.com.br
Biografia
Engenheira de Software @Elo7
Mentora @Training Center
@Help4Papers

5. GIFS ❤❤❤

6. Repositório:
http://bit.ly/2c2RsV1
Palestra:
http://bit.ly/2cbNs6h

7. Repositório:
http://bit.ly/2eLXyeP
Palestra:
http://bit.ly/2xDU5qq

9. Porque só CSS?

10. Divertido

11. Desafio

12. Aprendizado

14. We
CSS

18. Como representar
os elementos
básicos do jogo?

20. cursor: url('images/bob.png'), default;
.container {
}
<div class=“container”>
</div>
width: 100vw;
height: 100vh;

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

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

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

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

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

27. .container {
width: 100vw;
height: 100vh;
cursor: url('images/bob.png'), default;
box-sizing: border-box;
}

29. vw, vh, vmin, vmax
cursor
box-sizing

30. vw, vh, vmin, vmax
cursor
box-sizing

31. <div class=“container”>
</div>

32. <div class=“container”>
<main class=“game">
</main>
</div> .container {
position: relative;
}
.game {
background: url('images/fundo.jpg');
position: absolute;
}

34. Porque um bob esponja
no espaço?

37. ?

38. E os inimigos?

40. <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);
}
}

41. vw, vh, vmin, vmax
cursor
box-sizing
animation

42. vw, vh, vmin, vmax
cursor
box-sizing
animation

43. <main class=“game”>
</main>
<div class="inimigo"></div>
<div class="inimigo"></div>
<div class="inimigo"></div>
<div class="inimigo"></div>
<div class="inimigo"></div>

44. <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>

45. #i1 {
left: 9%;
}
#i2 {
left: 23%;
}
#i3 {
left: 37%;
}
#i4 {
left: 65%;
}
#i5 {
left: 90%;
}

47. E como deixar os
inimigos mais dinâmicos?

48. #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;}

50. E se tiver mais inimigos?
#i6, #i7, #i8, #i9, #i10 {
animation-delay: 10s;
background-color: red;
}

52. Como esconder?
.inimigo {
z-index: -1;
animation-fill-mode: backwards;
}

54. Como esconder?
.inimigo {
z-index: -1;
animation-fill-mode: backwards;
}
@keyframes moving {
0% { z-index: -1; }
1% { z-index: 2; }
100% { z-index: 2; }
}

56. vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index

57. vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index

60. <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;
}

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;
}

62. .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;
}

63. vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores

64. vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores

65. O que vamos
conquistar?

68. <main class=“game”>
</main>
<div class="inimigo" id="i1"></div>
[...]
<div class="inimigo" id="i5"></div>

69. <main class=“game”>
</main>
<div class="inimigo" id="i1"></div>
[...]
<div class="inimigo" id="i5"></div>
<input class=“coin” type="checkbox" id="c1">
</input>

70. .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;
}

72. <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>

74. Como contar
os pontos?

75. .game {
counter-reset: pontos;
}
.game:after {
content: counter(pontos) ‘/2';
}
.coin:checked {
counter-increment: pontos;
}

76. .game {
counter-reset: pontos;
}
.game:after {
content: counter(pontos) ‘/2';
}
.coin:checked {
counter-increment: pontos;
}

77. .game {
counter-reset: blah;
}
.game:after {
content: counter(blah) ‘/2';
}
.coin:checked {
counter-increment: blah;
}

78. .coin:checked {
counter-increment: pontos;
}

79. .coin:checked {
counter-increment: pontos;
visibility: hidden;
}
display: none; ???Visibility
hidden X
Display
none

81. vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
counter

82. vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
counter

83. Como vence?

84. <main class=“game”>
[...]
<div class="venceu">
Venceu! :)
</div>
</main>

85. .venceu {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: green;
top: 0;
left: 0;
}
#c1:checked ~ #c2:checked
~ .venceu {
display: block;
}

86. #c1:checked ~ #c2:checked
~ .venceu {
display: block;
}
Mais moedas?
~ #c3:checked
~ #c4:checked ~ #c5:checked

89. <main class=“game”>
[...]
<input class="coin"
type="checkbox" id="c1"></input>
[...]
<input class="coin"
type="checkbox" id=“c2"></input>
[...]
</main>

90. <main class=“game”>
[...]
<input class="coin" tabindex="-1"
type="checkbox" id=“c1"></input>
[...]
<input class="coin” tabindex="-1"
type="checkbox" id=“c2"></input>
[...]
</main>

91. vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
counter
tabindex

92. vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
counter
tabindex

94. <main class=“game”>
<input type="checkbox" id="pause-button"></input>
<label for="pause-button"></label>
[...]
</main>

95. <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');
}

96. #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;
}

98. <main class=“game”>
<input type="checkbox" id="pause-button"></input>
<label for="pause-button"></label>
[...]
<div class="pause-container"></div>
</main>

99. .pause-container {
display: none;
background-color: black;
opacity: 0.7;
}
#pause-button:checked ~ .pause-container {
display: block;
}

100. .pause-container
.pause-container:before

101. Como colocar
instruções?

102. <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>

103. 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;
}

105. <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>

106. #intro:checked + #rules:checked ~ .rules {
display: none;
}

108. http://fernandabernardo.com.br/space-game/

109. vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
counter
tabindex

110. • 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

111. http://fernandabernardo.com.br
@Feh_Bernardo
#mvpconf