├── img
├── box.png
├── bowser.jpg
├── luigi.png
├── mario.png
├── peach.png
├── toad.png
└── yoshi.png
├── README.md
├── style.css
├── script.js
└── index.html
/img/box.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SpruceGabriela/jogo-da-memoria-dio/HEAD/img/box.png
--------------------------------------------------------------------------------
/img/bowser.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SpruceGabriela/jogo-da-memoria-dio/HEAD/img/bowser.jpg
--------------------------------------------------------------------------------
/img/luigi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SpruceGabriela/jogo-da-memoria-dio/HEAD/img/luigi.png
--------------------------------------------------------------------------------
/img/mario.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SpruceGabriela/jogo-da-memoria-dio/HEAD/img/mario.png
--------------------------------------------------------------------------------
/img/peach.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SpruceGabriela/jogo-da-memoria-dio/HEAD/img/peach.png
--------------------------------------------------------------------------------
/img/toad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SpruceGabriela/jogo-da-memoria-dio/HEAD/img/toad.png
--------------------------------------------------------------------------------
/img/yoshi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SpruceGabriela/jogo-da-memoria-dio/HEAD/img/yoshi.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Oi, tudo bem? Chegou aqui através do curso, certo? 🙃
2 |
3 | Esse é o repositório da nossa aula de Javascript, na qual vamos fazer um jogo da memória com a temática de Super Mario!
4 |
5 | ### Os requisitos são:
6 |
7 | * [HTML básico](https://www.w3schools.com/html/)
8 | * [CSS básico](https://developer.mozilla.org/pt-BR/docs/Web/CSS)
9 | * [Javascript básico](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript)
10 |
11 |
12 |
13 | ## 🚀 Let's code! 🚀
14 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | height: 100vh;
9 | display: flex;
10 | background-color: rgb(188, 248, 228);
11 | }
12 |
13 | .memory-game {
14 | height: 640px;
15 | width: 640px;
16 | margin: auto;
17 | display: flex;
18 | flex-wrap: wrap;
19 | perspective: 1000px; /* perspectiva do usuario no eixo z, quanto maior, maior o efeito da perspectiva */
20 | }
21 |
22 | .card {
23 | height: calc( 33.333% - 10px);
24 | width: calc(25% - 10px);
25 | margin: 5px;
26 | position: relative;
27 | box-shadow: 1px 1px 1px rgba(0,0,0,.3);
28 | cursor: pointer;
29 | transform: scale(1);
30 | transform-style: preserve-3d; /* adiciona perspectiva 3d, para que o elemento nao fique achatada no plano */
31 | transition: transform .9s; /* adiciona efeito de movimento ao flip do card */
32 | }
33 |
34 | .card:active{
35 | transform: scale(0.97);
36 | transition: transform .2s;
37 | }
38 |
39 | .card-front,
40 | .card-back {
41 | width: 100%;
42 | height: 100%;
43 | padding: 20px;
44 | position: absolute;
45 | border-radius: 5px;
46 | background: rgb(92, 187, 182);
47 | backface-visibility: hidden; /* todo elemento tem uma frente e um verso (ao contrario, como um espelho.) essa propriedade retira o verso */
48 | }
49 |
50 | .card-front {
51 | transform: rotateY(180deg); /* antes, o verso aparecia transparente, pois ambas as imagens tem position absolute, ao girar no eixo Y, elas ficaram com os versos virados */
52 | }
53 |
54 | /* flip card animation */
55 |
56 | .card.flip {
57 | transform: rotateY(180deg);
58 | }
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const cards = document.querySelectorAll('.card');
2 | let hasFlippedCard = false;
3 | let firstCard, secondCard;
4 | let lockBoard = false;
5 |
6 | //função para virar carta
7 | function flipCard() {
8 | if(lockBoard) return;
9 | if(this === firstCard) return;
10 |
11 | this.classList.add('flip');
12 | if(!hasFlippedCard) {
13 | hasFlippedCard = true;
14 | firstCard = this;
15 | return;
16 | }
17 |
18 | secondCard = this;
19 | hasFlippedCard = false;
20 | checkForMatch();
21 | }
22 |
23 | //função que checa se as cartas são iguais
24 | function checkForMatch() {
25 | if(firstCard.dataset.card === secondCard.dataset.card) {
26 | disableCards();
27 | return;
28 | }
29 |
30 | unflipCards();
31 | }
32 |
33 | //função que desabilita as cartas
34 | function disableCards() {
35 | firstCard.removeEventListener('click', flipCard);
36 | secondCard.removeEventListener('click', flipCard);
37 |
38 | resetBoard();
39 | }
40 |
41 | //funcão que desvira as cartas
42 | function unflipCards() {
43 | lockBoard = true;
44 |
45 | setTimeout(() => {
46 | firstCard.classList.remove('flip');
47 | secondCard.classList.remove('flip');
48 |
49 | resetBoard();
50 | }, 1500);
51 | }
52 |
53 | //função que reseta o tabuleiro
54 | function resetBoard() {
55 | [hasFlippedCard, lockBoard] = [false, false];
56 | [firstCard, secondCard] = [null, null];
57 | }
58 |
59 | //função que embaralha as cartas
60 | (function shuffle() {
61 | cards.forEach((card) => {
62 | let ramdomPosition = Math.floor(Math.random() * 12);
63 | card.style.order = ramdomPosition;
64 | })
65 | })();
66 |
67 | //adiciona evento de clique na carta
68 | cards.forEach((card) => {
69 | card.addEventListener('click', flipCard)
70 | });
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Jogo da memória
8 |
9 |
10 |
11 |
12 |
13 |
14 |
16 |
17 |
18 |
20 |
21 |
22 |
24 |
25 |
26 |
28 |
29 |
30 |
32 |
33 |
34 |
36 |
37 |
38 |
40 |
41 |
42 |
44 |
45 |
46 |
48 |
49 |
50 |
52 |
53 |
54 |
56 |
57 |
58 |