Successfully reported this slideshow.
Your SlideShare is downloading. ×

Jogos com css 2.0

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 67 Ad

Jogos com css 2.0

Download to read offline

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.

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.

Advertisement
Advertisement

More Related Content

More from Fernanda Bernardo (19)

Recently uploaded (20)

Advertisement

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

×