Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jogos com CSS

lewerton
January 16, 2018
Technology
0
24

Jogos com CSS

lewerton

January 16, 2018
Tweet

Other Decks in Technology

See All in Technology
最近たまに見かけるTiDBってなんだ？ - Findy
pingcap0315
2
600
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
24
5.2k
なぜ NOT A HOTEL が Web3 に取り組むのか - NOT A HOTEL TECH TALK
ynunokawa
0
160
LLM とプロンプトエンジニアリング／チューターをビルドする / LLM and Prompt Engineering and Building Tutors
ks91
PRO
0
220
人間の尊厳、幸福、アクセシビリティ / 第116回「WEB TOUCH MEETING」アクセシビリティSP
nulabinc
PRO
2
180
シン・Kafka / shin-kafka
oracle4engineer
PRO
7
2.7k
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
3
240
SPI原点回帰論：事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
1.6k
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
670
Algyan イベント振り返り
linyixian
0
190
Terraformあれやこれ/terraform-this-and-that
emiki
4
460
入社後初めてのタスクでk8sアップグレードした話.pdf
kkato1
1
380

Featured

See All Featured
Debugging Ruby Performance
tmm1
70
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
How STYLIGHT went responsive
nonsquared
92
4.8k
Building Adaptive Systems
keathley
30
1.8k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
186
16k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Into the Great Unknown - MozCon
thekraken
10
980
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
220
21k
Designing for humans not robots
tammielis
247
25k
What's in a price? How to price your products and services
michaelherold
237
11k

Transcript

  1. None
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None

  15. Vamos começar

  16. Estrutura HTML

  17. Iniciando o CSS

  18. None
  19. None

  20. Meteoros

  21. None
  22. None
  23. None

  24. Escondendo nosso meteoro

  25. Z-Index

  26. None

  27. Adicionando animação

  28. None
  29. None
  30. None

  31. Coin

  32. None
  33. None

  34. Adicionando animação

  35. None
  36. None
  37. None

  38. Com isso temos

  39. None

  40. Adicionando um contador

  41. None

  42. Contadores com CSS O valor de um contador é manipulado

    através da utilização de counter-reset. counter-increment pode ser exibido em uma página usando o counter() ou counters() função da propriedade de conteúdo
  43. None
  44. None

  45. Voltando pro nosso joguinho

  46. None

  47. Adicionando pontos

  48. Vamos usar o seletor :checked nas coins

  49. O que acontece se o cometa bater na nave?

  50. None
  51. None
  52. None

  53. Novamente será usado um seletor o :Hover, dessa vez para

    apresentar o game over
  54. None

  55. Lembrando que só foram adicionados 1 cometa e 1 moeda,

    para deixar o jogo mais competitivo é necessário adicionar mais elementos

  56. Vamos jogar?

  57. https://codepen.io/lewerton/pen/VydEOx

  58. OBRIGADO https://github.com/lewerton @lewerton