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

16. Fernanda Bernardo
Engenheira de Software @Elo7
Mentora @Training Center
http://fernandabernardo.com.br
@Feh_Bernardo

19. GIFS ❤❤❤

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

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

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

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

29. Porque só CSS?

30. Divertido

31. Desafio

32. Aprendizado

35. We
CSS

36. We
CSS

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

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

49. .container {
}
<div class=“container”>
</div>

50. .container {
}
<div class=“container”>
</div>
width: 100vw;
height: 100vh;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

71. <div class=“container”>
<main class=“game">
</main>
</div>

72. <div class=“container”>
<main class=“game">
</main>
</div> .container {
position: relative;
}

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

76. E os inimigos?

79. <main class=“game”>
</main>

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

81. <main class=“game”>
</main>
<div class="inimigo"></div>
.inimigo {
}

82. <main class=“game”>
</main>
<div class="inimigo"></div>
.inimigo {
}
width: 20px;
height: 20px;

83. <main class=“game”>
</main>
<div class="inimigo"></div>
.inimigo {
}
width: 20px;
height: 20px;
border-radius: 50%;

84. <main class=“game”>
</main>
<div class="inimigo"></div>
.inimigo {
}
width: 20px;
height: 20px;
border-radius: 50%;
background-color: white;

85. <main class=“game”>
</main>
<div class="inimigo"></div>
.inimigo {
}
width: 20px;
height: 20px;
border-radius: 50%;
background-color: white;
position: absolute;

86. <main class=“game”>
</main>
<div class="inimigo"></div>
.inimigo {
}
width: 20px;
height: 20px;
border-radius: 50%;
background-color: white;
position: absolute;
left: 9%;

87. <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;

88. <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;

89. <main class=“game”>
</main>
<div class="inimigo"></div>
@keyframes moving {

90. <main class=“game”>
</main>
<div class="inimigo"></div>
@keyframes moving {
0% {
top: 0;
}

91. <main class=“game”>
</main>
<div class="inimigo"></div>
@keyframes moving {
0% {
top: 0;
}
100% {
top: calc(100% - 25px);
}
}

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

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

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

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

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

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

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

103. #i1 { animation-duration: 6s;
animation-iteration-count: 2;}

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

108. E se tiver mais inimigos?

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

113. Como esconder?

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

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

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

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

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

125. <main class=“game”>
</main>

126. <main class=“game”>
</main>
[...]
<div class=“oops">
Game Over :(
</div>

127. <main class=“game”>
</main>
[...]
<div class=“oops">
Game Over :(
</div>
.oops {

128. <main class=“game”>
</main>
[...]
<div class=“oops">
Game Over :(
</div>
.oops {
display: none;

129. <main class=“game”>
</main>
[...]
<div class=“oops">
Game Over :(
</div>
.oops {
display: none;
position: absolute;

130. <main class=“game”>
</main>
[...]
<div class=“oops">
Game Over :(
</div>
.oops {
display: none;
position: absolute;
top: 0;
left: 0;

131. <main class=“game”>
</main>
[...]
<div class=“oops">
Game Over :(
</div>
.oops {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

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

133. .oops {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
z-index: 10;
}

134. .oops {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
z-index: 10;
}

135. .oops {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
z-index: 10;
}
.inimigo:hover ~ .oops {
display: block;
}

136. .oops {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
z-index: 10;
}
.inimigo:hover ~ .oops {
display: block;
}

137. .oops {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
z-index: 10;
}
.inimigo:hover ~ .oops {
display: block;
}

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

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

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

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

142. O que vamos
conquistar?

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

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

150. .coin {

151. .coin {
width: 20px;
height: 20px;

152. .coin {
width: 20px;
height: 20px;
background-color: yellow;

153. .coin {
width: 20px;
height: 20px;
background-color: yellow;
border-radius: 50%;

154. .coin {
width: 20px;
height: 20px;
background-color: yellow;
border-radius: 50%;
position: absolute;

155. .coin {
width: 20px;
height: 20px;
background-color: yellow;
border-radius: 50%;
position: absolute;
left: 9%;

156. .coin {
width: 20px;
height: 20px;
background-color: yellow;
border-radius: 50%;
position: absolute;
left: 9%;
-webkit-appearance: none;

157. .coin {
width: 20px;
height: 20px;
background-color: yellow;
border-radius: 50%;
position: absolute;
left: 9%;
-webkit-appearance: none;
animation-name: moving;
animation-duration: 6s;
}

158. .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 {

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

162. <main class=“game”>

163. <main class=“game”>
<div class="inimigo" id="i1"></div>

164. <main class=“game”>
<div class="inimigo" id="i1"></div>
<div class="inimigo" id="i2"></div>

165. <main class=“game”>
<div class="inimigo" id="i1"></div>
<div class="inimigo" id="i2"></div>
<div class="inimigo" id="i3"></div>

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

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

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

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

172. Como contar
os pontos?

174. .game {
counter-reset: pontos;
}

175. .game {
counter-reset: pontos;
}
.game:after {
content: counter(pontos) ‘/2';
}

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

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

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

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

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

181. .coin:checked {
counter-increment: pontos;
visibility: hidden;
}

182. .coin:checked {
counter-increment: pontos;
visibility: hidden;
}
display: none;

183. .coin:checked {
counter-increment: pontos;
visibility: hidden;
}
display: none; ???

184. .coin:checked {
counter-increment: pontos;
visibility: hidden;
}

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

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

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

190. Como vence?

191. Como vence?

192. <main class=“game”>
[...]

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

195. .venceu {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: green;
top: 0;
left: 0;
}

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

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

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

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

201. Mais moedas?

202. #c1:checked ~ #c2:checked
~ .venceu {
display: block;
}
Mais moedas?

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

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

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

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

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

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

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

216. <main class=“game”>

217. <main class=“game”>
<input type="checkbox" id="pause-button"></input>

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

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

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

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

222. <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 {

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

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

225. #pause-button ~ .inimigo,
<main class=“game”>
<input type="checkbox" id="pause-button"></input>
<label for="pause-button"></label>
[...]
</main>

226. #pause-button ~ .inimigo,
#pause-button ~ .coin {
<main class=“game”>
<input type="checkbox" id="pause-button"></input>
<label for="pause-button"></label>
[...]
</main>

227. #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>

228. #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,

229. #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 {

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

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

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

237. .pause-container

238. .pause-container
.pause-container:before

239. Como colocar
instruções?

241. <div class="container">
<input id="intro" type="checkbox">

242. <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]

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

244. div .container
input #intro
section .intro
h2
p
label for=intro

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

246. div .container
input #intro
section .intro
h2
p
label for=intro

247. div .container
input #intro
section .intro
h2
p
label for=intro
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;
}

248. div .container
input #intro
section .intro
h2
p
label for=intro

249. div .container
input #intro
section .intro
h2
p
label for=intro
#intro:checked ~ .intro {
display: none;
}

250. div .container
input #intro
section .intro
h2
p
label for=intro

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

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

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

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

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

261. http://fernandabernardo.com.br
@Feh_Bernardo

262. http://fernandabernardo.com.br
@Feh_Bernardo

264. PARE

265. PARE
PENSE

266. PARE
PENSE
DIVIRTA-SE

267. PARE
PENSE
DIVIRTA-SE
APRENDA

268. PARE
PENSE
DIVIRTA-SE
APRENDA
IMPLEMENTE

269. PARE
PENSE
DIVIRTA-SE
APRENDA
IMPLEMENTE
COMPARTILHE