Dia 9/2019 - Jogo de alvo

Desafio #92daysofcode que fiz no final de 2019. Nesse artigo temos o dia 9, mostrando o uso do seletor de irmãos seletor ~ seletor.

Pré-visualização

Código

Começamos com a estrutura do HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Day 9</title>
<style>
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; }
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
* { margin: 0; padding: 0; list-style: none; }
body { background: #eee; font-family: Arial, Helvetica, sans-serif; }
</style>
<link rel="stylesheet" type="text/css" href="./day-9.css">
</head>
<body>
<div class="container">
<!-- target game -->
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<main class="game">
<section class="game-row">
<div class="list">
<div class="item"><input type="checkbox" class="item-target" /><div class="item-image"></div></div>
<div class="item"><input type="checkbox" class="item-target" /><div class="item-image"></div></div>
<div class="item"><input type="checkbox" class="item-target" /><div class="item-image"></div></div>
<div class="item"><input type="checkbox" class="item-target" /><div class="item-image"></div></div>
<div class="item"><input type="checkbox" class="item-target" /><div class="item-image"></div></div>
<div class="item"><input type="checkbox" class="item-target" /><div class="item-image"></div></div>
<div class="item"><input type="checkbox" class="item-target" /><div class="item-image"></div></div>
<div class="item"><input type="checkbox" class="item-target" /><div class="item-image"></div></div>
<div class="item"><input type="checkbox" class="item-target" /><div class="item-image"></div></div>
<div class="item"><input type="checkbox" class="item-target" /><div class="item-image"></div></div>
<div class="item"><input type="checkbox" class="item-target" /><div class="item-image"></div></div>
<div class="item"><input type="checkbox" class="item-target" /><div class="item-image"></div></div>
<div class="item"><input type="checkbox" class="item-target" /><div class="item-image"></div></div>
<div class="item"><input type="checkbox" class="item-target" /><div class="item-image"></div></div>
<div class="item"><input type="checkbox" class="item-target" /><div class="item-image"></div></div>
</div>
</section>
</main>
<main class="gameOver">
<div class="gameOver-content">
<h1 class="gameOver-title">Total:</h1>
<p>Refresh page to play again</p>
</div>
</main>
<footer class="footer">
<h1 class="footer-scoreboard"> Hits: </h1>
<p>10 seconds to hit the targets.</p>
</footer>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
html, body { counter-reset: hit; }

.footer {
margin: 0 auto;
width: 992px;
height: 130px;
text-align: center;
background: rgba(255, 255, 255, 0.6);
}

.footer-scoreboard { font-size: 30px; font-weight: bold; padding: 20px; }

.footer-scoreboard::after { content: counter(hit); }

.game {
display: flex;
flex-direction: column;
margin: 20px auto;
width: 992px;
height: 300px;
overflow: hidden;
}

.game-row {
width: 1500px;
height: 180px;
border-bottom: 4px solid #000;
overflow: hidden;
perspective: 1000px;
}

.list {
display: flex;
flex-wrap: no-wrap;
margin-left: -4000px;
width: 5000px;
height: 200px;
transform-style: preserve-3d;
animation: move 18s linear forwards 1;
}

.item { height: 150px; margin-top: 50px; margin-right: 100px; width: 122.5px; }

.item-target { -webkit-appearance: none; appearance: none; height: 100%; width: 245px; }

.item-target:focus { -webkit-appearance: none; appearance: none; outline: none; }

.item-image {
background: url(target.png);
background-size: contain;
height: 150px;
margin-top: -150px;
transition: all .2s;
width: 111.5px;
}

.item-target:checked { counter-increment: hit; }

.item-target:checked:after {
animation: hit 2s forwards;
background: rgba(0, 0, 0, 0.6);
border-radius: 50%;
color: #fff;
content: "+1";
font-size: 30px;
height: 75px;
position: relative;
top: 80px;
left: 122.5px;
padding: 10px;
width: 75px;
z-index: 5;
}

.item-target:checked ~ .item-image { background: url(dead.png); background-size: contain; }

.item-target:checked ~ .item-image:after {
content: "";
height: inherit;
position: absolute;
top: 20;
left: 500;
width: inherit;
}

.gameOver {
animation: over 3s forwards 13s;
background: rgba(0, 0, 20, 0.6);
cursor: pointer;
height: 1000px;
position: absolute;
top: -2000px;
text-align: center;
width: 100%;
z-index: 5;
}

.gameOver-content {
align-items: center;
background: #fff;
display: flex;
flex-direction: column;
font-size: 30px;
height: 300px;
justify-content: center;
margin: 0 auto;
position: absolute;
top: 80px;
right: 0;
left: 0;
width: 600px;
}

.gameOver-title::after { content: counter(hit); }

@keyframes move {
0% { margin-left: -4000px; }
100% { margin-left: 2500px; }
}

@keyframes hit {
0% { top: 80px; }
100% { top: 10px; display: none; }
}

@keyframes over {
0% { top: -2000px; }
100% { top: 0; }
}

Conclusão

A postagem original pode ser vista no meu Instagram e o código está acessível no meu Github.

Ao fechar este aviso ou continuar navegando no site Nerd Calistênico, você aceita o uso de cookies.

Este site usa cookies para assegurar a melhor experiência para os nossos usuários. Consulte nossa política de privacidade.

Uma nova versão está disponível. Clique aqui para atualizar.