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

Jogos com CSS

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
Codex 5.3 と Opus 4.6 にコーポレートサイトを作らせてみた / Codex 5.3 vs Opus 4.6
Avatar for ama-ch ama_ch
0
120
20260208_第66回 コンピュータビジョン勉強会
Avatar for KeiichiIto1978 keiichiito1978
0
110
データ民主化のための LLM 活用状況と課題紹介（IVRy の場合）
Avatar for 和田 悠佑 wxyzzz
2
700
20260204_Midosuji_Tech
Avatar for Takuya Yonezawa takuyay0ne
1
140
Amazon S3 Vectorsを使って資格勉強用AIエージェントを構築してみた
Avatar for usanchuu usanchuu
3
450
ファインディの横断SREがTakumi byGMOと取り組む、セキュリティと開発スピードの両立
Avatar for adachi.ryo rvirus0817
1
1.3k
Azure Durable Functions で作った NL2SQL Agent の精度向上に取り組んだ話/jat08
Avatar for TonyTonyKun thara0402
0
170
10Xにおける品質保証活動の全体像と改善 #no_more_wait_for_test
Avatar for nihonbuson nihonbuson
PRO
2
230
30万人の同時アクセスに耐えたい！新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
Avatar for GENDA genda
3
1.2k
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
42k
マーケットプレイス版Oracle WebCenter Content For OCI
Avatar for oracle4engineer oracle4engineer
PRO
5
1.6k

Featured

See All Featured
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.1k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
0
270
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
1.9k
Visualization
Avatar for Eitan Lees eitanlees
150
17k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
92
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
1
740
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.6k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k

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