├── .vscode └── settings.json ├── src ├── styles │ ├── reset.css │ └── main.css └── scripts │ └── engine.js └── index.html /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } 4 | -------------------------------------------------------------------------------- /src/styles/reset.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | outline: none; 5 | box-sizing: border-box; 6 | font-family: monospace; 7 | } 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Jogo Da Memória 8 | 9 | 10 | 11 | 12 | 13 |
14 |

JOGO DA MEMÓRIA

15 |
16 | 17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/scripts/engine.js: -------------------------------------------------------------------------------- 1 | const emojis = [ 2 | "🐱", 3 | "🐱", 4 | "🦝", 5 | "🦝", 6 | "🦊", 7 | "🦊", 8 | "🐶", 9 | "🐶", 10 | "🐵", 11 | "🐵", 12 | "🦁", 13 | "🦁", 14 | "🐯", 15 | "🐯", 16 | "🐮", 17 | "🐮", 18 | ]; 19 | let openCards = []; 20 | 21 | let shuffleEmojis = emojis.sort(() => (Math.random() > 0.5 ? 2 : -1)); 22 | 23 | for (let i = 0; i < emojis.length; i++) { 24 | let box = document.createElement("div"); 25 | box.className = "item"; 26 | box.innerHTML = shuffleEmojis[i]; 27 | box.onclick = handleClick; 28 | document.querySelector(".game").appendChild(box); 29 | } 30 | 31 | function handleClick() { 32 | if (openCards.length < 2) { 33 | this.classList.add("boxOpen"); 34 | openCards.push(this); 35 | } 36 | 37 | if (openCards.length == 2) { 38 | setTimeout(checkMatch, 500); 39 | } 40 | 41 | console.log(openCards); 42 | } 43 | 44 | function checkMatch() { 45 | if (openCards[0].innerHTML === openCards[1].innerHTML) { 46 | openCards[0].classList.add("boxMatch"); 47 | openCards[1].classList.add("boxMatch"); 48 | } else { 49 | openCards[0].classList.remove("boxOpen"); 50 | openCards[1].classList.remove("boxOpen"); 51 | } 52 | 53 | openCards = []; 54 | 55 | if (document.querySelectorAll(".boxMatch").length === emojis.length) { 56 | alert("Você venceu !"); 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/styles/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 100vh; 6 | background: #fc1e8a; 7 | user-select: none; 8 | } 9 | 10 | .container { 11 | position: relative; 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: center; 15 | align-items: center; 16 | gap: 30px; 17 | background: linear-gradient( 18 | 325deg, 19 | #03001e 0%, 20 | #7303c0 30%, 21 | #ec38bc 70%, 22 | #fdeff9 100% 23 | ); 24 | padding: 40px 60px; 25 | } 26 | 27 | h2 { 28 | font-size: 3em; 29 | color: #fff; 30 | text-transform: uppercase; 31 | letter-spacing: 0.1em; 32 | } 33 | 34 | .reset { 35 | padding: 15px 20px; 36 | width: 100%; 37 | color: #000; 38 | background-color: #fff; 39 | border: none; 40 | font-size: 1.5em; 41 | letter-spacing: 0.1em; 42 | text-transform: uppercase; 43 | cursor: pointer; 44 | font-weight: 600; 45 | } 46 | 47 | .reset:focus { 48 | color: #ec38bc; 49 | background-color: #262809; 50 | } 51 | 52 | .game { 53 | width: 430px; 54 | height: 430px; 55 | display: flex; 56 | flex-wrap: wrap; 57 | gap: 10px; 58 | transform-style: preserve-3d; 59 | perspective: 500px; 60 | } 61 | 62 | .item { 63 | position: relative; 64 | width: 100px; 65 | height: 100px; 66 | display: flex; 67 | align-items: center; 68 | justify-content: center; 69 | background-color: #fff; 70 | 71 | font-size: 3em; 72 | transform: rotateY(180deg); 73 | transition: 0.25s; 74 | } 75 | 76 | .item::after { 77 | content: ""; 78 | position: absolute; 79 | inset: 0; 80 | background: #404040; 81 | /* opacity: 0.85; */ 82 | transition: 0.25s; 83 | transform: rotateY(0deg); 84 | backface-visibility: hidden; 85 | } 86 | 87 | .item.boxOpen { 88 | transform: rotateY(0deg); 89 | } 90 | 91 | .boxOpen::after, 92 | .boxMatch::after { 93 | transform: rotateY(180deg); 94 | } 95 | --------------------------------------------------------------------------------