Upload
fernanda-bernardo
View
152
Download
4
Embed Size (px)
Citation preview
JOGOS:Indo Além do simples CSS
Fernanda Bernardo
SobreDesenvolvedora Full Stack
JOGOS
JOGOS
JOGOS
+
JOGOS
+ +
JOGOS
+ + X
Por que só CSS?
Tchau!
Diversão
Diversão
Desafio
Diversão
Desafio
Aprendizado
Como?
- Eventos
- Animações
- Condições
- Eventos
- Animações
- Condições ESTILOS
Inspiração
Duck Hunthttp://codepen.io/vaielab/full/yoKEF/
Maintaining CSS Style Stateshttp://dabblet.com/gist/2076449
VAMOS COMEÇAR?
Como representar com HTML e CSS???
Elementos
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>
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>
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>
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>
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>
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>
Elementos.chao, .tronco, .galho-direito, .galho-esquerdo, .timberman {
background: url(‘...’);position: absolute;
}
.timberman {z-index: 2;
}
bloco
bloco
bloco
Como fazer ele viver?
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.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
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; }
}
Como movimentar para direita/esquerda?
Pseudo-classes- Dinâmicas: mudam de acordo com o estado
- Estruturais: selecionar um elemento na estrutura
Pseudo-classes
Checkbox Hack
MovimentaçãoInputs - Radio
<form><input type="radio" name="bloco1" value="esq" />
<input type="radio" name="bloco1" value="dir" />
</form>
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>
<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
label label
Movimentação
[value="dir"]:checked ~ .timberman {left: calc(100% - 200px);transform: scaleX(-1);
}
[value="esq"]:checked ~ .timberman {left: 50%;
}
Como movimentar para “cima”?
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>
Transition Árvore.sprite {
transition: transform 1s ease-in;}
:checked ~ .arvore .sprite {transform: translateY(190px);
}
Transition Árvore.sprite {
transition: transform 1s ease-in;}
:checked ~ .arvore .sprite {transform: translateY(190px);
}
height de cada tronco
Como manter o estado do movimento?
<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>
Transition Árvore.sprite {
transition: transform 1s ease-in;}
:checked ~ .arvore .sprite {transform: translateY(190px);
}
Transition Árvore.sprite {
transition: transform 1s ease-in;}
:checked ~ .arvore .sprite {transform: translateY(190px);
}
:checked ~ :checked ~ .arvore .sprite {transform: translateY(380px);
}
Transition Árvore.sprite {
transition: transform 1s ease-in;}
:checked ~ .arvore .sprite {transform: translateY(190px);
}
:checked ~ :checked ~ .arvore .sprite {transform: translateY(380px);
}
...
O que acontece agora?
Labels<form>
<label for="bloco1-esq"/><label for="bloco2-esq"/><label for="bloco3-esq"/><label for="bloco4-esq"/><label for="bloco5-esq"/>...
</form>
Movimentaçãolabel:nth-of-type(n+3) {
display: none;}
Movimentação[id^="bloco1"]:checked ~ [for^="bloco2"]{
display: block;}
Movimentação[id^="bloco1"]:checked ~ [for^="bloco2"]{
display: block;}
[id^="bloco2"]:checked ~ [for^="bloco3"]{display: block;
}
Movimentação[id^="bloco1"]:checked ~ [for^="bloco2"]{
display: block;}
[id^="bloco2"]:checked ~ [for^="bloco3"]{display: block;
}
[id^="bloco3"]:checked ~ [for^="bloco4"]{display: block;
}
Movimentação[id^="bloco1"]:checked ~ [for^="bloco2"]{
display: block;}
[id^="bloco2"]:checked ~ [for^="bloco3"]{display: block;
}
[id^="bloco3"]:checked ~ [for^="bloco4"]{display: block;
}
...
Como o jogo acaba?
Obstáculos
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>
Obstáculoslabel label input input
label label input input
...
div.arvore ...
div.sprite.troncodiv.sprite.galho-direitodiv.sprite.tronco
Obstáculoslabel label input input
label label input input
...
div.arvore ...
div.sprite.troncodiv.sprite.galho-direitodiv.sprite.tronco 1
n
Obstáculoslabel label input input
label label input input
...
div.arvore ...
div.sprite.troncodiv.sprite.galho-direitodiv.sprite.tronco 1
n
1
Obstáculoslabel label input input
label label input input
...
div.arvore ...
div.sprite.troncodiv.sprite.galho-direitodiv.sprite.tronco 1
n
1
2
Obstáculoslabel label input input
label label input input
...
div.arvore …
div.sprite.troncodiv.sprite.troncodiv.sprite.galho-direitodiv.sprite.tronco
Obstáculoslabel label input input
label label input input
...
div.arvore …
div.sprite.troncodiv.sprite.troncodiv.sprite.galho-direitodiv.sprite.tronco
2
Obstáculoslabel label input input
label label input input
...
div.arvore …
div.sprite.troncodiv.sprite.troncodiv.sprite.galho-direitodiv.sprite.tronco
2
mata
1
2
Tempo
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>
Tempo.progresso { animation: preenche 5s; animation-timing-function: linear; animation-fill-mode: both;}
@keyframes preenche { from { width: 0%; } to { width: 50%; }}
Tempo[name="bloco1"] + .progresso,[name="bloco1"] + .progresso + .morreu { animation-delay: 0;}
Tempo[name="bloco1"] + .progresso,[name="bloco1"] + .progresso + .morreu { animation-delay: 0;}
[name="bloco2"] + .progresso,[name="bloco2"] + .progresso + .morreu { animation-delay: 0.5s;}
Tempo[name="bloco1"] + .progresso,[name="bloco1"] + .progresso + .morreu { animation-delay: 0;}
[name="bloco2"] + .progresso,[name="bloco2"] + .progresso + .morreu { animation-delay: 0.5s;}
...
Tempo.vive:checked + .progresso, .vive:checked + input + .progresso, .vive:checked + .progresso + .morreu, .vive:checked + input + .progresso + .morreu { display: none;}
inputinput.progresso.morreu
Tempo.vive:checked + .progresso, .vive:checked + input + .progresso, .vive:checked + .progresso + .morreu, .vive:checked + input + .progresso + .morreu { display: none;}
inputinput.progresso.morreu
Tempo.vive:checked + .progresso, .vive:checked + input + .progresso, .vive:checked + .progresso + .morreu, .vive:checked + input + .progresso + .morreu { display: none;}
inputinput.progresso.morreu
Tela Game Over.morreu {
background: url(“gameover.png”);animation: morre 5s;animation-fill-mode: both;
}
@keyframes morre {0%, 99% { visibility: hidden; }100% { visibility: visible; }
}
.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
Tela Game Over.mata:checked + .morreu,.mata:checked + input + .morreu { animation: none; visibility: visible;}
.mata:checked ~ .timberman { background: url('rip.png');}
Vencer
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>
Vencer.venceu { display: none; background-color: green;}
Vencer.venceu { display: none; background-color: green;}
[id^=”bloco12”]:checked ~ .venceu { display: block;}
Vencer.venceu { display: none; background-color: green;}
[id^=”bloco12”]:checked ~ .venceu { display: block;}
EASY WIN!
Vencer.venceu { display: none; background-color: green;}
:checked ~ :checked ~ ... ~ :checked ~ .venceu { display: block;}
Desafios
Desafios- Pontuação
- Rotate de cada bloco
- Animation timberman cortando
- Play do jogo
- Responsividade
github.com/FernandaBernardo/timberman-css