camill/memory-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Video 10

Browse Source
This commit is contained in:
Marina Ferreira 2018-07-17 12:23:07 -03:00
parent 58be60237f
commit 259e37d6c8
3 changed files with 181 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
video-10/index.html Normal file
View File

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Memory Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class="memory-game">
<div class="memory-card" data-framework="aurelia">
<img class="front-face" src="../img/aurelia.svg" alt="Aurelia" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="aurelia">
<img class="front-face" src="../img/aurelia.svg" alt="Aurelia" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="vue">
<img class="front-face" src="../img/vue.svg" alt="Vue" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="vue">
<img class="front-face" src="../img/vue.svg" alt="Vue" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="angular">
<img class="front-face" src="../img/angular.svg" alt="Angular" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="angular">
<img class="front-face" src="../img/angular.svg" alt="Angular" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="ember">
<img class="front-face" src="../img/ember.svg" alt="Ember" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="ember">
<img class="front-face" src="../img/ember.svg" alt="Ember" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="backbone">
<img class="front-face" src="../img/backbone.svg" alt="Backbone" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="backbone">
<img class="front-face" src="../img/backbone.svg" alt="Backbone" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="react">
<img class="front-face" src="../img/react.svg" alt="React" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="react">
<img class="front-face" src="../img/react.svg" alt="React" />
<img class="back-face" src="../img/js-badge.svg" alt="JS Badge" />
</div>
</section>
<script src="scripts.js"></script>
</body>
</html>

57
video-10/scripts.js Normal file
View File

@ -0,0 +1,57 @@
const cards = document.querySelectorAll('.memory-card');
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
function flipCard() {
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add('flip');
if (!hasFlippedCard) {
// first click
hasFlippedCard = true;
firstCard = this;
return;
}
// second click
hasFlippedCard = false;
secondCard = this;
lockBoard = true;
checkForMatch();
}
function checkForMatch() {
let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
isMatch ? disableCards() : unflipCards();
}
function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetBoard();
}
function unflipCards() {
setTimeout(() => {
firstCard.classList.remove('flip');
secondCard.classList.remove('flip');
resetBoard();
}, 1500);
}
function resetBoard() {
hasFlippedCard = false;
lockBoard = false;
firstCard = null;
secondCard = null;
}
cards.forEach(card => card.addEventListener('click', flipCard));

55
video-10/styles.css Normal file
View File

@ -0,0 +1,55 @@
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
background: #060AB2;
}
.memory-game {
width: 640px;
height: 640px;
margin: auto;
display: flex;
flex-wrap: wrap;
perspective: 1000px;
}
.memory-card {
width: calc(25% - 10px);
height: calc(33.333% - 10px);
margin: 5px;
position: relative;
transform: scale(1);
transform-style: preserve-3d;
transition: transform .5s;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
.memory-card:active {
transform: scale(0.97);
transition: transform .2s;
}
.memory-card.flip {
transform: rotateY(180deg);
}
.front-face,
.back-face {
width: 100%;
height: 100%;
padding: 20px;
position: absolute;
border-radius: 5px;
background: #1C7CCC;
backface-visibility: hidden;
}
.front-face {
transform: rotateY(180deg);
}