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

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
0
38

Jogos com CSS

Avatar for lewerton

lewerton

January 16, 2018
Tweet

Other Decks in Technology

See All in Technology
プロダクト成長を支える開発基盤とスケールに伴う課題
Avatar for yuu26 yuu26
4
1.3k
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
Avatar for shibayu36 shibayu36
0
190
AzureでのIaC - Bicep? Terraform? それ早く言ってよ会議
Avatar for Toru Makabe torumakabe
1
440
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
Avatar for SansanTech sansantech
PRO
3
1.4k
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
360
Stately
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
1
110
2026年、サーバーレスの現在地 -「制約と戦う技術」から「当たり前の実行基盤」へ- /serverless2026
Avatar for Serverless Operations slsops
2
220
茨城の思い出を振り返る ～CDKのセキュリティを添えて～ / 20260201 Mitsutoshi Matsuo
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
210
GSIが複数キー対応したことで、俺達はいったい何が嬉しいのか？
Avatar for Makky12 smt7174
3
150
小さく始めるBCP ― 多プロダクト環境で始める最初の一歩
Avatar for kekke-n kekke_n
1
370
Webhook best practices for rock solid and resilient deployments
Avatar for Guillaume Laforge glaforge
1
270
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
6
68k

Featured

See All Featured
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
67
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
140
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
350
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.7k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon szymonslowik
1
910
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
32k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
3.9k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k

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