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

fernanda.bernardo@elo7.com