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

Jogos com CSS

Avatar for lewerton lewerton
January 16, 2018
Technology
0
38

Jogos com CSS

Avatar for lewerton

lewerton

January 16, 2018
Tweet

Other Decks in Technology

See All in Technology
What happened to RubyGems and what can we learn?
Avatar for Mike McQuaid mikemcquaid
0
250
Context Engineeringが企業で不可欠になる理由
Avatar for Hirosato Gamo hirosatogamo
PRO
3
530
なぜ今、コスト最適化（倹約）が必要なのか？ ～AWSでのコスト最適化の進め方「目的編」～
Avatar for Hayato Tan htan
1
110
【Oracle Cloud ウェビナー】[Oracle AI Database + AWS] Oracle Database@AWSで広がるクラウドの新たな選択肢とAI時代のデータ戦略
Avatar for oracle4engineer oracle4engineer
PRO
1
110
SREのプラクティスを用いた3領域同時 マネジメントへの挑戦 〜SRE・情シス・セキュリティを統合した チーム運営術〜
Avatar for coconala_engineer coconala_engineer
2
630
レガシー共有バッチ基盤への挑戦 - SREドリブンなリアーキテクチャリングの取り組み
Avatar for Konishi tatsuhiro tatsukoni
0
210
30万人の同時アクセスに耐えたい！新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
Avatar for GENDA genda
3
1.1k
AI駆動開発を事業のコアに置く
Avatar for 鬼澤輔 tasukuonizawa
1
120
Amazon S3 Vectorsを使って資格勉強用AIエージェントを構築してみた
Avatar for usanchuu usanchuu
3
440
ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07 Gifu WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
170
Codex 5.3 と Opus 4.6 にコーポレートサイトを作らせてみた / Codex 5.3 vs Opus 4.6
Avatar for ama-ch ama_ch
0
110
プロポーザルに込める段取り八分
Avatar for ShoheiMitani shoheimitani
1
190

Featured

See All Featured
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
320
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
270
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
770
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
140
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
2.7k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
1
4.7k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.5k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
47
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Done Done
Avatar for chrislema chrislema
186
16k

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