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 2.0

257 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

Jogos com css 2.0

  1. 1. Jogos com CSS 2.0 @Feh_Bernardo
  2. 2. Repositório: http://bit.ly/2c2RsV1 Palestra: http://bit.ly/2cbNs6h
  3. 3. +
  4. 4. + +
  5. 5. + + X
  6. 6. Por que só CSS ?
  7. 7. Divertido
  8. 8. Desafio
  9. 9. Aprendizado
  10. 10. CSS Wee
  11. 11. Piano Tiles
  12. 12. Como representar os elementos do jogo ?
  13. 13. .piano
  14. 14. .piano .target-key
  15. 15. Como começar a interagir com o usuário?
  16. 16. Tecla D Tecla C Tecla B
  17. 17. <input>
  18. 18. <input> <label>
  19. 19. <input> <label>
  20. 20. <input> <label> D
  21. 21. <input> <label> C D
  22. 22. <input> <label> B C D
  23. 23. <input> <label> A B C D
  24. 24. Como marcar a pontuação?
  25. 25. https://fernandabernardo. github.io/piano-tiles/
  26. 26. fernanda.bernardo@elo7.com FernandaBernardo@Feh_Bernardo

×