Skip to content

Commit

Permalink
init commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Azzak Omega committed Aug 12, 2020
0 parents commit 7e104ae
Show file tree
Hide file tree
Showing 3 changed files with 370 additions and 0 deletions.
73 changes: 73 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Memoji</title>
</head>
<body>
<div class="modal">
<div class="pop-up">
<div class="game-result"></div>
<button>Play again</button>
</div>
</div>
<section class="page-wrapper">
<h1 class="title">Memoji</h1>
<article class="main">
<div class="grid-box">
<section class="card card1">
<div class="back"></div>
<div class="front"></div>
</section>
<section class="card card2">
<div class="back"></div>
<div class="front"></div>
</section>
<section class="card card3">
<div class="back"></div>
<div class="front"></div>
</section>
<section class="card card4">
<div class="back"></div>
<div class="front"></div>
</section>
<section class="card card5">
<div class="back"></div>
<div class="front"></div>
</section>
<section class="card card6">
<div class="back"></div>
<div class="front"></div>
</section>
<section class="card card7">
<div class="back"></div>
<div class="front"></div>
</section>
<section class="card card8">
<div class="back"></div>
<div class="front"></div>
</section>
<section class="card card9">
<div class="back"></div>
<div class="front"></div>
</section>
<section class="card card10">
<div class="back"></div>
<div class="front"></div>
</section>
<section class="card card11">
<div class="back"></div>
<div class="front"></div>
</section>
<section class="card card12">
<div class="back"></div>
<div class="front"></div>
</section>
</div>
</article>
<h2 class="timer">01:00</h2>
</section>
<script src="script.js"></script>
</body>
</html>
124 changes: 124 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
var memoji = ['🐞','🐞','🦀','🦀','🐙','🐙','🐵','🐵','🐸','🐸','🐰','🐰'];
var box = document.querySelector('.grid-box');
var elemList = Array.from(document.querySelectorAll("div.front"));
var cards = Array.from(document.querySelectorAll(".card"));
var timer = document.querySelector('.timer');
var modal = document.querySelector('.modal');
var gameResult = document.querySelector('.game-result');
var button = document.querySelector('button');
var openedCards;
var numberOfopened;
var time;
var timerId;
var isTimerStarted;
var front;
function shuffle(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var t = array[i];
array[i] = array[j];
array[j] = t;
}
}
function matchCards() {
front = openedCards.map(getFront);
if (front[0].innerHTML == front[1].innerHTML) {
front.forEach(function(fronti) {
fronti.classList.add('matched');
})
numberOfopened += 2;
openedCards = [];
if (numberOfopened == 12) {
popUp('Win', 'Play again');
}
} else {
front.forEach(toggleNotMatched);
}
}
function getFront(card) {
return card.querySelector('.front');
}
function toggleNotMatched (item) {
item.classList.toggle('not-matched');
}
function rotate(card) {
card.classList.toggle('non-clickable');
card.classList.toggle('card-rotated');
}
function openCard(card) {
if (!isTimerStarted) {
isTimerStarted = true;
timerId = setInterval(timerHandler, 1000);
}
if (openedCards.length == 2) {
front = openedCards.map(getFront);
front.forEach(toggleNotMatched);
openedCards.forEach(rotate);
openedCards = [];
}
if (openedCards.length == 0) {
rotate(card);
openedCards.push(card);
} else {
rotate(card);
openedCards.push(card);
matchCards();
}
}
function timerHandler() {
if (--time > 9) {
timer.innerHTML = '00:' + time;
} else {
timer.innerHTML = '00:0' + time;
}
if (time == 0) {
popUp('Lose', 'Try again');
}
}
function popUp(result, buttonMessage) {
clearInterval(timerId);
modal.classList.add('visible');
gameResult.innerHTML = '';
fillResult(result);
button.innerHTML = buttonMessage;
}
function fillResult(result) {
for (var i = 0; i < result.length; i++) {
var newLetter = document.createElement('span');
newLetter.innerText = result[i];
gameResult.appendChild(newLetter);
}
}
function restart() {
cards.forEach(function(elem, index) {
elem.classList.remove("card-rotated", "non-clickable");
})
cards.map(getFront).forEach(function(elem, index) {
elem.classList.remove("matched", "not-matched");
})
shuffle(memoji);
setTimeout(function() {
elemList.forEach(function(elem, index) {
elem.innerHTML = memoji[index];
})
}, 250);
timer.innerHTML = '01:00';
time = 60;
isTimerStarted = false;
openedCards = [];
numberOfopened = 0;
}
box.addEventListener('click', function(event) {
if (event.target.parentNode.classList.contains('card')) {
openCard(event.target.parentNode);
}
}, true)
button.addEventListener('mousedown', function(event) {
event.target.classList.add('clicked');
});
button.addEventListener('mouseup', function(event) {
event.target.classList.remove('clicked');
modal.classList.remove('visible');
restart();
});
window.onload = restart();
173 changes: 173 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
html, body, h1, h2, section {
margin: 0;
padding: 0;
}
body {
background-color: #CFD0CF;
min-width: 600px;
min-height: 600px;
font-family: Arial, Helvetica, sans-serif;
color: #434344;
user-select: none;
}
.page-wrapper {
width: 100%;
height: 100%;
padding-top: 40px;
}
.title, .timer {
font-weight: bold;
text-align: center;
}
.title {
font-size: 42px;
line-height: 47px;
margin-bottom: 40px;
}
.main {
display: flex;
justify-content: center;
}
.grid-box {
perspective: 600px;
display: grid;
gap: 25px;
grid-template-columns: repeat(4, 130px);
grid-template-rows: repeat(3, 130px);
}
.card {
display: block;
position: relative;
width: 100%;
height: 100%;
transition-duration: 500ms;
transform-style: preserve-3d;
}
.card:hover {
cursor: pointer;
}
.card-rotated {
transition: transform 500ms;
transform: rotateY(180deg);
}
.front, .back {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
box-sizing: border-box;
border: 5px solid #fff;
border-radius: 9px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
.front {
display: flex;
justify-content: center;
align-items: center;
font-size: 65px;
background-color: #fff;
transform: rotateY(180deg);
}
.matched {
background-color: #5AD66F;
border-color: #5AD66F;
}
.not-matched {
background-color: #F44336;
border-color: #F44336;
}
.non-clickable {
pointer-events: none;
}
.back {
background: linear-gradient(to top right, #22AB93, #19668D);
}
.timer {
font-size: 32px;
line-height: 36px;
margin-top: 30px;
}
.modal {
display: none;
position: fixed;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;

background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.visible {
display: flex;
}
.pop-up {
min-width: 350px;
height: auto;
background-color: #fff;
}
.game-result {
display: block;
text-align: center;
font-size: 48px;
font-weight: bold;
margin: 30px 0 0;
}
.game-result span {
display: inline-block;
position: relative;
transform-origin: center bottom;
animation: letter-jump 1s infinite;
}

.game-result span:nth-child(2) {
animation-delay: 0.1s;
}

.game-result span:nth-child(3) {
animation-delay: 0.2s;
}

.game-result span:nth-child(4) {
animation-delay: 0.3s;
}

@keyframes letter-jump {
0% {
transform: scaleY(1);
animation-timing-function: ease-out;
}
25%,35% {
transform: translateY(-4px) scaleY(1.4);
animation-timing-function: ease-in;
}
90% {
transform: translateY(0) scaleY(0.6);
animation-timing-function: ease-in;
}
100% {
transform: translateY(0) scaleY(1);
animation-timing-function: ease-out;
}
}

button {
display: block;
margin: 40px auto 30px;
height: 40px;
font-size: 20px;
font-weight: bold;
color: #fff;
background: linear-gradient(to left, #22AB93, #19668D);
border: 0;
border-radius: 10px;
padding: 0 30px;
box-shadow: 1px 1px 1px #434344;
outline: none;

}
.clicked {
box-shadow: inset 2px 1px 8px #434344;
}

0 comments on commit 7e104ae

Please sign in to comment.