SlideShare a Scribd company logo
1 of 110
Download to read offline
Jogos: indo além do
simples CSS
Fernanda Bernardo
Fernanda Bernardo
Engenheira de Software @Elo7
Mentora @Training Center
@Help4Papers
http://fernandabernardo.com.br
@Feh_Bernardo
GIFS ❤❤❤
Repositório:
http://bit.ly/2c2RsV1
Palestra:
http://bit.ly/2cbNs6h
Repositório:
http://bit.ly/2eLXyeP
Palestra:
http://bit.ly/2xDU5qq
Jogos 3.0
Porque só CSS?
Divertido
Desafio
Aprendizado
Jogos 3.0
We
CSS
Jogos 3.0
Jogos 3.0
Jogos 3.0
Como representar
os elementos
básicos do jogo?
Jogos 3.0
cursor: url('images/bob.png'), default;
.container {
}
<div class=“container”>
</div>
width: 100vw;
height: 100vh;
Jogos 3.0
.container {
width: 100vw;
height: 100vh;
cursor: url('images/bob.png'), default;
}
.container {
width: 100vw;
height: 100vh;
cursor: url('images/bob.png'), default;
}
VW
VH
.container {
width: 100vw;
height: 100vh;
cursor: url('images/bob.png'), default;
}
Viewport Width
Viewport Height
.container {
width: 100vw;
height: 100vh;
cursor: url('images/bob.png'), default;
}
vmax
vmin
.container {
width: 100vw;
height: 100vh;
cursor: url('images/bob.png'), default;
}
cursor: default;pointer;url('images/bob.png'),
default;
.container {
width: 100vw;
height: 100vh;
cursor: url('images/bob.png'), default;
box-sizing: border-box;
}
Jogos 3.0
vw, vh, vmin, vmax
cursor
box-sizing
vw, vh, vmin, vmax
cursor
box-sizing
<div class=“container”>
</div>
<div class=“container”>
<main class=“game">
</main>
</div> .container {
position: relative;
}
.game {
background: url('images/fundo.jpg');
position: absolute;
}
Jogos 3.0
Porque um bob esponja
no espaço?
Jogos 3.0
Jogos 3.0
?
E os inimigos?
Jogos 3.0
<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);
}
}
vw, vh, vmin, vmax
cursor
box-sizing
animation
vw, vh, vmin, vmax
cursor
box-sizing
animation
<main class=“game”>
</main>
<div class="inimigo"></div>
<div class="inimigo"></div>
<div class="inimigo"></div>
<div class="inimigo"></div>
<div class="inimigo"></div>
<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>
#i1 {
left: 9%;
}
#i2 {
left: 23%;
}
#i3 {
left: 37%;
}
#i4 {
left: 65%;
}
#i5 {
left: 90%;
}
Jogos 3.0
E como deixar os
inimigos mais dinâmicos?
#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;}
Jogos 3.0
E se tiver mais inimigos?
#i6, #i7, #i8, #i9, #i10 {
animation-delay: 10s;
background-color: red;
}
Jogos 3.0
Como esconder?
.inimigo {
z-index: -1;
animation-fill-mode: backwards;
}
Jogos 3.0
Como esconder?
.inimigo {
z-index: -1;
animation-fill-mode: backwards;
}
@keyframes moving {
0% { z-index: -1; }
1% { z-index: 2; }
100% { z-index: 2; }
}
Jogos 3.0
vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
Jogos 3.0
Jogos 3.0
<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;
}
.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 {
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;
}
vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
O que vamos
conquistar?
Jogos 3.0
Jogos 3.0
<main class=“game”>
</main>
<div class="inimigo" id="i1"></div>
[...]
<div class="inimigo" id="i5"></div>
<main class=“game”>
</main>
<div class="inimigo" id="i1"></div>
[...]
<div class="inimigo" id="i5"></div>
<input class=“coin” type="checkbox" id="c1">
</input>
.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;
}
Jogos 3.0
<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>
Jogos 3.0
Como contar
os pontos?
.game {
counter-reset: pontos;
}
.game:after {
content: counter(pontos) ‘/2';
}
.coin:checked {
counter-increment: pontos;
}
.game {
counter-reset: pontos;
}
.game:after {
content: counter(pontos) ‘/2';
}
.coin:checked {
counter-increment: pontos;
}
.game {
counter-reset: blah;
}
.game:after {
content: counter(blah) ‘/2';
}
.coin:checked {
counter-increment: blah;
}
.coin:checked {
counter-increment: pontos;
}
.coin:checked {
counter-increment: pontos;
visibility: hidden;
}
display: none; ???Visibility
hidden X
Display
none
Jogos 3.0
vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
counter
vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
counter
Como vence?
<main class=“game”>
[...]
<div class="venceu">
Venceu! :)
</div>
</main>
.venceu {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: green;
top: 0;
left: 0;
}
#c1:checked ~ #c2:checked
~ .venceu {
display: block;
}
#c1:checked ~ #c2:checked
~ .venceu {
display: block;
}
Mais moedas?
~ #c3:checked
~ #c4:checked ~ #c5:checked
Jogos 3.0
Jogos 3.0
<main class=“game”>
[...]
<input class="coin"
type="checkbox" id="c1"></input>
[...]
<input class="coin"
type="checkbox" id=“c2"></input>
[...]
</main>
<main class=“game”>
[...]
<input class="coin" tabindex="-1"
type="checkbox" id=“c1"></input>
[...]
<input class="coin” tabindex="-1"
type="checkbox" id=“c2"></input>
[...]
</main>
vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
counter
tabindex
vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
counter
tabindex
Jogos 3.0
<main class=“game”>
<input type="checkbox" id="pause-button"></input>
<label for="pause-button"></label>
[...]
</main>
<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');
}
#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;
}
Jogos 3.0
<main class=“game”>
<input type="checkbox" id="pause-button"></input>
<label for="pause-button"></label>
[...]
<div class="pause-container"></div>
</main>
.pause-container {
display: none;
background-color: black;
opacity: 0.7;
}
#pause-button:checked ~ .pause-container {
display: block;
}
.pause-container
.pause-container:before
Como colocar
instruções?
<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>
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;
}
Jogos 3.0
<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>
#intro:checked + #rules:checked ~ .rules {
display: none;
}
Jogos 3.0
http://fernandabernardo.com.br/space-game/
vw, vh, vmin, vmax
cursor
box-sizing
animation
z-index
seletores
counter
tabindex
• 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
http://fernandabernardo.com.br
@Feh_Bernardo
bit.ly/front-basico
40% desconto

More Related Content

What's hot

メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計拓樹 谷
 
第二节课:html5 – web开发步入新阶段
第二节课:html5 – web开发步入新阶段第二节课:html5 – web开发步入新阶段
第二节课:html5 – web开发步入新阶段Tommy Chang
 
Presentación WP Versión Keynote
Presentación WP Versión KeynotePresentación WP Versión Keynote
Presentación WP Versión KeynoteJosé Fonseca
 
Thinking about CSS Architecture
Thinking about CSS ArchitectureThinking about CSS Architecture
Thinking about CSS Architecture拓樹 谷
 
jQuery & jQuery Mobile
jQuery & jQuery MobilejQuery & jQuery Mobile
jQuery & jQuery MobileMohammad Raju
 
Asp .Net 2.0 安全機制 Ii
Asp .Net 2.0 安全機制 IiAsp .Net 2.0 安全機制 Ii
Asp .Net 2.0 安全機制 IiChui-Wen Chiu
 

What's hot (6)

メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計
 
第二节课:html5 – web开发步入新阶段
第二节课:html5 – web开发步入新阶段第二节课:html5 – web开发步入新阶段
第二节课:html5 – web开发步入新阶段
 
Presentación WP Versión Keynote
Presentación WP Versión KeynotePresentación WP Versión Keynote
Presentación WP Versión Keynote
 
Thinking about CSS Architecture
Thinking about CSS ArchitectureThinking about CSS Architecture
Thinking about CSS Architecture
 
jQuery & jQuery Mobile
jQuery & jQuery MobilejQuery & jQuery Mobile
jQuery & jQuery Mobile
 
Asp .Net 2.0 安全機制 Ii
Asp .Net 2.0 安全機制 IiAsp .Net 2.0 安全機制 Ii
Asp .Net 2.0 安全機制 Ii
 

More from Fernanda Bernardo

Reinventar a roda a cada novo framework js, vale a pena?
Reinventar a roda a cada novo framework js, vale a pena?Reinventar a roda a cada novo framework js, vale a pena?
Reinventar a roda a cada novo framework js, vale a pena?Fernanda Bernardo
 
Palestrantes são seres super mágicos?
Palestrantes são seres super mágicos?Palestrantes são seres super mágicos?
Palestrantes são seres super mágicos?Fernanda Bernardo
 
Ecmascript - Versão extendida
Ecmascript - Versão extendidaEcmascript - Versão extendida
Ecmascript - Versão extendidaFernanda Bernardo
 
Descomplicando o alinhamento com css
Descomplicando o alinhamento com cssDescomplicando o alinhamento com css
Descomplicando o alinhamento com cssFernanda Bernardo
 
Ux para aumentar a liberdade dos diabéticos
Ux para aumentar a liberdade dos diabéticosUx para aumentar a liberdade dos diabéticos
Ux para aumentar a liberdade dos diabéticosFernanda Bernardo
 
A influência dos usuários no desenvolvimento do Talk7
A influência dos usuários no desenvolvimento do Talk7A influência dos usuários no desenvolvimento do Talk7
A influência dos usuários no desenvolvimento do Talk7Fernanda Bernardo
 
Transformando barreiras para ajudar comunidades
Transformando barreiras para ajudar comunidadesTransformando barreiras para ajudar comunidades
Transformando barreiras para ajudar comunidadesFernanda Bernardo
 
UX para aumentar a liberdade de diabéticos
UX para aumentar a liberdade de diabéticosUX para aumentar a liberdade de diabéticos
UX para aumentar a liberdade de diabéticosFernanda Bernardo
 
Diabetes Mais Doce - Versão 1.0
Diabetes Mais Doce - Versão 1.0Diabetes Mais Doce - Versão 1.0
Diabetes Mais Doce - Versão 1.0Fernanda Bernardo
 

More from Fernanda Bernardo (18)

Reinventar a roda a cada novo framework js, vale a pena?
Reinventar a roda a cada novo framework js, vale a pena?Reinventar a roda a cada novo framework js, vale a pena?
Reinventar a roda a cada novo framework js, vale a pena?
 
Jogos 3.0 - MVP Conf
Jogos 3.0 - MVP ConfJogos 3.0 - MVP Conf
Jogos 3.0 - MVP Conf
 
Palestrantes são seres super mágicos?
Palestrantes são seres super mágicos?Palestrantes são seres super mágicos?
Palestrantes são seres super mágicos?
 
Ecmascript - Versão extendida
Ecmascript - Versão extendidaEcmascript - Versão extendida
Ecmascript - Versão extendida
 
EcmaScript
EcmaScriptEcmaScript
EcmaScript
 
Descomplicando o alinhamento com css
Descomplicando o alinhamento com cssDescomplicando o alinhamento com css
Descomplicando o alinhamento com css
 
Ux para aumentar a liberdade dos diabéticos
Ux para aumentar a liberdade dos diabéticosUx para aumentar a liberdade dos diabéticos
Ux para aumentar a liberdade dos diabéticos
 
Jogos com css 2.0
Jogos com css 2.0Jogos com css 2.0
Jogos com css 2.0
 
Jogos com css
Jogos com cssJogos com css
Jogos com css
 
Isomorfismo pra quê?
Isomorfismo pra quê?Isomorfismo pra quê?
Isomorfismo pra quê?
 
A influência dos usuários no desenvolvimento do Talk7
A influência dos usuários no desenvolvimento do Talk7A influência dos usuários no desenvolvimento do Talk7
A influência dos usuários no desenvolvimento do Talk7
 
Front end ++: seo e flexbox
Front end ++: seo e flexboxFront end ++: seo e flexbox
Front end ++: seo e flexbox
 
Workshop android
Workshop androidWorkshop android
Workshop android
 
Transformando barreiras para ajudar comunidades
Transformando barreiras para ajudar comunidadesTransformando barreiras para ajudar comunidades
Transformando barreiras para ajudar comunidades
 
Heroku
HerokuHeroku
Heroku
 
UX para aumentar a liberdade de diabéticos
UX para aumentar a liberdade de diabéticosUX para aumentar a liberdade de diabéticos
UX para aumentar a liberdade de diabéticos
 
Diabetes Mais Doce - Versão 1.0
Diabetes Mais Doce - Versão 1.0Diabetes Mais Doce - Versão 1.0
Diabetes Mais Doce - Versão 1.0
 
Coding Dojo
Coding DojoCoding Dojo
Coding Dojo
 

Jogos 3.0