Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Jogos com CSS
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
lewerton
January 16, 2018
Technology
0
38
Jogos com CSS
lewerton
January 16, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
外部キー制約の知っておいて欲しいこと - RDBMSを正しく使うために必要なこと / FOREIGN KEY Night
soudai
PRO
12
4.7k
Bill One急成長の舞台裏 開発組織が直面した失敗と教訓
sansantech
PRO
1
300
2人で作ったAIダッシュボードが、開発組織の次の一手を照らした話― Cursor × SpecKit × 可視化の実践 ― Qiita AI Summit
noalisaai
1
370
あたらしい上流工程の形。 0日導入からはじめるAI駆動PM
kumaiu
5
760
AIと新時代を切り拓く。これからのSREとメルカリIBISの挑戦
0gm
0
780
Mosaic AI Gatewayでコーディングエージェントを配るための運用Tips / JEDAI 2026 新春 Meetup! AIコーディング特集
genda
0
150
予期せぬコストの急増を障害のように扱う――「コスト版ポストモーテム」の導入とその後の改善
muziyoshiz
1
1.6k
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
1k
usermode linux without MMU - fosdem2026 kernel devroom
thehajime
0
220
10Xにおける品質保証活動の全体像と改善 #no_more_wait_for_test
nihonbuson
PRO
2
200
GitLab Duo Agent Platform × AGENTS.md で実現するSpec-Driven Development / GitLab Duo Agent Platform × AGENTS.md
n11sh1
0
120
Context Engineeringの取り組み
nutslove
0
290
Featured
See All Featured
Visualization
eitanlees
150
17k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
0
3.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.6k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
350
The Pragmatic Product Professional
lauravandoore
37
7.1k
Site-Speed That Sticks
csswizardry
13
1.1k
Between Models and Reality
mayunak
1
180
The Curse of the Amulet
leimatthew05
1
8.3k
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
88
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.3k
Practical Orchestrator
shlominoach
191
11k
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
110
Transcript
None
None
None
None
None
None
None
None
None
None
None
None
None
None
Vamos começar
Estrutura HTML
Iniciando o CSS
None
None
Meteoros
None
None
None
Escondendo nosso meteoro
Z-Index
None
Adicionando animação
None
None
None
Coin
None
None
Adicionando animação
None
None
None
Com isso temos
None
Adicionando um contador
None
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
None
None
Voltando pro nosso joguinho
None
Adicionando pontos
Vamos usar o seletor :checked nas coins
O que acontece se o cometa bater na nave?
None
None
None
Novamente será usado um seletor o :Hover, dessa vez para
apresentar o game over
None
Lembrando que só foram adicionados 1 cometa e 1 moeda,
para deixar o jogo mais competitivo é necessário adicionar mais elementos
Vamos jogar?
https://codepen.io/lewerton/pen/VydEOx
OBRIGADO https://github.com/lewerton @lewerton