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
30万人の同時アクセスに耐えたい！新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
Avatar for GENDA genda
3
1k
ファインディの横断SREがTakumi byGMOと取り組む、セキュリティと開発スピードの両立
Avatar for adachi.ryo rvirus0817
1
1.2k
外部キー制約の知っておいて欲しいこと - RDBMSを正しく使うために必要なこと / FOREIGN KEY Night
Avatar for soudai sone soudai
PRO
12
5.1k
学生・新卒・ジュニアから目指すSRE
Avatar for Hiroya Onoe hiroyaonoe
2
580
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
Avatar for ないとー bwkw
3
900
2人で作ったAIダッシュボードが、開発組織の次の一手を照らした話― Cursor × SpecKit × 可視化の実践 ―　Qiita AI Summit
Avatar for NOBORU ITOU noalisaai
1
380
OCI Database Management サービス詳細
Avatar for oracle4engineer oracle4engineer
PRO
1
7.4k
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
Avatar for shibayu36 shibayu36
0
200
プロダクト成長を支える開発基盤とスケールに伴う課題
Avatar for yuu26 yuu26
4
1.3k
Oracle Cloud Observability and Management Platform - OCI 運用監視サービス概要 -
Avatar for oracle4engineer oracle4engineer
PRO
2
14k
Cosmos World Foundation Model Platform for Physical AI
Avatar for Takuya MINAGAWA takmin
0
650
usermode linux without MMU - fosdem2026 kernel devroom
Avatar for Hajime Tazaki thehajime
0
230

Featured

See All Featured
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
750
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.9k
Design in an AI World
Avatar for tapps tapps
0
140
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
210
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.3k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
84
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
300
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
2
250
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
96

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