Dia 69/2019 - Mo.js

Desafio #92daysofcode que fiz no final de 2019. Nesse artigo temos o dia 69, mostrando o uso do Motion JS.

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
22
23
24
25
26
<!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 69</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; font-size: 62.5%; }
* { margin: 0; padding: 0; list-style: none; outline: none; }
body { background: #000; color: #fff; font-family: Arial, Helvetica, sans-serif; }

.container { margin: 60px auto; max-width: 992px; width: 100%; }
</style>
<link rel="stylesheet" type="text/css" href="./day-69.css">
</head>
<body>
<div class="container">
<div class="game"></div>
<div class="end"></div>
</div>
<script src="./node_modules/@mojs/core/build/mo.min.js"></script>
<script src="./day.js"></script>
</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
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
:root {
--blue: #5dbdc1;
--red: #ff9292;
}

body { height: 100vh; }

.game {
display: flex;
flex-direction: row;
flex-flow: wrap row;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 510px;
height: 210px;
border-radius: 9px;
background-color: #333;
padding: 5px;
}

.item {
height: 100px;
width: 100px;
margin: 0;
padding: 0px;
text-align: center;
border-radius: 9px;
border: 4px solid #333;
background-color: #000;
background-position: center;
background-size: 70%;
background-repeat: no-repeat;
cursor: pointer;
}

.blue,
.red { animation-name: getIn; animation-duration: 0.3s; animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.blue { background-color: var(--blue); }
.red { background-color: var(--red); }

.running {
background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjUxMnB0IiB2aWV3Qm94PSIwIC01NSA1MTIgNTEyIiB3aWR0aD0iNTEycHQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTMwOS4xNzU3ODEgMTUyLjI1LTEyLjk5NjA5My0yMy42MzY3MTljLjQyOTY4Ny00LjgzMjAzMSAxLjI5Mjk2OC0xMC4zNDM3NSAyLjg3MTA5My0xNi4xOTUzMTIgNC42ODc1LTE3LjM4MjgxMyAxNi42NTIzNDQtNDEuMzc1IDQ3LjA2MjUtNTYuOTE3OTY5IDEwLjIzMDQ2OS01LjIzMDQ2OSAyMi43NDYwOTQtMS4xNzU3ODEgMjcuOTc2NTYzIDkuMDU0Njg4IDUuMjI2NTYyIDEwLjIxODc1IDEuMTcxODc1IDIyLjc0NjA5My05LjA0Njg3NSAyNy45NzY1NjItMjMuMzA0Njg4IDExLjkwMjM0NC0yNy4yODkwNjMgMzEuOTg4MjgxLTI3LjcxNDg0NCA0Mi4xNTIzNDR6bTAgMCIgZmlsbD0iIzQyOTdkMCIvPjxwYXRoIGQ9Im0zNzAuOTM3NSA2MC4wMTE3MTljLTIuODk4NDM4LjEyNS01LjgyMDMxMi44NjMyODEtOC41NzQyMTkgMi4yNjU2MjUtMzAuNDEwMTU2IDE1LjU0Mjk2OC00Mi4zNzUgMzkuNTM1MTU2LTQ3LjA2MjUgNTYuOTE3OTY4LTEuNTgyMDMxIDUuODUxNTYzLTIuNDQ1MzEyIDExLjM2MzI4Mi0yLjg3MTA5MyAxNi4xOTUzMTNsNi4wNzAzMTIgMTEuMDQyOTY5LTkuMzI0MjE5IDUuODIwMzEyLTEyLjk5NjA5My0yMy42NDA2MjVjLjQyOTY4Ny00LjgzMjAzMSAxLjI5Mjk2OC0xMC4zNDM3NSAyLjg3MTA5My0xNi4xOTUzMTIgNC42ODc1LTE3LjM4MjgxMyAxNi42NTIzNDQtNDEuMzc1IDQ3LjA2MjUtNTYuOTE3OTY5IDguNTQ2ODc1LTQuMzY3MTg4IDE4LjY3MTg3NS0yLjI1NzgxMiAyNC44MjQyMTkgNC41MTE3MTl6bTAgMCIgZmlsbD0iIzE4NzZhOSIvPjxwYXRoIGQ9Im01MTAuMTA5Mzc1IDMyMy44Mzk4NDQtOC45MjE4NzUgMjUuOTc2NTYyYy0xMS45MzM1OTQgMzIuOTQ1MzEzLTQ2Ljc1IDUyLjYwNTQ2OS04Mi44MDA3ODEgNTAuMjk2ODc1bC0xMjkuOTkyMTg4IDEuMTUyMzQ0Yy0yNy42NTIzNDMtMS43NjU2MjUtNTMuOTQ1MzEyLTEyLjI1MzkwNi03NC44MjAzMTItMjkuODY3MTg3bC0xMDUuNjQwNjI1LTgyLjcxODc1Yy05LjUzNTE1Ni03LjQ2NDg0NC0xNS4wMzEyNS0xOC44NTkzNzYtMTUuMDMxMjUtMzAuODM1OTM4IDAtMS4xMjEwOTQuMDUwNzgxLTIuMjUzOTA2LjE0NDUzMS0zLjM4NjcxOS4wNzAzMTMtLjgzMjAzMS4xMDE1NjMtMS42NTIzNDMuMTAxNTYzLTIuNDc2NTYyIDAtMTQuNTYyNS0xMS4wODIwMzItMjcuMTQwNjI1LTI2LjI2OTUzMi0yOS4yMzA0NjktMTAuMTEzMjgxLTEuNDA2MjUtMTkuMzM1OTM3LTYuNTcwMzEyLTI1Ljc5Mjk2OC0xNC40ODQzNzVsLTMxLjczODI4Mi0zOC44OTg0MzdjLTEzLjI5Njg3NS0xNi4yNjk1MzItMTEuMzcxMDk0LTM5LjY5MTQwNyA0LjQxNzk2OS01My43MzgyODJsNDUuMjAzMTI1LTM2LjI5Mjk2OCAzOS40NzI2NTYgMjEuMzk4NDM3em0wIDAiIGZpbGw9IiNlNWU1ZTUiLz48cGF0aCBkPSJtNDE4LjM4NjcxOSA0MDAuMTEzMjgxLTEyOS45OTIxODggMS4xNTIzNDRjLTI3LjY1MjM0My0xLjc2NTYyNS01My45NDUzMTItMTIuMjUzOTA2LTc0LjgyMDMxMi0yOS44NjcxODdsLTEwNS42NDA2MjUtODIuNzE4NzVjLTkuNTM1MTU2LTcuNDY0ODQ0LTE1LjAzMTI1LTE4Ljg1OTM3Ni0xNS4wMzEyNS0zMC44MzU5MzggMC0xLjEyMTA5NC4wNTA3ODEtMi4yNTM5MDYuMTQ0NTMxLTMuMzg2NzE5LjA3MDMxMy0uODMyMDMxLjEwMTU2My0xLjY1MjM0My4xMDE1NjMtMi40NzY1NjIgMC0xNC41NjI1LTExLjA4MjAzMi0yNy4xNDA2MjUtMjYuMjY5NTMyLTI5LjIzMDQ2OS0xMC4xMTMyODEtMS40MDYyNS0xOS4zMzU5MzctNi41NzAzMTItMjUuNzkyOTY4LTE0LjQ4NDM3NWwtMzEuNzM4MjgyLTM4Ljg5ODQzN2MtMTMuMjk2ODc1LTE2LjI2OTUzMi0xMS4zNzEwOTQtMzkuNjkxNDA3IDQuNDE3OTY5LTUzLjczODI4Mmw0NS4yMDMxMjUtMzYuMjkyOTY4IDM5LjQ3MjY1NiAyMS4zOTg0MzctMjkuNDcyNjU2IDU2LjEwNTQ2OXMtMjguMDM1MTU2IDExLjY3MTg3NS02LjM2MzI4MSAzMy4zNDc2NTZjMTUuMjczNDM3IDE1LjI3MzQzOCA5NC4xMTcxODcgOTQuMTE3MTg4IDEzOS4zNTU0NjkgMTM5LjM1NTQ2OSAyMC44OTg0MzcgMjAuODk4NDM3IDQ3LjQyOTY4NyAzNS4yNDIxODcgNzYuMzU1NDY4IDQxLjI4OTA2MnptMCAwIiBmaWxsPSIjY2JjYmNiIi8+PHBhdGggZD0ibTUxMiAzMTEuMDMxMjVjMCAxMS45NDUzMTItNS4wMTE3MTkgMjIuNzQ2MDk0LTEzLjEwOTM3NSAzMC41NzQyMTktOC4wOTc2NTYgNy44MTY0MDYtMTkuMjg1MTU2IDEyLjY2MDE1Ni0zMS42NDQ1MzEgMTIuNjYwMTU2aC0xMjIuOTI5Njg4Yy00NS44Nzg5MDYgMC04OS44NzUtMTcuNjUyMzQ0LTEyMi4yNjk1MzEtNDkuMDQ2ODc1bC0xMTAuNDY0ODQ0LTEwNy4wNjY0MDZ2LS4wMTE3MTlsLTU2Ljk4ODI4MS01NS4yMzA0NjljLTguMTcxODc1LTcuOTE0MDYyLTEyLjQ3NjU2Mi0xOC4xNDA2MjUtMTIuODgyODEyLTI4LjQ5NjA5NC0uNTM5MDYzLTEzLjY1MjM0MyA2LjEyNS0yNi42NDQ1MzEgMTcuMjU3ODEyLTM1LjA3ODEyNGwxMDEuNDcyNjU2LTc2Ljc3MzQzOGM1Ljk4ODI4Mi01Ljc3NzM0NCAxNi4xNzU3ODItMS4wNzgxMjUgMTUuMjgxMjUgNy4wNTg1OTQtLjQxNDA2MiAzLjgxNjQwNi0uNjIxMDk0IDcuNjAxNTYyLS42MjEwOTQgMTEuMzU1NDY4IDAgMjIuMTgzNTk0IDcuMTgzNTk0IDQzLjA3ODEyNiAxOS41OTM3NSA2MC4zNDc2NTcgMTcuNjQ0NTMyIDI0LjU1NDY4NyA0NS44NTkzNzYgNDEuNzg5MDYyIDc5LjA1MDc4MiA0NS4wNzQyMTlsNTIuNDQ5MjE4IDUuMTg3NWMxMi4zMjgxMjYgMS4yMTg3NSAyMi44NzEwOTQgOS4wOTc2NTYgMjcuMTgzNTk0IDIwLjMyNDIxOGwzNiA5My44MDQ2ODggMS40MDYyNSAxLjM1MTU2MmM3LjczNDM3NSAzLjM5ODQzOCAyMi43OTY4NzUgNy40OTIxODggNjQuMjc3MzQ0IDE0LjU2MjUgMjcuMzM5ODQ0IDQuNjY3OTY5IDUzLjU0Njg3NSAxNS42NzU3ODIgNTYuOTM3NSA0OS40MDIzNDR6bTAgMCIgZmlsbD0iIzQyOTdkMCIvPjxwYXRoIGQ9Im0xMTEuNTgyMDMxIDE5OC4xNDA2MjUtNTYuOTg4MjgxLTU1LjIzMDQ2OWMtOC4xNzE4NzUtNy45MTQwNjItMTIuNDc2NTYyLTE4LjE0MDYyNS0xMi44ODI4MTItMjguNDk2MDk0LS41MzkwNjMtMTMuNjUyMzQzIDYuMTI1LTI2LjY0NDUzMSAxNy4yNTc4MTItMzUuMDc4MTI0bDEwMS40NzI2NTYtNzYuNzczNDM4YzUuOTg4MjgyLTUuNzc3MzQ0IDE2LjE3NTc4Mi0xLjA3ODEyNSAxNS4yODEyNSA3LjA1ODU5NC0uNDE0MDYyIDMuODE2NDA2LS42MjEwOTQgNy42MDE1NjItLjYyMTA5NCAxMS4zNTU0NjggMCAyMi4xODM1OTQgNy4xODM1OTQgNDMuMDc4MTI2IDE5LjU5Mzc1IDYwLjM0NzY1NyAwIDAtOTIuMzg2NzE4IDUyLjk3NjU2Mi04My4xMTMyODEgMTE2LjgxNjQwNnptMCAwIiBmaWxsPSIjMTg3NmE5Ii8+PHBhdGggZD0ibTM0Mi41MDc4MTIgMjA5LjE5OTIxOS0xNTMuODcxMDkzIDYzLjYzMjgxMi0xMzQuMDQyOTY5LTEyOS45Mjk2ODdjLTguMTc5Njg4LTcuOTEwMTU2LTEyLjQ3NjU2Mi0xOC4xNDA2MjUtMTIuODc4OTA2LTI4LjQ5MjE4OC0uMDU0Njg4LTEuMzEyNS0uMDQyOTY5LTIuNjIxMDk0LjAzOTA2Mi0zLjkyMTg3NWwyNjAuNjQ4NDM4IDU1Ljc2NTYyNXptMCAwIiBmaWxsPSIjZjJmMmYyIi8+PHBhdGggZD0ibTQ1NS4wNTg1OTQgMjYxLjYzMjgxMmMtMTIuNTM5MDYzIDI1LjAwMzkwNy00MC4yNzM0MzggMzguNDk2MDk0LTY3LjY3NTc4MiAzMi45Mzc1bC0yNy4yNjk1MzEtNS41MzEyNWMtMTIuMjE0ODQzLTIuNDg0Mzc0LTIyLjEyMTA5My0xMS4zNjMyODEtMjUuOTE3OTY5LTIzLjIzNDM3NGwtNDQuMDAzOTA2LTEzNy43NzczNDQgMzYgMy41NjY0MDZjMTIuMzM5ODQ0IDEuMjE0ODQ0IDIyLjg3MTA5NCA5LjA5Mzc1IDI3LjE4MzU5NCAyMC4zMjQyMTlsMzYuMDAzOTA2IDkzLjgwMDc4MSAxLjQwMjM0NCAxLjM1MTU2MmM3LjczNDM3NSAzLjM5ODQzOCAyMi43OTY4NzUgNy40OTYwOTQgNjQuMjc3MzQ0IDE0LjU2MjV6bTAgMCIgZmlsbD0iI2ZjYjUyZiIvPjxwYXRoIGQ9Im0xMzUuMjEwOTM4IDIyMS4wNDI5NjktMjMuNjI4OTA3LTIyLjkwMjM0NC01Ni45ODA0NjktNTUuMjMwNDY5Yy04LjE3OTY4Ny03LjkxNDA2Mi0xMi40NzI2NTYtMTguMTQwNjI1LTEyLjg5MDYyNC0yOC40OTYwOTQtLjUzMTI1LTEzLjY1MjM0MyA2LjEyNS0yNi42NDQ1MzEgMTcuMjU3ODEyLTM1LjA3ODEyNGw3Ni4yNDIxODgtNTcuNjc1NzgyczIxLjMwMDc4MSAzNS45ODA0NjkgMzAuNzkyOTY4IDc5Ljc0NjA5NGM4LjgzNTkzOCA0MC43MDMxMjUgNy40NTMxMjUgODguMTQ4NDM4LTMwLjc5Mjk2OCAxMTkuNjM2NzE5em0wIDAiIGZpbGw9IiNmY2I1MmYiLz48cGF0aCBkPSJtMTExLjU4MjAzMSAxOTguMTQwNjI1LTU2Ljk4MDQ2OS01NS4yMzA0NjljLTguMTc5Njg3LTcuOTE0MDYyLTEyLjQ3MjY1Ni0xOC4xNDA2MjUtMTIuODkwNjI0LTI4LjQ5NjA5NC0uNTMxMjUtMTMuNjUyMzQzIDYuMTI1LTI2LjY0NDUzMSAxNy4yNTc4MTItMzUuMDc4MTI0bDc2LjI0MjE4OC01Ny42NzU3ODJzMjEuMzAwNzgxIDM1Ljk4MDQ2OSAzMC43OTI5NjggNzkuNzQ2MDk0Yy0yNi4yNTc4MTIgMjEuMTM2NzE5LTYwLjIyMjY1NiA1Ni44MDQ2ODgtNTQuNDIxODc1IDk2LjczNDM3NXptMCAwIiBmaWxsPSIjZjk5ODMwIi8+PGcgZmlsbD0iI2U1ZTVlNSI+PHBhdGggZD0ibTM0MS44NjcxODggMTc3Ljc3MzQzOGMtNy4wNTQ2ODggMC0xMy40NDkyMTktNC44MTY0MDctMTUuMTU2MjUtMTEuOTgwNDY5LTEuOTk2MDk0LTguMzc1IDMuMTc1NzgxLTE2Ljc4NTE1NyAxMS41NTA3ODEtMTguNzg1MTU3bDI5LjMzMjAzMS02Ljk5MjE4N2M4LjM3ODkwNi0yIDE2Ljc4OTA2MiAzLjE3MTg3NSAxOC43ODUxNTYgMTEuNTUwNzgxIDIgOC4zNzUtMy4xNzE4NzUgMTYuNzg1MTU2LTExLjU1MDc4MSAxOC43ODUxNTZsLTI5LjMzMjAzMSA2Ljk5NjA5NGMtMS4yMTQ4NDQuMjg5MDYzLTIuNDMzNTk0LjQyNTc4Mi0zLjYyODkwNi40MjU3ODJ6bTAgMCIvPjxwYXRoIGQ9Im0zNTkuMDgyMDMxIDIzMS44Mzk4NDRjLTcuMDUwNzgxIDAtMTMuNDQ1MzEyLTQuODIwMzEzLTE1LjE1MjM0My0xMS45ODA0NjktMi04LjM3ODkwNiAzLjE3NTc4MS0xNi43ODkwNjMgMTEuNTUwNzgxLTE4Ljc4NTE1NmwyOS4zMzIwMzEtNi45OTYwOTRjOC4zNzUtMiAxNi43ODkwNjIgMy4xNzE4NzUgMTguNzg1MTU2IDExLjU1MDc4MSAyIDguMzc4OTA2LTMuMTc1NzgxIDE2Ljc4OTA2My0xMS41NTA3ODEgMTguNzg1MTU2bC0yOS4zMzIwMzEgNi45OTYwOTRjLTEuMjE0ODQ0LjI4OTA2My0yLjQzMzU5NC40Mjk2ODgtMy42MzI4MTMuNDI5Njg4em0wIDAiLz48cGF0aCBkPSJtMTM4LjI1NzgxMiAzODIuMjMwNDY5aC05Ny41NDI5NjhjLTQuMzA4NTk0IDAtNy43OTY4NzUtMy40OTIxODgtNy43OTY4NzUtNy43OTY4NzUgMC00LjMwODU5NCAzLjQ4ODI4MS03Ljc5Njg3NSA3Ljc5Njg3NS03Ljc5Njg3NWg5Ny41NDI5NjhjNC4zMDQ2ODggMCA3Ljc5Njg3NiAzLjQ4ODI4MSA3Ljc5Njg3NiA3Ljc5Njg3NSAwIDQuMzA0Njg3LTMuNDkyMTg4IDcuNzk2ODc1LTcuNzk2ODc2IDcuNzk2ODc1em0wIDAiLz48cGF0aCBkPSJtNTkuNjc5Njg4IDMwNy43MTQ4NDRoLTUxLjg4MjgxM2MtNC4zMDg1OTQgMC03Ljc5Njg3NS0zLjQ4ODI4Mi03Ljc5Njg3NS03Ljc5Njg3NSAwLTQuMzA0Njg4IDMuNDg4MjgxLTcuNzk2ODc1IDcuNzk2ODc1LTcuNzk2ODc1aDUxLjg4MjgxM2M0LjMwODU5MyAwIDcuNzk2ODc0IDMuNDkyMTg3IDcuNzk2ODc0IDcuNzk2ODc1IDAgNC4zMDg1OTMtMy40ODgyODEgNy43OTY4NzUtNy43OTY4NzQgNy43OTY4NzV6bTAgMCIvPjwvZz48L3N2Zz4=');
}

.hamburguer {
background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iQ2FwYV8xIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTI1NiA4OGMtMjYuNjkgMC01Mi4zOTMgMS42ODYtNzYuNDgzIDQuODA3LTk5LjUzOSAxMi44OTUtMTMzLjUxNyA1MC4yODItMTMzLjUxNyA5NC4zOTN2MTIuOGMwIDQuNDE4IDMuNTgyIDggOCA4aDQ0MmM0LjQxOCAwIDgtMy41ODIgOC04di0xMi44YzAtNTQuNzg3LTExMS4wMzMtOTkuMi0yNDgtOTkuMnoiIGZpbGw9IiNmZmQ5N2QiLz48cGF0aCBkPSJtMTY4IDIwMGMtMTMuMjU1IDAtMjQtMTAuNzQ1LTI0LTI0di0zMmMwLTE4LjcyMiAxMi45ODEtMzYuMjUzIDM1LjUxOC01MS4xOTQtOTkuNTI4IDEyLjg5OC0xNzEuNTE4IDUwLjI4Ni0xNzEuNTE4IDk0LjM5NHYyMC44YzAgNC40MTggMy41ODIgOCA4IDhoMTZsMTMgMTMuNWg0MjAuNWwxNC41LTEzLjVoMTZjNC40MTggMCA4LTMuNTgyIDgtOHYtOHoiIGZpbGw9IiNmZmMyNjkiLz48cGF0aCBkPSJtMTIwIDE2MGMtMi4wNDcgMC00LjA5NC0uNzgxLTUuNjU2LTIuMzQ0LTMuMTI1LTMuMTI1LTMuMTI1LTguMTg4IDAtMTEuMzEzbDgtOGMzLjEyNS0zLjEyNSA4LjE4OC0zLjEyNSAxMS4zMTMgMHMzLjEyNSA4LjE4OCAwIDExLjMxM2wtOCA4Yy0xLjU2MyAxLjU2My0zLjYxIDIuMzQ0LTUuNjU3IDIuMzQ0eiIgZmlsbD0iI2Y5ZWFjNyIvPjxwYXRoIGQ9Im0yMjQgMTQ0Yy0yLjA0NyAwLTQuMDk0LS43ODEtNS42NTYtMi4zNDRsLTgtOGMtMy4xMjUtMy4xMjUtMy4xMjUtOC4xODggMC0xMS4zMTNzOC4xODgtMy4xMjUgMTEuMzEzIDBsOCA4YzMuMTI1IDMuMTI1IDMuMTI1IDguMTg4IDAgMTEuMzEzLTEuNTYzIDEuNTYzLTMuNjEgMi4zNDQtNS42NTcgMi4zNDR6IiBmaWxsPSIjZWNiZDgzIi8+PHBhdGggZD0ibTMzNiAxODRjLTIuMDQ3IDAtNC4wOTQtLjc4MS01LjY1Ni0yLjM0NGwtOC04Yy0zLjEyNS0zLjEyNS0zLjEyNS04LjE4OCAwLTExLjMxM3M4LjE4OC0zLjEyNSAxMS4zMTMgMGw4IDhjMy4xMjUgMy4xMjUgMy4xMjUgOC4xODggMCAxMS4zMTMtMS41NjMgMS41NjMtMy42MSAyLjM0NC01LjY1NyAyLjM0NHoiIGZpbGw9IiNlY2JkODMiLz48cGF0aCBkPSJtMzg0IDE2OGMtMi4wNDcgMC00LjA5NC0uNzgxLTUuNjU2LTIuMzQ0LTMuMTI1LTMuMTI1LTMuMTI1LTguMTg4IDAtMTEuMzEzbDgtOGMzLjEyNS0zLjEyNSA4LjE4OC0zLjEyNSAxMS4zMTMgMHMzLjEyNSA4LjE4OCAwIDExLjMxM2wtOCA4Yy0xLjU2MyAxLjU2My0zLjYxIDIuMzQ0LTUuNjU3IDIuMzQ0eiIgZmlsbD0iI2Y5ZWFjNyIvPjxwYXRoIGQ9Im0zMDQgMTQ0Yy00LjQyMiAwLTgtMy41ODItOC04di04YzAtNC40MTggMy41NzgtOCA4LThzOCAzLjU4MiA4IDh2OGMwIDQuNDE4LTMuNTc4IDgtOCA4eiIgZmlsbD0iI2Y5ZWFjNyIvPjxwYXRoIGQ9Im0xODQgMTg0aC04Yy00LjQyMiAwLTgtMy41ODItOC04czMuNTc4LTggOC04aDhjNC40MjIgMCA4IDMuNTgyIDggOHMtMy41NzggOC04IDh6IiBmaWxsPSIjZWNiZDgzIi8+PHBhdGggZD0ibTI1NiAxODRjLTIuMDQ3IDAtNC4wOTQtLjc4MS01LjY1Ni0yLjM0NC0zLjEyNS0zLjEyNS0zLjEyNS04LjE4OCAwLTExLjMxM2w4LThjMy4xMjUtMy4xMjUgOC4xODgtMy4xMjUgMTEuMzEzIDBzMy4xMjUgOC4xODggMCAxMS4zMTNsLTggOGMtMS41NjMgMS41NjMtMy42MSAyLjM0NC01LjY1NyAyLjM0NHoiIGZpbGw9IiNmOWVhYzciLz48cGF0aCBkPSJtNDMyIDE4NGgtOGMtNC40MjIgMC04LTMuNTgyLTgtOHMzLjU3OC04IDgtOGg4YzQuNDIyIDAgOCAzLjU4MiA4IDhzLTMuNTc4IDgtOCA4eiIgZmlsbD0iI2VjYmQ4MyIvPjxwYXRoIGQ9Im04MCAxODRjLTIuMDQ3IDAtNC4wOTQtLjc4MS01LjY1Ni0yLjM0NGwtOC04Yy0zLjEyNS0zLjEyNS0zLjEyNS04LjE4OCAwLTExLjMxM3M4LjE4OC0zLjEyNSAxMS4zMTMgMGw4IDhjMy4xMjUgMy4xMjUgMy4xMjUgOC4xODggMCAxMS4zMTMtMS41NjMgMS41NjMtMy42MSAyLjM0NC01LjY1NyAyLjM0NHoiIGZpbGw9IiNmZmQ5N2QiLz48cGF0aCBkPSJtMTY4LjA3OCAxNDRjLTQuNDIyIDAtOC4wMzktMy41ODItOC4wMzktOHMzLjUzOS04IDcuOTYxLThoLjA3OGM0LjQyMiAwIDggMy41ODIgOCA4cy0zLjU3OCA4LTggOHoiIGZpbGw9IiNmOWVhYzciLz48cGF0aCBkPSJtMzUyIDE0NGMtNC40MjIgMC04LjAzOS0zLjU4Mi04LjAzOS04czMuNTM5LTggNy45NjEtOGguMDc4YzQuNDIyIDAgOCAzLjU4MiA4IDhzLTMuNTc4IDgtOCA4eiIgZmlsbD0iI2VjYmQ4MyIvPjxwYXRoIGQ9Im0yNjQuMDc4IDEyOGMtNC40MjIgMC04LjAzOS0zLjU4Mi04LjAzOS04czMuNTM5LTggNy45NjEtOGguMDc4YzQuNDIyIDAgOCAzLjU4MiA4IDhzLTMuNTc4IDgtOCA4eiIgZmlsbD0iI2Y5ZWFjNyIvPjxwYXRoIGQ9Im00NDUgMjg4aC0zNzQuNjY3bC0zMC4zMzMtMjR2LTI0aDQzMnYyNC4zMzN6IiBmaWxsPSIjOTVkNmE0Ii8+PHBhdGggZD0ibTkwLjYyNCAyODhoMTY1LjMxOWMtNDEuMzM3IDAtNDEuMzM3LTMyLTgyLjY3NC0zMi00MS4zMjMgMC00MS4zMjMgMzItODIuNjQ1IDMyeiIgZmlsbD0iIzc4YzJhNCIvPjxwYXRoIGQ9Im0yNTUuOTQzIDI4OGgxNjUuMzUzYy00MS4zNTIgMC00MS4zNTItMzItODIuNzA1LTMyLTQxLjMyNCAwLTQxLjMyNCAzMi04Mi42NDggMzJ6IiBmaWxsPSIjNzhjMmE0Ii8+PHBhdGggZD0ibTE3NiAyNDhoLTE0NGMtNC40MTggMC04LTMuNTgyLTgtOHYtMTZjMC00LjQxOCAzLjU4Mi04IDgtOGgxNDRjNC40MTggMCA4IDMuNTgyIDggOHYxNmMwIDQuNDE4LTMuNTgyIDgtOCA4eiIgZmlsbD0iI2RiNDY1NSIvPjxwYXRoIGQ9Im00ODAgMjQ4aC0xNDRjLTQuNDE4IDAtOC0zLjU4Mi04LTh2LTE2YzAtNC40MTggMy41ODItOCA4LThoMTQ0YzQuNDE4IDAgOCAzLjU4MiA4IDh2MTZjMCA0LjQxOC0zLjU4MiA4LTggOHoiIGZpbGw9IiNmZjgwODYiLz48cGF0aCBkPSJtMzM2IDI0OGgtMTYwYy00LjQxOCAwLTgtMy41ODItOC04di0xNmMwLTQuNDE4IDMuNTgyLTggOC04aDE2MGM0LjQxOCAwIDggMy41ODIgOCA4djE2YzAgNC40MTgtMy41ODIgOC04IDh6IiBmaWxsPSIjZTU2NDZlIi8+PHBhdGggZD0ibTQ3MiAzMzZoLTMyMy41bC00My0yNGMwLTE3LjY3MyAxNy4yNjUtMzIgMzQuOTM4LTMyaDMzMS41NjJjMTcuNjczIDAgMzIgMTQuMzI3IDMyIDMyIDAgNS44MjgtMS41NTggMTEuMjkzLTQuMjgxIDE1Ljk5OXoiIGZpbGw9IiNjODZlNjQiLz48cGF0aCBkPSJtMTY4IDMyOGMtMTcuNjczIDAtMzItMTQuMzI3LTMyLTMyIDAtNS44NTkgMS42ODktMTEuMjc3IDQuNDM4LTE2aC0xMDAuNDM4Yy0xNy42NzMgMC0zMiAxNC4zMjctMzIgMzJzMTQuMzI3IDMyIDMyIDMybDE0LjUgMTAuNWg0MDRsMTMuNS0xMC41YzExLjgxNCAwIDIyLjE3OC02LjQ3NiAyNy43MjEtMTZ6IiBmaWxsPSIjYjQ1MDVhIi8+PHBhdGggZD0ibTEwMy45OTIgMzUyYy0xLjIwMyAwLTIuNDIyLS4yNy0zLjU3LS44NDQtMy45NTMtMS45NzctNS41NTUtNi43ODEtMy41NzgtMTAuNzM0bDgtMTZjMS45ODQtMy45NTcgNi43NzMtNS41NTkgMTAuNzM0LTMuNTc4IDMuOTUzIDEuOTc3IDUuNTU1IDYuNzgxIDMuNTc4IDEwLjczNGwtOCAxNmMtMS40MDYgMi44MDUtNC4yMjYgNC40MjItNy4xNjQgNC40MjJ6IiBmaWxsPSIjYzg2ZTY0Ii8+PGcgZmlsbD0iI2U2NmU2NCI+PHBhdGggZD0ibTM1MiAzMDRjLTIuMDQ3IDAtNC4wOTQtLjc4MS01LjY1Ni0yLjM0NGwtMTYtMTZjLTMuMTI1LTMuMTI1LTMuMTI1LTguMTg4IDAtMTEuMzEzczguMTg4LTMuMTI1IDExLjMxMyAwbDE2IDE2YzMuMTI1IDMuMTI1IDMuMTI1IDguMTg4IDAgMTEuMzEzLTEuNTYzIDEuNTYzLTMuNjEgMi4zNDQtNS42NTcgMi4zNDR6Ii8+PHBhdGggZD0ibTMxMiAzMjBoLThjLTQuNDIyIDAtOC0zLjU4Mi04LThzMy41NzgtOCA4LThoOGM0LjQyMiAwIDggMy41ODIgOCA4cy0zLjU3OCA4LTggOHoiLz48cGF0aCBkPSJtMTc2IDMyOGMtMi4wNDcgMC00LjA5NC0uNzgxLTUuNjU2LTIuMzQ0bC04LThjLTMuMTI1LTMuMTI1LTMuMTI1LTguMTg4IDAtMTEuMzEzczguMTg4LTMuMTI1IDExLjMxMyAwbDggOGMzLjEyNSAzLjEyNSAzLjEyNSA4LjE4OCAwIDExLjMxMy0xLjU2MyAxLjU2My0zLjYxIDIuMzQ0LTUuNjU3IDIuMzQ0eiIvPjwvZz48cGF0aCBkPSJtNjQgMzEyYy0yLjA0NyAwLTQuMDk0LS43ODEtNS42NTYtMi4zNDQtMy4xMjUtMy4xMjUtMy4xMjUtOC4xODggMC0xMS4zMTNsOC04YzMuMTI1LTMuMTI1IDguMTg4LTMuMTI1IDExLjMxMyAwczMuMTI1IDguMTg4IDAgMTEuMzEzbC04IDhjLTEuNTYzIDEuNTYzLTMuNjEgMi4zNDQtNS42NTcgMi4zNDR6IiBmaWxsPSIjYzg2ZTY0Ii8+PHBhdGggZD0ibTQ0MC4wMDggMzUyYy0yLjkzOCAwLTUuNzU4LTEuNjE3LTcuMTY0LTQuNDIybC04LTE2Yy0xLjk3Ny0zLjk1My0uMzc1LTguNzU4IDMuNTc4LTEwLjczNCAzLjk0NS0xLjk4IDguNzUtLjM3OSAxMC43MzQgMy41NzhsOCAxNmMxLjk3NyAzLjk1My4zNzUgOC43NTgtMy41NzggMTAuNzM0LTEuMTQ4LjU3NC0yLjM2Ny44NDQtMy41Ny44NDR6IiBmaWxsPSIjYzg2ZTY0Ii8+PHBhdGggZD0ibTQ3MiAzMjBoLThjLTQuNDIyIDAtOC0zLjU4Mi04LThzMy41NzgtOCA4LThoOGM0LjQyMiAwIDggMy41ODIgOCA4cy0zLjU3OCA4LTggOHoiIGZpbGw9IiNlNjZlNjQiLz48cGF0aCBkPSJtMjQwIDM1MmMtNC40MjIgMC04LTMuNTgyLTgtOHYtOGMwLTQuNDE4IDMuNTc4LTggOC04czggMy41ODIgOCA4djhjMCA0LjQxOC0zLjU3OCA4LTggOHoiIGZpbGw9IiNjODZlNjQiLz48cGF0aCBkPSJtNDU2IDQxN2gtMzE4Yy0yNi41MSAwLTQ4LTIxLjQ5LTQ4LTQ4di05bDU0LTE2aDM0NGM4LjgzNyAwIDE2IDcuMTYzIDE2IDE2djE2YzAgMTIuMjk1LTQuNjIzIDIzLjUxMS0xMi4yMjUgMzIuMDA0eiIgZmlsbD0iI2ZmZDk3ZCIvPjxwYXRoIGQ9Im0xOTIgNDA4Yy0yNi41MSAwLTQ4LTIxLjQ5LTQ4LTQ4di0xNmgtMTIwYy04LjgzNiAwLTE2IDcuMTYzLTE2IDE2djE2YzAgMjYuNTEgMjEuNDkgNDggNDggNDhoNDAwYzE0LjE5OCAwIDI2Ljk4My02LjIwMSAzNS43NzEtMTZ6IiBmaWxsPSIjZmZjMjY5Ii8+PHBhdGggZD0ibTQyMS4yOTcgMjk2Yy0yMy40MDYgMC0zNS41MzktOS4zOTEtNDYuMjUtMTcuNjcyLTkuOTMtNy42ODgtMTguNTA4LTE0LjMyOC0zNi40NTMtMTQuMzI4LTE3LjkzIDAtMjYuNSA2LjY0MS0zNi40MyAxNC4zMjgtMTAuNjk1IDguMjgxLTIyLjgyOCAxNy42NzItNDYuMjE5IDE3LjY3Mi0yMy4zOTggMC0zNS41MzEtOS4zOTEtNDYuMjM0LTE3LjY3Mi05LjkzLTcuNjg4LTE4LjUwOC0xNC4zMjgtMzYuNDQ1LTE0LjMyOC0xNy45MjIgMC0yNi41IDYuNjM3LTM2LjQyMiAxNC4zMjQtMTAuNjk2IDguMjg1LTIyLjgyMSAxNy42NzYtNDYuMjE5IDE3LjY3Ni0yMy4zOTEgMC0zNS41MTYtOS4zOTEtNDYuMjExLTE3LjY3Ni05LjkyMi03LjY4Ny0xOC40OTItMTQuMzI0LTM2LjQxNC0xNC4zMjQtNC40MjIgMC04LTMuNTgyLTgtOHMzLjU3OC04IDgtOGMyMy4zOTEgMCAzNS41MTYgOS4zOTEgNDYuMjExIDE3LjY3NiA5LjkyMiA3LjY4NyAxOC40OTIgMTQuMzI0IDM2LjQxNCAxNC4zMjRzMjYuNS02LjYzNyAzNi40MjItMTQuMzI0YzEwLjY5NS04LjI4NSAyMi44Mi0xNy42NzYgNDYuMjE5LTE3LjY3NiAyMy40MDYgMCAzNS41MzkgOS4zOTEgNDYuMjQyIDE3LjY3NiA5LjkzIDcuNjg4IDE4LjUwOCAxNC4zMjQgMzYuNDM4IDE0LjMyNCAxNy45MjIgMCAyNi40OTItNi42MzcgMzYuNDIyLTE0LjMyNCAxMC43MDItOC4yODUgMjIuODI3LTE3LjY3NiA0Ni4yMjYtMTcuNjc2IDIzLjQwNiAwIDM1LjUzOSA5LjM5MSA0Ni4yNSAxNy42NzIgOS45MyA3LjY4OCAxOC41MDggMTQuMzI4IDM2LjQ1MyAxNC4zMjhzMjYuNTIzLTYuNjQxIDM2LjQ1My0xNC4zMjhjMTAuNzExLTguMjgxIDIyLjg0NC0xNy42NzIgNDYuMjUtMTcuNjcyIDQuNDIyIDAgOCAzLjU4MiA4IDhzLTMuNTc4IDgtOCA4Yy0xNy45NDUgMC0yNi41MjMgNi42NDEtMzYuNDUzIDE0LjMyOC0xMC43MTEgOC4yODEtMjIuODQ0IDE3LjY3Mi00Ni4yNSAxNy42NzJ6IiBmaWxsPSIjYjNlNTlmIi8+PC9zdmc+');
}

.end { font-size: 10rem; text-align: center; }

@keyframes getIn {
from { background-size: 0%; }
to { background-size: 70%; }
}
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
// The motion graphics toolbelt for the web
// https://github.com/mojs/mojs
class Game {
constructor(props) {
this.$game = props.$game;
this.$end = props.$end;

this.arrItem1 = [];
this.arrItem2 = [];
this.itemQuantities = 10;
this.colorClass1 = 'blue';
this.colorClass2 = 'red' ;
this.backgroundClass1 = 'running';
this.backgroundClass2 = 'hamburguer' ;
this.endMessage = 'FIM';

this.interval = 400;
this.newItem2 = setInterval(this.randomItem.bind(this), this.interval);

this.createGame();
this.init();
}

createGame() {
for (let i = 0; i < this.itemQuantities; i++) {
const div = document.createElement('div');
div.classList.add('item');
div.setAttribute('data-value', i);
this.$game.appendChild(div);
}
}

init() {
this.$items = document.querySelectorAll('.item');
this.$items.forEach(item => {
item.addEventListener('click', this.handleClick.bind(this));
});
}

randomItem() {
const a = Math.random() * this.itemQuantities;
const b = Math.floor(a);

if (!this.$items[b]) {
return;
}

if(this.arrItem2.indexOf(this.$items[b].dataset.value) == -1) {
this.arrItem2.push(this.$items[b].dataset.value);

this.$items[b].classList.remove(this.colorClass1);
this.$items[b].classList.add(this.colorClass2);
this.$items[b].classList.add(this.backgroundClass2);

if(this.arrItem2.length == this.itemQuantities) {
clearInterval(this.newItem2);

this.$end.innerHTML = this.endMessage;
this.$end.classList.add('red');
}
}

if(this.arrItem1.indexOf(this.$items[b].dataset.value) != -1) {
this.arrItem1.splice(this.arrItem1.indexOf(this.$items[b].dataset.value), 1);
}
}

handleClick(evt) {
const { target } = evt;

this.fire(evt);

if(this.arrItem1.indexOf(target.dataset.value) == -1) {
this.arrItem1.push(target.dataset.value);

if(this.arrItem1.length == this.itemQuantities) {
clearInterval(this.newItem2);

this.$end.innerHTML = this.endMessage;
this.$end.classList.add('blue');
}
}

if(this.arrItem2.indexOf(target.dataset.value) != -1) {
this.arrItem2.splice(this.arrItem2.indexOf(target.dataset.value) ,1);
}

target.classList.remove(this.colorClass2);
target.classList.remove(this.backgroundClass2);
target.classList.add(this.colorClass1);
target.classList.add(this.backgroundClass1);
}

fire(evt) {
const { target } = evt;
const itemDim = target.getBoundingClientRect();
const itemSize = {
x: itemDim.right - itemDim.left,
y: itemDim.bottom - itemDim.top,
};

const burst = new mojs.Burst({
left: itemDim.left + (itemSize.x/2),
top: itemDim.top + (itemSize.y/1.7),
count: 9,
radius: { 50 : 90 },
});

burst.play();
}
}

new Game({
$game: document.querySelector('.game'),
$end: document.querySelector('.end')
});

Conclusão

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

Relacionados

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.