cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="particles-js">

</div>

<header>
  <h2><a target="_blank" href="https://mburakerman.github.io/memorizr/">MEMORIZR</a></h2>
  <p>Animal Pairs Game</p>
</header>

<section>
  <div class="buttons">
    <a href="https://github.com/mburakerman/memorizr/" target="_blank" class="fork">
      <svg viewBox="0 0 16 16" class="fork-svg" fill="#fff" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
                  <path d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8"/>
               </svg> Fork
    </a>
    <a href="https://twitter.com/share?url=https://mburakerman.github.io/memorizr/&text=Memorizr - Animal Pairs Game" target="_blank" class="tweet">
      <svg viewBox="0 0 16 16" class="tweet-svg" fill="#fff" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
                  <path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z" fill-rule="nonzero"/>
               </svg> Tweet
    </a>
  </div>
  <p class="total_clicks">
    <svg class="svg-icon level first-svg" viewBox="0 0 20 20">
               <path d="M17.684,7.925l-5.131-0.67L10.329,2.57c-0.131-0.275-0.527-0.275-0.658,0L7.447,7.255l-5.131,0.67C2.014,7.964,1.892,8.333,2.113,8.54l3.76,3.568L4.924,17.21c-0.056,0.297,0.261,0.525,0.533,0.379L10,15.109l4.543,2.479c0.273,0.153,0.587-0.089,0.533-0.379l-0.949-5.103l3.76-3.568C18.108,8.333,17.986,7.964,17.684,7.925 M13.481,11.723c-0.089,0.083-0.129,0.205-0.105,0.324l0.848,4.547l-4.047-2.208c-0.055-0.03-0.116-0.045-0.176-0.045s-0.122,0.015-0.176,0.045l-4.047,2.208l0.847-4.547c0.023-0.119-0.016-0.241-0.105-0.324L3.162,8.54L7.74,7.941c0.124-0.016,0.229-0.093,0.282-0.203L10,3.568l1.978,4.17c0.053,0.11,0.158,0.187,0.282,0.203l4.578,0.598L13.481,11.723z"></path>
            </svg>
    <svg class="svg-icon level second-svg" viewBox="0 0 20 20">
               <path d="M17.684,7.925l-5.131-0.67L10.329,2.57c-0.131-0.275-0.527-0.275-0.658,0L7.447,7.255l-5.131,0.67C2.014,7.964,1.892,8.333,2.113,8.54l3.76,3.568L4.924,17.21c-0.056,0.297,0.261,0.525,0.533,0.379L10,15.109l4.543,2.479c0.273,0.153,0.587-0.089,0.533-0.379l-0.949-5.103l3.76-3.568C18.108,8.333,17.986,7.964,17.684,7.925 M13.481,11.723c-0.089,0.083-0.129,0.205-0.105,0.324l0.848,4.547l-4.047-2.208c-0.055-0.03-0.116-0.045-0.176-0.045s-0.122,0.015-0.176,0.045l-4.047,2.208l0.847-4.547c0.023-0.119-0.016-0.241-0.105-0.324L3.162,8.54L7.74,7.941c0.124-0.016,0.229-0.093,0.282-0.203L10,3.568l1.978,4.17c0.053,0.11,0.158,0.187,0.282,0.203l4.578,0.598L13.481,11.723z"></path>
            </svg>
    <svg class="svg-icon level third-svg" viewBox="0 0 20 20">
               <path d="M17.684,7.925l-5.131-0.67L10.329,2.57c-0.131-0.275-0.527-0.275-0.658,0L7.447,7.255l-5.131,0.67C2.014,7.964,1.892,8.333,2.113,8.54l3.76,3.568L4.924,17.21c-0.056,0.297,0.261,0.525,0.533,0.379L10,15.109l4.543,2.479c0.273,0.153,0.587-0.089,0.533-0.379l-0.949-5.103l3.76-3.568C18.108,8.333,17.986,7.964,17.684,7.925 M13.481,11.723c-0.089,0.083-0.129,0.205-0.105,0.324l0.848,4.547l-4.047-2.208c-0.055-0.03-0.116-0.045-0.176-0.045s-0.122,0.015-0.176,0.045l-4.047,2.208l0.847-4.547c0.023-0.119-0.016-0.241-0.105-0.324L3.162,8.54L7.74,7.941c0.124-0.016,0.229-0.093,0.282-0.203L10,3.568l1.978,4.17c0.053,0.11,0.158,0.187,0.282,0.203l4.578,0.598L13.481,11.723z"></path>
            </svg> Clicks: <span>0</span>
  </p>

  <div class="wrapper">
    <div class="items"></div>
  </div>
</section>

<footer>
  <p class="copyright">&copy; &nbsp; <a href="https://mburakerman.github.io/" target="_blank" rel="external">Mehmet Burak Erman</a></p>
</footer>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

/// Colors
$background: #1A252F;
$color: #fff;
$matched-background-color: rgba(26, 37, 47, 0.6); //#1A252F;
$svg-level-color: #4C9D9B;
$svg-color: #e37575;
$description-color: #b1b1b1;
$footer-color: #959595;
$front-background-color: rgba(255, 255, 255, 0.6);
$back-background-color: rgba(26, 37, 47, 0.6);

/// Mixin to prefix a property
/// @author Hugo Giraudel
/// @param {String} $property - Property name
/// @param {*} $value - Property value
/// @param {List} $prefixes (()) - List of prefixes to print
@mixin prefix($property,
$value,
$prefixes: ()) {
  @each $prefix in $prefixes {
    #{'-' + $prefix + '-' + $property}: $value;
  }
  // Output standard non-prefixed declaration
  #{$property}: $value;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: none;
  text-decoration: none;
}

/* ---- particles.js ---- */

canvas {
  display: block;
  vertical-align: bottom;
}

#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: $background;
}

@media screen and (max-width: 650px) {
  canvas {
    display: none;
  }
  #particles-js {
    position: none;
    display: none;
  }
}

/* ---- particles.js ---- */

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  background: $background;
  font-family: 'Montserrat', sans-serif;
}

body {
  overflow-x: hidden;
}

header, section {
  max-width: 800px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
  position: relative;
}

footer {
  max-width: 800px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.5em;
  position: relative;
}

header {
  h2 {
    display: block;
    text-align: center;
    font-size: 2.8em;
    font-weight: 700;
    color: $color;
    @media screen and (max-width: 650px) {
      font-size: 2.2em;
    }
    a {
      color: $color;
      font-weight: 700;
    }
  }
  p {
    display: block;
    text-align: center;
    font-size: 1em;
    color: $description-color;
    @media screen and (max-width: 650px) {
      font-size: 0.8em;
    }
  }
}

section {
  height: auto;
  @media screen and (max-width: 650px) {
    width: 90%;
    height: auto;
  }
  margin-left: auto;
  margin-right: auto;

  .buttons {
    display: block;
    height: auto;
    padding: 1em 0;
    text-align: center;
    .fork {
      display: inline-block;
      margin-right: 0.2em;
      font-size: 1.5em;
      padding: .5em 1em;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.2);
      color: $color;
      @include prefix(transition,
            all 0.3s linear,
            webkit moz ms o);
      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }
      @media screen and (max-width: 650px) {
        font-size: 1.2em;
        padding: .4em 0.8em;
      }
    }
    .tweet {
      @extend .fork;
      margin-right: 0;
    }
    .fork-svg, .tweet-svg {
      width: 1em;
      height: 1em;
      position: relative;
      top: 0.15em;
    }
  }

  .total_clicks {
    display: block;
    text-align: center;
    color: #ddd;
    font-size: 1em;
    margin-bottom: 1em;
    @media screen and (max-width: 650px) {
      font-size: 0.8em;
    }
  }

  .wrapper {
    display: block;
    max-width: 800px;
    height: auto;
    @media screen and (max-width: 650px) {
      width: 90%;
      height: auto;
    }
    border-radius: 4px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    @include prefix(box-shadow,
        4px 4px 0px 0px rgba(255, 255, 255, 0.1),
        webkit);
    @include prefix(transform-style,
        preserve-3d,
        webkit moz ms o);
  }

  .items {
    position: relative;
    @include prefix(transform-style,
        preserve-3d,
        webkit moz ms o);
  }

  .container {
    position: relative;
    display: inline-block;
    @include prefix(perspective,450px,webkit moz ms o);
    @include prefix(transform-style,preserve-3d,webkit moz ms o);
    margin: 0.5em;
    width: 110px;
    height: 125px;
    @media screen and (max-width: 650px) {
      width: 90px;
      height: 105px;
    }
    cursor: pointer;
  }

  .front {
    text-indent: -999999px;
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 125px;
    @include prefix(box-shadow,4px 4px 0px 0px rgba(255, 255, 255, 0.1),webkit);
    @media screen and (max-width: 650px) {
      width: 90px;
      height: 105px;
    }
    border-radius: 4px;
    background: $front-background-color;
    @include prefix(transform,rotateY(0deg),webkit moz ms o);
    @include prefix(transition,all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s,webkit moz ms o);
    @include prefix(transform-style,preserve-3d,webkit moz ms o);
    @include prefix(backface-visibility, hidden,webkit moz ms o);
    z-index: 2;
    font-size: 15px;
    word-wrap: break-word;
    &:hover {
      background: darken($front-background-color, 50%);
    }
  }

  .back {
    @extend .front;
    background: $back-background-color;
    transform: rotateY(-180deg);
    z-index: 1;
    text-indent: 1px;
    &:hover {
      background: $back-background-color;
    }
  }

  .image {
    position: absolute;
    top: 50%;
    left: 50%;
    @include prefix(transform,
        translate(-50%, -50%),
        webkit moz ms o);
    width: 90%;
    max-width: 100%;
    height: auto;
  }

  /* classes */
  .showBack-front {
    @include prefix(transform,rotateY(180deg),webkit moz ms o);
  }
  .showBack-back {
    @include prefix(transform,rotateY(0deg),webkit moz ms o);
    z-index: 2;
  }
  .matched {
    background: $matched-background-color;
    @include prefix(box-shadow,4px 4px 0px 0px rgba(26, 37, 47, 0.2),webkit);
    pointer-events: none;
    @include prefix(transform,rotateY(0deg),webkit moz ms o);
    z-index: 2;
  }
  .no-pointer-events {
    pointer-events: none !important;
  }
  /* for mozilla issue */
  .noOpacity {
    opacity: 0;
  }
  .yesOpacity {
    opacity: 1;
  }
  .matched .image {
    opacity: 1 !important;
  }
  /* for mozilla issue */

  /* classes */

  /* SVG Icons - svgicons.sparkk.fr */
  .svg-icon {
    width: 1.2em;
    height: 1.2em;
    position: relative;
    top: 0.2em;
    @media screen and (max-width: 650px) {
      font-size: 1em;
      top: 0.1em;
    }
  }
  .svg-icon path, .svg-icon polygon, .svg-icon rect {
    fill: $svg-color;
  }
  .svg-icon circle {
    stroke: $svg-color;
    stroke-width: 1;
  }
  /* Level class */
  .level path, .level polygon, .level rect {
    fill: $svg-level-color;
  }
  .level circle {
    stroke: $svg-level-color;
    stroke-width: 1;
  }
}

footer {
  .copyright {
    display: block;
    text-align: center;
    font-size: 0.8em;
    color: $footer-color;
    @media screen and (max-width: 650px) {
      font-size: 0.7em;
    }
    a {
      color: $footer-color;
      &:hover {
        color: $description-color;
      }
    }
  }
}

            
          
!
            
              $(function() {
  var img_urls = [
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/deer.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/dolphin.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/kangaroo.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/leopard.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/panther.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/penguin.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/rabbit.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/sheep.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/swan.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/wolf.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/zebra.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/duck.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/deer.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/dolphin.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/kangaroo.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/leopard.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/panther.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/penguin.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/rabbit.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/sheep.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/swan.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/wolf.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/zebra.png",
    "https://raw.githubusercontent.com/mburakerman/memorizr/master/img/duck.png"
  ];

  //Shuffle js array > http://stackoverflow.com/a/2450976/4991434
  function shuffle(array) {
    var currentIndex = array.length,
      temporaryValue,
      randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {
      // Pick a remaining element...
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      // And swap it with the current element.
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }

    return array;
  }

  var arr = img_urls;
  arr = shuffle(arr);

  for (i = 0; i < img_urls.length; i++) {
    $(".items").append(
      "<div class='container'><div class='front'>" +
        img_urls[i] +
        "</div><div class='back'><img class='image' src=' " +
        img_urls[i] +
        "'/></div></div>"
    );
  }

  var first;
  var second;

  var total_clicks = 0;
  var count = 0;

  function check_level() {
    if (total_clicks === 10) {
      $(".first-svg").removeClass("level");
    } else if (total_clicks === 15) {
      $(".second-svg").removeClass("level");
    } else if (total_clicks === 20) {
      $(".third-svg").removeClass("level");
    }
  }

  function game_over() {
    if ($(".matched").length === 48) {
      setTimeout(function() {
        alert("Congrats. You have finished the game!");
      }, 1200);

      setTimeout(function() {
        location.reload();
      }, 1800);
    }
  }

  // for mozilla issue, make opacity 0 as default
  $(".image").addClass("noOpacity");

  $(".front").click(function(e) {
    // for mozilla issue, play opacity of .image
    var self = this;
    setTimeout(function() {
      $(self).next(".back").find(".image").addClass("yesOpacity");
    }, 300);

    count++;

    // prevent fast click
    if ($(e.target).data("oneclicked") != "yes") {
      $(e.target).css("pointer-events", "none");
      setTimeout(function() {
        $(e.target).css("pointer-events", "auto");
      }, 400);
    }

    if (count === 1) {
      $(this, ".front").addClass("showBack-front").addClass("clicked");
      $(this).next(".back").addClass("showBack-back").addClass("clicked");

      first = $(this, ".front").text();
    } else {
      $(this, ".front").addClass("showBack-front").addClass("clicked");
      $(this).next(".back").addClass("showBack-back").addClass("clicked");

      second = $(this, ".front").text();
      count = 0;

      $(".front").css("pointer-events", "none");

      setTimeout(function() {
        if (first === second) {
          total_clicks = total_clicks - 1;

          $(".clicked").addClass("animated tada matched no-pointer-events");

          //Check if game is over
          game_over();
        } else {
          $(".front").removeClass("showBack-front");
          $(".back").removeClass("showBack-back");

          $(".clicked").addClass("animated shake");

          setTimeout(function() {
            $(".clicked").removeClass("clicked shake");

            // for mozilla issue, play opacity of .image
            $(".image").not("section .matched").removeClass("yesOpacity");
            $(".image").not("section .matched").addClass("noOpacity");
          }, 500);
        }

        $(".front").css("pointer-events", "auto");

        total_clicks++;
        $(".total_clicks span").text(total_clicks);
        check_level();
      }, 525);
    }

    return false;
  });

  // hide particles in mozilla
  if (navigator.userAgent.indexOf("Firefox") > 0) {
    document.getElementById("particles-js").style.display = "none";
  }
});

particlesJS("particles-js", {
  particles: {
    number: {
      value: 150,
      density: {
        enable: true,
        value_area: 800
      }
    },
    color: {
      value: "#e37575"
    },
    shape: {
      type: "circle",
      stroke: {
        width: 0,
        color: "#e37575"
      },
      polygon: {
        nb_sides: 5
      },
      image: {
        src: "img/github.svg",
        width: 100,
        height: 100
      }
    },
    opacity: {
      value: 0.5,
      random: false,
      anim: {
        enable: false,
        speed: 1,
        opacity_min: 0.1,
        sync: false
      }
    },
    size: {
      value: 3,
      random: true,
      anim: {
        enable: false,
        speed: 1,
        size_min: 0.1,
        sync: false
      }
    },
    line_linked: {
      enable: true,
      distance: 150,
      color: "#e37575",
      opacity: 0.4,
      width: 1
    },
    move: {
      enable: true,
      speed: 2,
      direction: "none",
      random: false,
      straight: false,
      out_mode: "out",
      bounce: false,
      attract: {
        enable: false,
        rotateX: 600,
        rotateY: 1200
      }
    }
  },
  interactivity: {
    detect_on: "canvas",
    events: {
      onhover: {
        enable: true,
        mode: "grab"
      },
      onclick: {
        enable: true,
        mode: "push"
      },
      resize: true
    },
    modes: {
      grab: {
        distance: 140,
        line_linked: {
          opacity: 1
        }
      },
      bubble: {
        distance: 400,
        size: 40,
        duration: 2,
        opacity: 8,
        speed: 3
      },
      repulse: {
        distance: 200,
        duration: 0.4
      },
      push: {
        particles_nb: 4
      },
      remove: {
        particles_nb: 2
      }
    }
  },
  retina_detect: true
});

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console