100
JOGOS: Indo Além do simples CSS Fernanda Bernardo

Jogos com css

Embed Size (px)

Citation preview

Page 1: Jogos com css

JOGOS:Indo Além do simples CSS

Fernanda Bernardo

Page 2: Jogos com css

SobreDesenvolvedora Full Stack

Page 3: Jogos com css

JOGOS

Page 4: Jogos com css

JOGOS

Page 5: Jogos com css

JOGOS

+

Page 6: Jogos com css

JOGOS

+ +

Page 7: Jogos com css

JOGOS

+ + X

Page 8: Jogos com css

Por que só CSS?

Page 9: Jogos com css
Page 10: Jogos com css

Tchau!

Page 11: Jogos com css
Page 12: Jogos com css

Diversão

Page 13: Jogos com css

Diversão

Desafio

Page 14: Jogos com css

Diversão

Desafio

Aprendizado

Page 15: Jogos com css
Page 16: Jogos com css

Como?

Page 17: Jogos com css

- Eventos

- Animações

- Condições

Page 18: Jogos com css

- Eventos

- Animações

- Condições ESTILOS

Page 19: Jogos com css

Inspiração

Duck Hunthttp://codepen.io/vaielab/full/yoKEF/

Maintaining CSS Style Stateshttp://dabblet.com/gist/2076449

Page 20: Jogos com css

VAMOS COMEÇAR?

Page 21: Jogos com css
Page 22: Jogos com css
Page 23: Jogos com css

Como representar com HTML e CSS???

Page 24: Jogos com css

Elementos

Page 25: Jogos com css

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>

Page 26: Jogos com css

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>

Page 27: Jogos com css

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>

Page 28: Jogos com css

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>

Page 29: Jogos com css

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>

Page 30: Jogos com css

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>

Page 31: Jogos com css

Elementos.chao, .tronco, .galho-direito, .galho-esquerdo, .timberman {

background: url(‘...’);position: absolute;

}

.timberman {z-index: 2;

}

Page 32: Jogos com css
Page 33: Jogos com css

bloco

bloco

bloco

Page 34: Jogos com css

Como fazer ele viver?

Page 35: Jogos com css

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

}

Page 36: Jogos com css

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

Page 37: Jogos com css

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

}

Page 38: Jogos com css
Page 39: Jogos com css

Como movimentar para direita/esquerda?

Page 40: Jogos com css

Pseudo-classes- Dinâmicas: mudam de acordo com o estado

- Estruturais: selecionar um elemento na estrutura

Page 41: Jogos com css

Pseudo-classes

Page 42: Jogos com css

Checkbox Hack

Page 43: Jogos com css

MovimentaçãoInputs - Radio

<form><input type="radio" name="bloco1" value="esq" />

<input type="radio" name="bloco1" value="dir" />

</form>

Page 44: Jogos com css
Page 45: Jogos com css

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>

Page 46: Jogos com css

<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

Page 47: Jogos com css

label label

Page 48: Jogos com css

Movimentação

[value="dir"]:checked ~ .timberman {left: calc(100% - 200px);transform: scaleX(-1);

}

[value="esq"]:checked ~ .timberman {left: 50%;

}

Page 49: Jogos com css
Page 50: Jogos com css

Como movimentar para “cima”?

Page 51: Jogos com css

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>

Page 52: Jogos com css

Transition Árvore.sprite {

transition: transform 1s ease-in;}

:checked ~ .arvore .sprite {transform: translateY(190px);

}

Page 53: Jogos com css

Transition Árvore.sprite {

transition: transform 1s ease-in;}

:checked ~ .arvore .sprite {transform: translateY(190px);

}

height de cada tronco

Page 54: Jogos com css
Page 55: Jogos com css

Como manter o estado do movimento?

Page 56: Jogos com css

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

Page 57: Jogos com css

Transition Árvore.sprite {

transition: transform 1s ease-in;}

:checked ~ .arvore .sprite {transform: translateY(190px);

}

Page 58: Jogos com css

Transition Árvore.sprite {

transition: transform 1s ease-in;}

:checked ~ .arvore .sprite {transform: translateY(190px);

}

:checked ~ :checked ~ .arvore .sprite {transform: translateY(380px);

}

Page 59: Jogos com css

Transition Árvore.sprite {

transition: transform 1s ease-in;}

:checked ~ .arvore .sprite {transform: translateY(190px);

}

:checked ~ :checked ~ .arvore .sprite {transform: translateY(380px);

}

...

Page 60: Jogos com css

O que acontece agora?

Page 61: Jogos com css

Labels<form>

<label for="bloco1-esq"/><label for="bloco2-esq"/><label for="bloco3-esq"/><label for="bloco4-esq"/><label for="bloco5-esq"/>...

</form>

Page 62: Jogos com css

Movimentaçãolabel:nth-of-type(n+3) {

display: none;}

Page 63: Jogos com css

Movimentação[id^="bloco1"]:checked ~ [for^="bloco2"]{

display: block;}

Page 64: Jogos com css

Movimentação[id^="bloco1"]:checked ~ [for^="bloco2"]{

display: block;}

[id^="bloco2"]:checked ~ [for^="bloco3"]{display: block;

}

Page 65: Jogos com css

Movimentação[id^="bloco1"]:checked ~ [for^="bloco2"]{

display: block;}

[id^="bloco2"]:checked ~ [for^="bloco3"]{display: block;

}

[id^="bloco3"]:checked ~ [for^="bloco4"]{display: block;

}

Page 66: Jogos com css

Movimentação[id^="bloco1"]:checked ~ [for^="bloco2"]{

display: block;}

[id^="bloco2"]:checked ~ [for^="bloco3"]{display: block;

}

[id^="bloco3"]:checked ~ [for^="bloco4"]{display: block;

}

...

Page 67: Jogos com css

Como o jogo acaba?

Page 68: Jogos com css

Obstáculos

Page 69: Jogos com css

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>

Page 70: Jogos com css

Obstáculoslabel label input input

label label input input

...

div.arvore ...

div.sprite.troncodiv.sprite.galho-direitodiv.sprite.tronco

Page 71: Jogos com css

Obstáculoslabel label input input

label label input input

...

div.arvore ...

div.sprite.troncodiv.sprite.galho-direitodiv.sprite.tronco 1

n

Page 72: Jogos com css

Obstáculoslabel label input input

label label input input

...

div.arvore ...

div.sprite.troncodiv.sprite.galho-direitodiv.sprite.tronco 1

n

1

Page 73: Jogos com css

Obstáculoslabel label input input

label label input input

...

div.arvore ...

div.sprite.troncodiv.sprite.galho-direitodiv.sprite.tronco 1

n

1

2

Page 74: Jogos com css

Obstáculoslabel label input input

label label input input

...

div.arvore …

div.sprite.troncodiv.sprite.troncodiv.sprite.galho-direitodiv.sprite.tronco

Page 75: Jogos com css

Obstáculoslabel label input input

label label input input

...

div.arvore …

div.sprite.troncodiv.sprite.troncodiv.sprite.galho-direitodiv.sprite.tronco

2

Page 76: Jogos com css

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

Page 77: Jogos com css
Page 78: Jogos com css

Tempo

Page 79: Jogos com css

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>

Page 80: Jogos com css

Tempo.progresso { animation: preenche 5s; animation-timing-function: linear; animation-fill-mode: both;}

@keyframes preenche { from { width: 0%; } to { width: 50%; }}

Page 81: Jogos com css

Tempo[name="bloco1"] + .progresso,[name="bloco1"] + .progresso + .morreu { animation-delay: 0;}

Page 82: Jogos com css

Tempo[name="bloco1"] + .progresso,[name="bloco1"] + .progresso + .morreu { animation-delay: 0;}

[name="bloco2"] + .progresso,[name="bloco2"] + .progresso + .morreu { animation-delay: 0.5s;}

Page 83: Jogos com css

Tempo[name="bloco1"] + .progresso,[name="bloco1"] + .progresso + .morreu { animation-delay: 0;}

[name="bloco2"] + .progresso,[name="bloco2"] + .progresso + .morreu { animation-delay: 0.5s;}

...

Page 84: Jogos com css

Tempo.vive:checked + .progresso, .vive:checked + input + .progresso, .vive:checked + .progresso + .morreu, .vive:checked + input + .progresso + .morreu { display: none;}

inputinput.progresso.morreu

Page 85: Jogos com css

Tempo.vive:checked + .progresso, .vive:checked + input + .progresso, .vive:checked + .progresso + .morreu, .vive:checked + input + .progresso + .morreu { display: none;}

inputinput.progresso.morreu

Page 86: Jogos com css

Tempo.vive:checked + .progresso, .vive:checked + input + .progresso, .vive:checked + .progresso + .morreu, .vive:checked + input + .progresso + .morreu { display: none;}

inputinput.progresso.morreu

Page 87: Jogos com css
Page 88: Jogos com css

Tela Game Over.morreu {

background: url(“gameover.png”);animation: morre 5s;animation-fill-mode: both;

}

@keyframes morre {0%, 99% { visibility: hidden; }100% { visibility: visible; }

}

Page 89: Jogos com css

.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

Page 90: Jogos com css

Tela Game Over.mata:checked + .morreu,.mata:checked + input + .morreu { animation: none; visibility: visible;}

.mata:checked ~ .timberman { background: url('rip.png');}

Page 91: Jogos com css

Vencer

Page 92: Jogos com css

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>

Page 93: Jogos com css

Vencer.venceu { display: none; background-color: green;}

Page 94: Jogos com css

Vencer.venceu { display: none; background-color: green;}

[id^=”bloco12”]:checked ~ .venceu { display: block;}

Page 95: Jogos com css

Vencer.venceu { display: none; background-color: green;}

[id^=”bloco12”]:checked ~ .venceu { display: block;}

EASY WIN!

Page 96: Jogos com css

Vencer.venceu { display: none; background-color: green;}

:checked ~ :checked ~ ... ~ :checked ~ .venceu { display: block;}

Page 97: Jogos com css
Page 98: Jogos com css

Desafios

Page 99: Jogos com css

Desafios- Pontuação

- Rotate de cada bloco

- Animation timberman cortando

- Play do jogo

- Responsividade

Page 100: Jogos com css

github.com/FernandaBernardo/timberman-css

[email protected]