A Pen by Anand prabhakar on CodePen.
Created
June 7, 2018 21:56
-
-
Save anandprabhakar0507/7cf721a80cf7e37cdd486090bec855ba to your computer and use it in GitHub Desktop.
Not-A-Memory Game (Bring It On Musical)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
h1 | |
| Match the Soulmates | |
small | |
| This is not a memory game. Match two people who are most likely best buds in life. | |
br | |
| Tip: The colors will be your guide. | |
.game-wrapper | |
.that-memory-game | |
.result-message | |
span.success Yay! 😉 | |
span.fail That's not right 😧 | |
.game-end | |
| 🎉 You did it! 🎉 | |
br | |
| Have a cookie 🍪 | |
aside.context | |
.explanation | |
| Inspired by the song 🎵 | |
a(href="https://youtu.be/MlwooqWrUrU" target="_blank") I Got You | |
| 🎵 from Bring It On: The Musical. | |
footer | |
a(href="https://twitter.com/meowlivia_" target="_blank") | |
i.icon-social-twitter.icons | |
a(href="https://github.com/oliviale" target="_blank") | |
i.icon-social-github.icons | |
a(href="https://dribbble.com/oliviale" target="_blank") | |
i.icon-social-dribbble.icons |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var cards = [ | |
{ | |
type: "1", | |
color: "yellow", | |
image: "http://olivia-ng.com/codepen/BringItOn/13579.png", | |
name: "Pikachu" | |
}, | |
{ | |
type: "1", | |
color: "yellow", | |
image: "http://olivia-ng.com/codepen/BringItOn/56826.jpg", | |
name: "Pokemon" | |
}, | |
{ | |
type: "2", | |
color: "blue", | |
image: "http://olivia-ng.com/codepen/BringItOn/36473.jpg", | |
name: "Oprah" | |
}, | |
{ | |
type: "2", | |
color: "blue", | |
image: "http://olivia-ng.com/codepen/BringItOn/12257.jpg", | |
name: "Gayle" | |
}, | |
{ | |
type: "3", | |
color: "purple", | |
image: "http://olivia-ng.com/codepen/BringItOn/34628.jpg", | |
name: "Dorothy" | |
}, | |
{ | |
type: "3", | |
color: "purple", | |
image: "http://olivia-ng.com/codepen/BringItOn/95327.jpg", | |
name: "Toto" | |
}, | |
{ | |
type: "4", | |
color: "red", | |
image: "http://olivia-ng.com/codepen/BringItOn/25289.jpg", | |
name: "Ron" | |
}, | |
{ | |
type: "4", | |
color: "red", | |
image: "http://olivia-ng.com/codepen/BringItOn/37583.jpg", | |
name: "Hermione" | |
}, | |
{ | |
type: "5", | |
color: "green", | |
image: "http://olivia-ng.com/codepen/BringItOn/57389.jpg", | |
name: "Biggie" | |
}, | |
{ | |
type: "5", | |
color: "green", | |
image: "http://olivia-ng.com/codepen/BringItOn/87953.jpg", | |
name: "Puffy" | |
}, | |
{ | |
type: "6", | |
color: "pink", | |
image: "http://olivia-ng.com/codepen/BringItOn/12568.jpg", | |
name: "Big Bird" | |
}, | |
{ | |
type: "6", | |
color: "pink", | |
image: "http://olivia-ng.com/codepen/BringItOn/45178.png", | |
name: "Snuffy" | |
}, | |
{ | |
type: "7", | |
color: "orange", | |
image: "http://olivia-ng.com/codepen/BringItOn/96437.jpg", | |
name: "Sam" | |
}, | |
{ | |
type: "7", | |
color: "orange", | |
image: "http://olivia-ng.com/codepen/BringItOn/75382.jpg", | |
name: "Frodo" | |
}, | |
{ | |
type: "8", | |
color: "silver", | |
image: "http://olivia-ng.com/codepen/BringItOn/37890.jpg", | |
name: "Venus" | |
}, | |
{ | |
type: "8", | |
color: "silver", | |
image: "http://olivia-ng.com/codepen/BringItOn/38990.jpg", | |
name: "Serena" | |
}, | |
{ | |
type: "9", | |
color: "teal", | |
image: "http://olivia-ng.com/codepen/BringItOn/82909.jpg", | |
name: "Notre Dame" | |
}, | |
{ | |
type: "9", | |
color: "teal", | |
image: "http://olivia-ng.com/codepen/BringItOn/83122.jpg", | |
name: "Quasimodo" | |
}, | |
{ | |
type: "10", | |
color: "lightblue", | |
image: "http://olivia-ng.com/codepen/BringItOn/25811.jpg", | |
name: "Lucy" | |
}, | |
{ | |
type: "10", | |
color: "lightblue", | |
image: "http://olivia-ng.com/codepen/BringItOn/72852.jpg", | |
name: "Ricky" | |
}, | |
{ | |
type: "11", | |
color: "lightgreen", | |
image: "http://olivia-ng.com/codepen/BringItOn/52111.jpg", | |
name: "Brad" | |
}, | |
{ | |
type: "11", | |
color: "lightgreen", | |
image: "http://olivia-ng.com/codepen/BringItOn/98502.jpg", | |
name: "Angelina" | |
}, | |
{ | |
type: "12", | |
color: "gold", | |
image: "http://olivia-ng.com/codepen/BringItOn/42119.jpg", | |
name: "Tom Kitt" | |
}, | |
{ | |
type: "12", | |
color: "gold", | |
image: "http://olivia-ng.com/codepen/BringItOn/83245.jpg", | |
name: "Lin Manuel Miranda" | |
} | |
]; | |
//append according to number of things in array | |
for (var i = 0; i < cards.length; i++) { | |
var $appendedItems = $( | |
'<div class="card-wrapper"><div class="card ' + | |
cards[i].color + | |
'"><div class="front face"></div><div class="back face center"><div class="image" data-type="' + | |
cards[i].type + | |
'" style="background-image: url(' + | |
cards[i].image + | |
');"/></div><div class="text">' + | |
cards[i].name + | |
"</div></div></div>" | |
); | |
$appendedItems.appendTo(".that-memory-game"); | |
} | |
//randomize all the children | |
var parent = $(".that-memory-game"); | |
var divs = parent.children(); | |
while (divs.length) { | |
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]); | |
} | |
var $numberCardsOpened = 0; | |
var $firstCard, $secondCard; | |
function reset() { | |
$numberCardsOpened = 0; | |
$firstCard = ""; | |
$secondCard = ""; | |
} | |
function resultNotification(type) { | |
if (type === "fail") { | |
$(".result-message .fail").css("opacity", "1"); | |
} else if (type === "success") { | |
$(".result-message .success").css("opacity", "1"); | |
} | |
setTimeout(function() { | |
$(".result-message span").css("opacity", "0"); | |
}, 1500); | |
} | |
$(".card").on("click", function() { | |
$(this).toggleClass("flipped"); | |
if ($numberCardsOpened == 0) { | |
$firstCard = $(this) | |
.find(".image") | |
.data("type"); | |
$numberCardsOpened++; | |
} else if ($numberCardsOpened == 1) { | |
$secondCard = $(this) | |
.find(".image") | |
.data("type"); | |
if ($secondCard === $firstCard) { | |
$(".flipped").addClass("done"); | |
reset(); | |
if ($(".done").length == cards.length) { | |
$(".game-end").css("opacity","1"); | |
} else { | |
resultNotification("success"); | |
} | |
} else { | |
reset(); | |
resultNotification("fail"); | |
setTimeout(function() { | |
$(".card").removeClass("flipped"); | |
}, 600); | |
} | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
box-sizing: border-box; | |
} | |
body { | |
background: linear-gradient( | |
to bottom right, | |
rgb(242, 242, 242), | |
rgb(219, 219, 219), | |
rgb(234, 234, 234) | |
) | |
no-repeat; | |
font-family: "Comfortaa", sans-serif; | |
} | |
h1 { | |
width: 100%; | |
margin: 3em auto 1.5em; | |
font-size: 40px; | |
text-align: center; | |
color: #333; | |
font-weight: 700; | |
text-transform: uppercase; | |
small { | |
text-transform: none; | |
display: block; | |
margin: 20px 0; | |
font: 400 18px/1.4 "Comfortaa", sans-serif; | |
color: #999; | |
} | |
} | |
.game-wrapper { | |
position: relative; | |
} | |
.that-memory-game { | |
display: flex; | |
flex-wrap: wrap; | |
justify-content: center; | |
max-width: 1200px; | |
margin: 4em auto; | |
} | |
.card-wrapper { | |
position: relative; | |
flex: 0 0 15%; | |
margin: 8px; | |
height: 205px; | |
z-index: 1; | |
perspective: 1000; | |
box-sizing: border-box; | |
} | |
.card { | |
width: 100%; | |
height: 100%; | |
transform-style: preserve-3d; | |
transition: all 0.2s linear; | |
cursor: pointer; | |
display: inline-block; | |
padding: 2px; | |
position: relative; | |
top: -5px; | |
box-shadow: 0 10px 20px -6px rgba(0, 0, 0, 0.3); | |
&:hover { | |
top: -10px; | |
box-shadow: 0px 20px 20px -6px rgba(0, 0, 0, 0.2); | |
} | |
} | |
.card .image { | |
position: relative; | |
width: 100%; | |
height: 160px; | |
background-size: cover; | |
background-position: center; | |
background-blend-mode: multiply; | |
border-radius: 4px; | |
} | |
.text { | |
font-size: 25px; | |
text-transform: uppercase; | |
text-align: center; | |
font-family: "Faster One"; | |
letter-spacing: -5px; | |
color: #fff; | |
text-align: center; | |
position: absolute; | |
bottom: 12px; | |
line-height: .8; | |
left: 0; | |
width: 100%; | |
transform: rotateY(180deg); | |
text-shadow: 0 2px 3px rgba(0,0,0,0.2); | |
} | |
.card.flipped, | |
.card.done { | |
transform: rotateY(180deg); | |
pointer-events: none; | |
} | |
.face { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
backface-visibility: hidden; | |
left: 0; | |
top: 0; | |
border-radius: 4px; | |
} | |
.face.front { | |
background: url("http://olivia-ng.com/codepen/BringItOn/bringiton.gif") center | |
center / cover; | |
} | |
.face.back { | |
display: block; | |
height: 100%; | |
width: 100%; | |
transform: rotateY(180deg); | |
padding: 5px; | |
} | |
.yellow { | |
.face.back { | |
background: linear-gradient(to bottom right, #ffeb3b 0%, #fbc02d 100%); | |
} | |
.image { | |
background-color: #ffb300; | |
} | |
} | |
.orange { | |
.face.back { | |
background: linear-gradient(to bottom right, #ffc107 0%, #f57c00 100%); | |
} | |
.image { | |
background-color: #fa9e03; | |
} | |
} | |
.pink { | |
.face.back { | |
background: linear-gradient(to bottom right, #f48fb1 0%, #d81b60 100%); | |
} | |
.image { | |
background-color: #f49ab8; | |
} | |
} | |
.red { | |
.face.back { | |
background: linear-gradient(to bottom right, #f4511e 0%, #b71c1c 100%); | |
} | |
.image { | |
background-color: #f69282; | |
} | |
} | |
.purple { | |
.face.back { | |
background: linear-gradient(to bottom right, #ab47bc 0%, #4527a0 100%); | |
} | |
.image { | |
background-color: #a05bae; | |
} | |
} | |
.teal { | |
.face.back { | |
background: linear-gradient(to bottom right, #4db6ac 0%, #00796b 100%); | |
} | |
.image { | |
background-color: #77d7cd; | |
} | |
} | |
.lightblue { | |
.face.back { | |
background: linear-gradient(to bottom right, #4fc3f7 0%, #2196f3 100%); | |
} | |
.image { | |
background-color: #259af3; | |
} | |
} | |
.blue { | |
.face.back { | |
background: linear-gradient(to bottom right, #1976d2 0%, #283593 100%); | |
} | |
.image { | |
background-color: #709ce9; | |
} | |
} | |
.lightgreen { | |
.face.back { | |
background: linear-gradient(to bottom right, #cddc39 0%, #8bc34a 100%); | |
} | |
.image { | |
background-color: #70ca76; | |
} | |
} | |
.green { | |
.face.back { | |
background: linear-gradient(to bottom right, #4caf50 0%, #1b5e20 100%); | |
} | |
.image { | |
background-color: #52c459; | |
} | |
} | |
.silver { | |
.face.back { | |
background: linear-gradient(to bottom right, #e0e0e0 0%, #bdbdbd 100%); | |
} | |
.image { | |
background-color: #9e9e9e; | |
} | |
} | |
.gold { | |
.face.back { | |
background: linear-gradient(to bottom right, #e6ce6a 0%, #b7892b 100%); | |
} | |
.image { | |
background-color: #b7892b; | |
} | |
} | |
.result-message .success, | |
.result-message .fail, | |
.game-end { | |
position: fixed; | |
padding: 20px; | |
display: inline-block; | |
font: 400 18px "Comfortaa"; | |
top: 20px; | |
right: 20px; | |
opacity: 0; | |
z-index: 1000; | |
width: 260px; | |
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); | |
transition: .5s ease; | |
border-radius: 5px; | |
color: #fff; | |
} | |
.success { | |
background: linear-gradient( | |
to bottom right, | |
rgb(168, 224, 99), | |
rgb(86, 171, 47) | |
); | |
} | |
.fail { | |
background: linear-gradient( | |
to bottom right, | |
rgb(237, 33, 58), | |
rgb(147, 41, 30) | |
); | |
} | |
.game-end { | |
text-align: center; | |
background: linear-gradient( | |
to bottom right, | |
rgb(65, 67, 69), | |
rgb(35, 37, 38) | |
); | |
} | |
aside.context { | |
text-align: center; | |
color: #333; | |
a { | |
text-decoration: none; | |
color: #333; | |
padding: 3px 0; | |
border-bottom: 1px dashed; | |
} | |
.explanation { | |
max-width: 700px; | |
margin: 6em auto 0; | |
} | |
} | |
footer { | |
text-align: center; | |
margin: 4em auto; | |
width: 100%; | |
a { | |
text-decoration: none; | |
display: inline-block; | |
width: 45px; | |
height: 45px; | |
border-radius: 50%; | |
background: transparent; | |
border: 1px dashed #333; | |
color: #333; | |
margin: 5px; | |
&:hover { | |
background: rgba(255, 255, 255, 0.1); | |
} | |
.icons { | |
margin-top: 12px; | |
display: inline-block; | |
font-size: 20px; | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment