Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Jogos com CSS

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for lewerton lewerton
January 16, 2018
Technology
40
0

Jogos com CSS

Avatar for lewerton

lewerton

January 16, 2018

Other Decks in Technology

See All in Technology
How to Design Configuration for Rails Applications
Avatar for Shinichi Maeshima willnet
1
780
[JAWS-UG彩の国埼玉#12]そろそろ準備する？re:Invent2026をやさしく解説 / reinvent2026-sainokuni
Avatar for sh_fk2 sh_fk2
1
340
サブエージェントと Claude Mods で作る独自 Advisor ツールの話
Avatar for Kenichi Odo kenichiodo
2
160
会社説明資料
Avatar for パーソル＆サーバーワークス株式会社 persolserverworks
0
9.8k
パッチ更新でterraform initが落ちた日
Avatar for gr1m0h grimoh
1
140
USB PDを使ってスマホを労わりたい
Avatar for らすぴー raspython3
0
180
スプシの手作業からの解脱 ~更新はClaude Codeに、見せ方と使い方はGASアプリに任せる~
Avatar for KentaroFujii kentarofujii
0
150
大型犬好きによるPugの紹介
Avatar for yamanoku yamanoku
1
160
アウトプット初心者、半年間のふりかえり
Avatar for aoi 4o1sobblue
0
430
Railsで挑む大量データ永続化 〜600億件を永続化するための設計とボトルネックとの戦い〜
Avatar for Shoichi Ochi occhi
1
580
AI導入は済んだ。次は統制を作り替える番だ_AI×開発組織 Summit 2026
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
220
フロントエンドカンファレンス関西2026 - 速すぎるUIに、待ち時間を
Avatar for teamLab teamlab
PRO
0
130

Featured

See All Featured
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
2
950
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
53
4k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
520
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
10
37k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
433
67k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
360
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
600
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
710
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k

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