Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Jogos com css

485 views

Published on

Há quem pense que o CSS serve somente para aplicar estilos a determinados elementos, e realmente seu principal objetivo é esse! Mas alguém já pensou que seria possível capturar eventos, como um evento de clique por exemplo, e gerar algum tipo de animação com isso? E falar que com isso é possível criar um jogo? Neste talk explicarei como criar um jogo simples, sem uma linha de javascript, usando apenas HTML e CSS. Além de muitas de suas funcionalidades: pseudo-elementos, pseudo-classes, animations, entre outras.

Published in: Technology
  • Be the first to comment

Jogos com css

  1. 1. JOGOS: Indo Além do simples CSS Fernanda Bernardo
  2. 2. Sobre Desenvolvedora Full Stack
  3. 3. JOGOS
  4. 4. JOGOS
  5. 5. JOGOS +
  6. 6. JOGOS + +
  7. 7. JOGOS + + X
  8. 8. Por que só CSS?
  9. 9. Tchau!
  10. 10. Diversão
  11. 11. Diversão Desafio
  12. 12. Diversão Desafio Aprendizado
  13. 13. Como?
  14. 14. - Eventos - Animações - Condições
  15. 15. - Eventos - Animações - Condições ESTILOS
  16. 16. Inspiração Duck Hunt http://codepen.io/vaielab/full/yoKEF/ Maintaining CSS Style States http://dabblet.com/gist/2076449
  17. 17. VAMOS COMEÇAR?
  18. 18. Como representar com HTML e CSS???
  19. 19. Elementos
  20. 20. 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>
  21. 21. 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>
  22. 22. 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>
  23. 23. 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>
  24. 24. 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>
  25. 25. 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>
  26. 26. Elementos .chao, .tronco, .galho-direito, .galho-esquerdo, .timberman { background: url(‘...’); position: absolute; } .timberman { z-index: 2; }
  27. 27. bloco bloco bloco
  28. 28. Como fazer ele viver?
  29. 29. 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; } }
  30. 30. 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
  31. 31. 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; } }
  32. 32. Como movimentar para direita/esquerda?
  33. 33. Pseudo-classes - Dinâmicas: mudam de acordo com o estado - Estruturais: selecionar um elemento na estrutura
  34. 34. Pseudo-classes
  35. 35. Checkbox Hack
  36. 36. Movimentação Inputs - Radio <form> <input type="radio" name="bloco1" value="esq" /> <input type="radio" name="bloco1" value="dir" /> </form>
  37. 37. 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>
  38. 38. <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
  39. 39. label label
  40. 40. Movimentação [value="dir"]:checked ~ .timberman { left: calc(100% - 200px); transform: scaleX(-1); } [value="esq"]:checked ~ .timberman { left: 50%; }
  41. 41. Como movimentar para “cima”?
  42. 42. 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>
  43. 43. Transition Árvore .sprite { transition: transform 1s ease-in; } :checked ~ .arvore .sprite { transform: translateY(190px); }
  44. 44. Transition Árvore .sprite { transition: transform 1s ease-in; } :checked ~ .arvore .sprite { transform: translateY(190px); } height de cada tronco
  45. 45. Como manter o estado do movimento?
  46. 46. <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>
  47. 47. Transition Árvore .sprite { transition: transform 1s ease-in; } :checked ~ .arvore .sprite { transform: translateY(190px); }
  48. 48. Transition Árvore .sprite { transition: transform 1s ease-in; } :checked ~ .arvore .sprite { transform: translateY(190px); } :checked ~ :checked ~ .arvore .sprite { transform: translateY(380px); }
  49. 49. Transition Árvore .sprite { transition: transform 1s ease-in; } :checked ~ .arvore .sprite { transform: translateY(190px); } :checked ~ :checked ~ .arvore .sprite { transform: translateY(380px); } ...
  50. 50. O que acontece agora?
  51. 51. Labels <form> <label for="bloco1-esq"/> <label for="bloco2-esq"/> <label for="bloco3-esq"/> <label for="bloco4-esq"/> <label for="bloco5-esq"/> ... </form>
  52. 52. Movimentação label:nth-of-type(n+3) { display: none; }
  53. 53. Movimentação [id^="bloco1"]:checked ~ [for^="bloco2"]{ display: block; }
  54. 54. Movimentação [id^="bloco1"]:checked ~ [for^="bloco2"]{ display: block; } [id^="bloco2"]:checked ~ [for^="bloco3"]{ display: block; }
  55. 55. Movimentação [id^="bloco1"]:checked ~ [for^="bloco2"]{ display: block; } [id^="bloco2"]:checked ~ [for^="bloco3"]{ display: block; } [id^="bloco3"]:checked ~ [for^="bloco4"]{ display: block; }
  56. 56. Movimentação [id^="bloco1"]:checked ~ [for^="bloco2"]{ display: block; } [id^="bloco2"]:checked ~ [for^="bloco3"]{ display: block; } [id^="bloco3"]:checked ~ [for^="bloco4"]{ display: block; } ...
  57. 57. Como o jogo acaba?
  58. 58. Obstáculos
  59. 59. 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>
  60. 60. Obstáculos label label input input label label input input ... div.arvore ... div.sprite.tronco div.sprite.galho-direito div.sprite.tronco
  61. 61. Obstáculos label label input input label label input input ... div.arvore ... div.sprite.tronco div.sprite.galho-direito div.sprite.tronco 1 n
  62. 62. Obstáculos label label input input label label input input ... div.arvore ... div.sprite.tronco div.sprite.galho-direito div.sprite.tronco 1 n 1
  63. 63. Obstáculos label label input input label label input input ... div.arvore ... div.sprite.tronco div.sprite.galho-direito div.sprite.tronco 1 n 1 2
  64. 64. Obstáculos label label input input label label input input ... div.arvore … div.sprite.tronco div.sprite.tronco div.sprite.galho-direito div.sprite.tronco
  65. 65. Obstáculos label label input input label label input input ... div.arvore … div.sprite.tronco div.sprite.tronco div.sprite.galho-direito div.sprite.tronco 2
  66. 66. Obstáculos label label input input label label input input ... div.arvore … div.sprite.tronco div.sprite.tronco div.sprite.galho-direito div.sprite.tronco 2 mata 1 2
  67. 67. Tempo
  68. 68. 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>
  69. 69. Tempo .progresso { animation: preenche 5s; animation-timing-function: linear; animation-fill-mode: both; } @keyframes preenche { from { width: 0%; } to { width: 50%; } }
  70. 70. Tempo [name="bloco1"] + .progresso, [name="bloco1"] + .progresso + .morreu { animation-delay: 0; }
  71. 71. Tempo [name="bloco1"] + .progresso, [name="bloco1"] + .progresso + .morreu { animation-delay: 0; } [name="bloco2"] + .progresso, [name="bloco2"] + .progresso + .morreu { animation-delay: 0.5s; }
  72. 72. Tempo [name="bloco1"] + .progresso, [name="bloco1"] + .progresso + .morreu { animation-delay: 0; } [name="bloco2"] + .progresso, [name="bloco2"] + .progresso + .morreu { animation-delay: 0.5s; } ...
  73. 73. Tempo .vive:checked + .progresso, .vive:checked + input + .progresso, .vive:checked + .progresso + .morreu, .vive:checked + input + .progresso + .morreu { display: none; } input input .progresso .morreu
  74. 74. Tempo .vive:checked + .progresso, .vive:checked + input + .progresso, .vive:checked + .progresso + .morreu, .vive:checked + input + .progresso + .morreu { display: none; } input input .progresso .morreu
  75. 75. Tempo .vive:checked + .progresso, .vive:checked + input + .progresso, .vive:checked + .progresso + .morreu, .vive:checked + input + .progresso + .morreu { display: none; } input input .progresso .morreu
  76. 76. Tela Game Over .morreu { background: url(“gameover.png”); animation: morre 5s; animation-fill-mode: both; } @keyframes morre { 0%, 99% { visibility: hidden; } 100% { visibility: visible; } }
  77. 77. .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
  78. 78. Tela Game Over .mata:checked + .morreu, .mata:checked + input + .morreu { animation: none; visibility: visible; } .mata:checked ~ .timberman { background: url('rip.png'); }
  79. 79. Vencer
  80. 80. 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>
  81. 81. Vencer .venceu { display: none; background-color: green; }
  82. 82. Vencer .venceu { display: none; background-color: green; } [id^=”bloco12”]:checked ~ .venceu { display: block; }
  83. 83. Vencer .venceu { display: none; background-color: green; } [id^=”bloco12”]:checked ~ .venceu { display: block; } EASY WIN!
  84. 84. Vencer .venceu { display: none; background-color: green; } :checked ~ :checked ~ ... ~ :checked ~ .venceu { display: block; }
  85. 85. Desafios
  86. 86. Desafios - Pontuação - Rotate de cada bloco - Animation timberman cortando - Play do jogo - Responsividade
  87. 87. github.com/FernandaBernardo /timberman-css fernanda.bernardo@elo7.com

×