jogos com css
TRANSCRIPT
![Page 1: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/1.jpg)
JOGOS:Indo Além do simples CSS
Fernanda Bernardo
![Page 2: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/2.jpg)
SobreDesenvolvedora Full Stack
![Page 3: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/3.jpg)
JOGOS
![Page 4: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/4.jpg)
JOGOS
![Page 5: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/5.jpg)
JOGOS
+
![Page 6: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/6.jpg)
JOGOS
+ +
![Page 7: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/7.jpg)
JOGOS
+ + X
![Page 8: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/8.jpg)
Por que só CSS?
![Page 9: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/9.jpg)
![Page 10: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/10.jpg)
Tchau!
![Page 11: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/11.jpg)
![Page 12: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/12.jpg)
Diversão
![Page 13: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/13.jpg)
Diversão
Desafio
![Page 14: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/14.jpg)
Diversão
Desafio
Aprendizado
![Page 15: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/15.jpg)
![Page 16: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/16.jpg)
Como?
![Page 17: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/17.jpg)
- Eventos
- Animações
- Condições
![Page 18: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/18.jpg)
- Eventos
- Animações
- Condições ESTILOS
![Page 19: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/19.jpg)
Inspiração
Duck Hunthttp://codepen.io/vaielab/full/yoKEF/
Maintaining CSS Style Stateshttp://dabblet.com/gist/2076449
![Page 20: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/20.jpg)
VAMOS COMEÇAR?
![Page 21: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/21.jpg)
![Page 22: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/22.jpg)
![Page 23: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/23.jpg)
Como representar com HTML e CSS???
![Page 24: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/24.jpg)
Elementos
![Page 25: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/25.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/26.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/27.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/28.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/29.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/30.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/31.jpg)
Elementos.chao, .tronco, .galho-direito, .galho-esquerdo, .timberman {
background: url(‘...’);position: absolute;
}
.timberman {z-index: 2;
}
![Page 32: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/32.jpg)
![Page 33: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/33.jpg)
bloco
bloco
bloco
![Page 34: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/34.jpg)
Como fazer ele viver?
![Page 35: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/35.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/36.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/37.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/38.jpg)
![Page 39: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/39.jpg)
Como movimentar para direita/esquerda?
![Page 40: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/40.jpg)
Pseudo-classes- Dinâmicas: mudam de acordo com o estado
- Estruturais: selecionar um elemento na estrutura
![Page 41: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/41.jpg)
Pseudo-classes
![Page 42: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/42.jpg)
Checkbox Hack
![Page 43: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/43.jpg)
MovimentaçãoInputs - Radio
<form><input type="radio" name="bloco1" value="esq" />
<input type="radio" name="bloco1" value="dir" />
</form>
![Page 44: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/44.jpg)
![Page 45: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/45.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/46.jpg)
<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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/47.jpg)
label label
![Page 48: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/48.jpg)
Movimentação
[value="dir"]:checked ~ .timberman {left: calc(100% - 200px);transform: scaleX(-1);
}
[value="esq"]:checked ~ .timberman {left: 50%;
}
![Page 49: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/49.jpg)
![Page 50: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/50.jpg)
Como movimentar para “cima”?
![Page 51: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/51.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/52.jpg)
Transition Árvore.sprite {
transition: transform 1s ease-in;}
:checked ~ .arvore .sprite {transform: translateY(190px);
}
![Page 53: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/53.jpg)
Transition Árvore.sprite {
transition: transform 1s ease-in;}
:checked ~ .arvore .sprite {transform: translateY(190px);
}
height de cada tronco
![Page 54: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/54.jpg)
![Page 55: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/55.jpg)
Como manter o estado do movimento?
![Page 56: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/56.jpg)
<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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/57.jpg)
Transition Árvore.sprite {
transition: transform 1s ease-in;}
:checked ~ .arvore .sprite {transform: translateY(190px);
}
![Page 58: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/58.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/59.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/60.jpg)
O que acontece agora?
![Page 61: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/61.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/62.jpg)
Movimentaçãolabel:nth-of-type(n+3) {
display: none;}
![Page 63: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/63.jpg)
Movimentação[id^="bloco1"]:checked ~ [for^="bloco2"]{
display: block;}
![Page 64: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/64.jpg)
Movimentação[id^="bloco1"]:checked ~ [for^="bloco2"]{
display: block;}
[id^="bloco2"]:checked ~ [for^="bloco3"]{display: block;
}
![Page 65: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/65.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/66.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/67.jpg)
Como o jogo acaba?
![Page 68: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/68.jpg)
Obstáculos
![Page 69: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/69.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/70.jpg)
Obstáculoslabel label input input
label label input input
...
div.arvore ...
div.sprite.troncodiv.sprite.galho-direitodiv.sprite.tronco
![Page 71: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/71.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/72.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/73.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/74.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/75.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/76.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/77.jpg)
![Page 78: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/78.jpg)
Tempo
![Page 79: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/79.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/80.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/81.jpg)
Tempo[name="bloco1"] + .progresso,[name="bloco1"] + .progresso + .morreu { animation-delay: 0;}
![Page 82: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/82.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/83.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/84.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/85.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/86.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/87.jpg)
![Page 88: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/88.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/89.jpg)
.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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/90.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/91.jpg)
Vencer
![Page 92: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/92.jpg)
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](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/93.jpg)
Vencer.venceu { display: none; background-color: green;}
![Page 94: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/94.jpg)
Vencer.venceu { display: none; background-color: green;}
[id^=”bloco12”]:checked ~ .venceu { display: block;}
![Page 95: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/95.jpg)
Vencer.venceu { display: none; background-color: green;}
[id^=”bloco12”]:checked ~ .venceu { display: block;}
EASY WIN!
![Page 96: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/96.jpg)
Vencer.venceu { display: none; background-color: green;}
:checked ~ :checked ~ ... ~ :checked ~ .venceu { display: block;}
![Page 97: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/97.jpg)
![Page 98: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/98.jpg)
Desafios
![Page 99: Jogos com css](https://reader031.vdocuments.net/reader031/viewer/2022021419/58a3d7a61a28ab7f0b8b4cd5/html5/thumbnails/99.jpg)
Desafios- Pontuação
- Rotate de cada bloco
- Animation timberman cortando
- Play do jogo
- Responsividade