Honey Fun

<script type="text/javascript"><!-- [et_pb_line_break_holder] -->// Memory Game<!-- [et_pb_line_break_holder] -->// © 2014 Nate Wiley<!-- [et_pb_line_break_holder] -->// License -- MIT<!-- [et_pb_line_break_holder] -->// best in full screen, works on phones/tablets (min height for game is 500px..) enjoy ;)<!-- [et_pb_line_break_holder] -->// Follow me on Codepen<!-- [et_pb_line_break_holder] -->;(function($){<!-- [et_pb_line_break_holder] -->var Memory = {<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> init: function(cards){<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> this.$game = $(".game");<!-- [et_pb_line_break_holder] --> this.$modal = $(".modal");<!-- [et_pb_line_break_holder] --> this.$overlay = $(".modal-overlay");<!-- [et_pb_line_break_holder] --> this.$restartButton = $("button.restart");<!-- [et_pb_line_break_holder] --> this.cardsArray = $.merge(cards, cards);<!-- [et_pb_line_break_holder] --> this.shuffleCards(this.cardsArray);<!-- [et_pb_line_break_holder] --> this.setup();<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> shuffleCards: function(cardsArray){<!-- [et_pb_line_break_holder] --> this.$cards = $(this.shuffle(this.cardsArray));<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> setup: function(){<!-- [et_pb_line_break_holder] --> this.html = this.buildHTML();<!-- [et_pb_line_break_holder] --> this.$game.html(this.html);<!-- [et_pb_line_break_holder] --> this.$memoryCards = $(".card");<!-- [et_pb_line_break_holder] --> this.binding();<!-- [et_pb_line_break_holder] --> this.paused = false;<!-- [et_pb_line_break_holder] --> this.guess = null;<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> binding: function(){<!-- [et_pb_line_break_holder] --> this.$memoryCards.on("click", this.cardClicked);<!-- [et_pb_line_break_holder] --> this.$restartButton.on("click", $.proxy(this.reset, this));<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --> // kinda messy but hey<!-- [et_pb_line_break_holder] --> cardClicked: function(){<!-- [et_pb_line_break_holder] --> var _ = Memory;<!-- [et_pb_line_break_holder] --> var $card = $(this);<!-- [et_pb_line_break_holder] --> if(!_.paused && !$card.find(".inside").hasClass("matched") && !$card.find(".inside").hasClass("picked")){<!-- [et_pb_line_break_holder] --> $card.find(".inside").addClass("picked");<!-- [et_pb_line_break_holder] --> if(!_.guess){<!-- [et_pb_line_break_holder] --> _.guess = $(this).attr("data-id");<!-- [et_pb_line_break_holder] --> } else if(_.guess == $(this).attr("data-id") && !$(this).hasClass("picked")){<!-- [et_pb_line_break_holder] --> $(".picked").addClass("matched");<!-- [et_pb_line_break_holder] --> _.guess = null;<!-- [et_pb_line_break_holder] --> } else {<!-- [et_pb_line_break_holder] --> _.guess = null;<!-- [et_pb_line_break_holder] --> _.paused = true;<!-- [et_pb_line_break_holder] --> setTimeout(function(){<!-- [et_pb_line_break_holder] --> $(".picked").removeClass("picked");<!-- [et_pb_line_break_holder] --> Memory.paused = false;<!-- [et_pb_line_break_holder] --> }, 600);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> if($(".matched").length == $(".card").length){<!-- [et_pb_line_break_holder] --> _.win();<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> win: function(){<!-- [et_pb_line_break_holder] --> this.paused = true;<!-- [et_pb_line_break_holder] --> setTimeout(function(){<!-- [et_pb_line_break_holder] --> Memory.showModal();<!-- [et_pb_line_break_holder] --> Memory.$game.fadeOut();<!-- [et_pb_line_break_holder] --> }, 1000);<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> showModal: function(){<!-- [et_pb_line_break_holder] --> this.$overlay.show();<!-- [et_pb_line_break_holder] --> this.$modal.fadeIn("slow");<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> hideModal: function(){<!-- [et_pb_line_break_holder] --> this.$overlay.hide();<!-- [et_pb_line_break_holder] --> this.$modal.hide();<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> reset: function(){<!-- [et_pb_line_break_holder] --> this.hideModal();<!-- [et_pb_line_break_holder] --> this.shuffleCards(this.cardsArray);<!-- [et_pb_line_break_holder] --> this.setup();<!-- [et_pb_line_break_holder] --> this.$game.show("slow");<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Fisher--Yates Algorithm -- http://bost.ocks.org/mike/shuffle/<!-- [et_pb_line_break_holder] --> shuffle: function(array){<!-- [et_pb_line_break_holder] --> var counter = array.length, temp, index;<!-- [et_pb_line_break_holder] --> // While there are elements in the array<!-- [et_pb_line_break_holder] --> while (counter > 0) {<!-- [et_pb_line_break_holder] --> // Pick a random index<!-- [et_pb_line_break_holder] --> index = Math.floor(Math.random() * counter);<!-- [et_pb_line_break_holder] --> // Decrease counter by 1<!-- [et_pb_line_break_holder] --> counter--;<!-- [et_pb_line_break_holder] --> // And swap the last element with it<!-- [et_pb_line_break_holder] --> temp = array[counter];<!-- [et_pb_line_break_holder] --> array[counter] = array[index];<!-- [et_pb_line_break_holder] --> array[index] = temp;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> return array;<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> buildHTML: function(){<!-- [et_pb_line_break_holder] --> var frag = '';<!-- [et_pb_line_break_holder] --> this.$cards.each(function(k, v){<!-- [et_pb_line_break_holder] --> frag += '<div class="card" data-id="'+ v.id +'"><div class="inside"><div class="front"><img src="'+ v.img +'"alt="'+ v.name +'" /></div><div class="back"><img src="/wp-content/uploads/2017/06/honey-matching-game-back.png"alt="Hey Honey" /></div></div></div>';<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> return frag;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> var cards = [<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> name: "snow",<!-- [et_pb_line_break_holder] --> img: "/wp-content/uploads/2017/06/honey-matching-game-snow.jpg",<!-- [et_pb_line_break_holder] --> id: 1,<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> name: "congo",<!-- [et_pb_line_break_holder] --> img: "/wp-content/uploads/2017/06/honey-matching-game-congo-snow.jpg",<!-- [et_pb_line_break_holder] --> id: 2<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> name: "cushions",<!-- [et_pb_line_break_holder] --> img: "/wp-content/uploads/2017/06/honey-matching-game-cushions.jpg",<!-- [et_pb_line_break_holder] --> id: 3<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> name: "lala",<!-- [et_pb_line_break_holder] --> img: "/wp-content/uploads/2017/06/honey-matching-game-lala-couch.jpg",<!-- [et_pb_line_break_holder] --> id: 4<!-- [et_pb_line_break_holder] --> }, <!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> name: "dogpile",<!-- [et_pb_line_break_holder] --> img: "/wp-content/uploads/2017/06/honey-matching-game-sleeping-pile.jpg",<!-- [et_pb_line_break_holder] --> id: 5<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> name: "sticker",<!-- [et_pb_line_break_holder] --> img: "/wp-content/uploads/2017/06/honey-matching-game-sticker.jpg",<!-- [et_pb_line_break_holder] --> id: 6<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->/* ,<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> name: "downstairs",<!-- [et_pb_line_break_holder] --> img: "/wp-content/uploads/2017/06/honey-matching-game-downstairs.jpg",<!-- [et_pb_line_break_holder] --> id: 7<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> name: "basement",<!-- [et_pb_line_break_holder] --> img: "/wp-content/uploads/2017/06/honey-matching-game-basement.jpg",<!-- [et_pb_line_break_holder] --> id: 8<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> name: "hero",<!-- [et_pb_line_break_holder] --> img: "/wp-content/uploads/2017/06/honey-matching-game-hero.jpg",<!-- [et_pb_line_break_holder] --> id: 9<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> name: "sass",<!-- [et_pb_line_break_holder] --> img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sass-logo.png",<!-- [et_pb_line_break_holder] --> id: 10<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> name: "sublime",<!-- [et_pb_line_break_holder] --> img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sublime-logo.png",<!-- [et_pb_line_break_holder] --> id: 11<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> name: "wordpress",<!-- [et_pb_line_break_holder] --> img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/wordpress-logo.png",<!-- [et_pb_line_break_holder] --> id: 12<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] -->*/<!-- [et_pb_line_break_holder] --> ];<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] -->$(document).ready(function(){<!-- [et_pb_line_break_holder] --> Memory.init(cards);<!-- [et_pb_line_break_holder] --> }); <!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->})(jQuery);<!-- [et_pb_line_break_holder] --></script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><style><!-- [et_pb_line_break_holder] -->@import url(http://weloveiconfonts.com/api/?family=brandico);<!-- [et_pb_line_break_holder] -->/* brandico */<!-- [et_pb_line_break_holder] -->[class*="brandico-"]:before {<!-- [et_pb_line_break_holder] --> font-family: 'brandico', sans-serif;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->* {<!-- [et_pb_line_break_holder] --> box-sizing: border-box;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->html, body {<!-- [et_pb_line_break_holder] --> height: 100%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->body {<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> min-height: 100%;<!-- [et_pb_line_break_holder] --> font-family: "Arial", sans-serif;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.wrap {<!-- [et_pb_line_break_holder] --> background: #33a9cc;<!-- [et_pb_line_break_holder] --> position: relative;<!-- [et_pb_line_break_holder] --> height: 100%;<!-- [et_pb_line_break_holder] --> min-height: 500px;<!-- [et_pb_line_break_holder] --> border-radius: 5px;<!-- [et_pb_line_break_holder] --> padding: 5px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.game {<!-- [et_pb_line_break_holder] --> -webkit-transform-style: preserve-3d;<!-- [et_pb_line_break_holder] --> transform-style: preserve-3d;<!-- [et_pb_line_break_holder] --> -webkit-perspective: 500px;<!-- [et_pb_line_break_holder] --> perspective: 500px;<!-- [et_pb_line_break_holder] --> min-height: 100%;<!-- [et_pb_line_break_holder] --> height: 100%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.game:after {<!-- [et_pb_line_break_holder] --> content:"";<!-- [et_pb_line_break_holder] --> display:block;<!-- [et_pb_line_break_holder] --> clear:both;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->@-webkit-keyframes matchAnim {<!-- [et_pb_line_break_holder] --> 0% {<!-- [et_pb_line_break_holder] --> background: #bcffcc;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> 100% {<!-- [et_pb_line_break_holder] --> background: white;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->@keyframes matchAnim {<!-- [et_pb_line_break_holder] --> 0% {<!-- [et_pb_line_break_holder] --> background: #bcffcc;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> 100% {<!-- [et_pb_line_break_holder] --> background: white;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.card {<!-- [et_pb_line_break_holder] --> float: left;<!-- [et_pb_line_break_holder] --> width: 25%;<!-- [et_pb_line_break_holder] --> height: 33%;<!-- [et_pb_line_break_holder] --> padding: 5px;<!-- [et_pb_line_break_holder] --> text-align: center;<!-- [et_pb_line_break_holder] --> display: block;<!-- [et_pb_line_break_holder] --> -webkit-perspective: 500px;<!-- [et_pb_line_break_holder] --> perspective: 500px;<!-- [et_pb_line_break_holder] --> position: relative;<!-- [et_pb_line_break_holder] --> cursor: pointer;<!-- [et_pb_line_break_holder] --> z-index: 50;<!-- [et_pb_line_break_holder] --> -webkit-tap-highlight-color: transparent;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->@media (max-width: 800px) {<!-- [et_pb_line_break_holder] --> .card {<!-- [et_pb_line_break_holder] --> width: 33.333%;<!-- [et_pb_line_break_holder] --> height: 25%;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.card .inside {<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> height: 150px;<!-- [et_pb_line_break_holder] --> display: block;<!-- [et_pb_line_break_holder] --> -webkit-transform-style: preserve-3d;<!-- [et_pb_line_break_holder] --> transform-style: preserve-3d;<!-- [et_pb_line_break_holder] --> -webkit-transition: .4s ease-in-out;<!-- [et_pb_line_break_holder] --> transition: .4s ease-in-out;<!-- [et_pb_line_break_holder] --> background: white;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.card .inside.picked, .card .inside.matched {<!-- [et_pb_line_break_holder] --> -webkit-transform: rotateY(180deg);<!-- [et_pb_line_break_holder] --> transform: rotateY(180deg);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.card .inside.matched {<!-- [et_pb_line_break_holder] --> -webkit-animation: 1s matchAnim ease-in-out;<!-- [et_pb_line_break_holder] --> animation: 1s matchAnim ease-in-out;<!-- [et_pb_line_break_holder] --> -webkit-animation-delay: .4s;<!-- [et_pb_line_break_holder] --> animation-delay: .4s;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.card .front, .card .back {<!-- [et_pb_line_break_holder] --> -webkit-backface-visibility: hidden;<!-- [et_pb_line_break_holder] --> backface-visibility: hidden;<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> top: 0;<!-- [et_pb_line_break_holder] --> left: 0;<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> height: 100%;<!-- [et_pb_line_break_holder] --> padding: 10px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.card .front img, .card .back img {<!-- [et_pb_line_break_holder] --> max-width: 100%;<!-- [et_pb_line_break_holder] --> display: block;<!-- [et_pb_line_break_holder] --> margin: 0 auto;<!-- [et_pb_line_break_holder] --> max-height: 100%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.card .front {<!-- [et_pb_line_break_holder] --> -webkit-transform: rotateY(-180deg);<!-- [et_pb_line_break_holder] --> transform: rotateY(-180deg);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.card .back {<!-- [et_pb_line_break_holder] --> background-color: #cef0fa;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->@media (max-width: 800px) {<!-- [et_pb_line_break_holder] --> .card .front {<!-- [et_pb_line_break_holder] --> padding: 5px;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->@media (max-width: 800px) {<!-- [et_pb_line_break_holder] --> .card .back {<!-- [et_pb_line_break_holder] --> padding: 10px;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.modal-overlay {<!-- [et_pb_line_break_holder] --> display: none;<!-- [et_pb_line_break_holder] --> background: rgba(0, 0, 0, 0.8);<!-- [et_pb_line_break_holder] --> position: fixed;<!-- [et_pb_line_break_holder] --> top: 0;<!-- [et_pb_line_break_holder] --> left: 0;<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> height: 100%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.modal {<!-- [et_pb_line_break_holder] --> display: none;<!-- [et_pb_line_break_holder] --> position: relative;<!-- [et_pb_line_break_holder] --> width: 500px;<!-- [et_pb_line_break_holder] --> max-height: 90%;<!-- [et_pb_line_break_holder] --> max-width: 90%;<!-- [et_pb_line_break_holder] --> min-height: 250px;<!-- [et_pb_line_break_holder] --> margin: 0 auto;<!-- [et_pb_line_break_holder] --> background: white;<!-- [et_pb_line_break_holder] --> top: 50%;<!-- [et_pb_line_break_holder] --> -webkit-transform: translateY(-50%);<!-- [et_pb_line_break_holder] --> transform: translateY(-50%);<!-- [et_pb_line_break_holder] --> padding: 100px 30px;<!-- [et_pb_line_break_holder] -->text-align:center;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.modal h1 {<!-- [et_pb_line_break_holder] -->margin-bottom: 20px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --></style><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><div class="wrap"><!-- [et_pb_line_break_holder] --><div class="game"></div><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> <div class="modal-overlay"><!-- [et_pb_line_break_holder] --> <div class="modal"><!-- [et_pb_line_break_holder] --> <h1>You Rock!</h1><!-- [et_pb_line_break_holder] --> <button class="restart et_pb_button">Play Again?</button><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->