Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Memory Game</title>
​
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="weather.png" type="image/x-icon"/>
    <link href="css/main.css" rel="stylesheet">
​
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
​
    <div class="container text-center">
        <h1>Test Your Memory!</h1>
​
        <button class="btn btn-danger" id="start-easy">Easy(4x4)</button>
        <button class="btn btn-danger" id="start-medium">Medium(6x6)</button>
        <button class="btn btn-danger" id="start-hard">Hard(8x8)</button>
​
        <hr>
​
        <div id="cards"></div>
    </div>
​
​
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <!-- Include all compiled plugins (below), or include individual files as needed -->
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
​
    <script src="js/main.js"></script>
​
  </body>
</html>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
$(document).ready(function(){
​
    var easy = "easy";
    var medium = "medium";
    var hard = "hard";
​
    var type = "";
​
    // We put our functions in JS object
    var app = {
        cards: [
            
        ],
        init: function(data){ 
            easyArray=[
                'http://3.bp.blogspot.com/-JhISDA9aj1Q/UTECr1GzirI/AAAAAAAAC2o/5qmvWZiCMRQ/s1600/Twitter.png',
                'http://3.bp.blogspot.com/-JhISDA9aj1Q/UTECr1GzirI/AAAAAAAAC2o/5qmvWZiCMRQ/s1600/Twitter.png',
                'http://www.convertimage.net/frontframe/images/cute_ball_info.png',
                'http://www.convertimage.net/frontframe/images/cute_ball_info.png',
                'http://www.simpleimageresizer.com/static/images/simple-image-resizer-128x128.png',
                'http://www.simpleimageresizer.com/static/images/simple-image-resizer-128x128.png',
                'http://www.coffeecup.com/images/software/icons/image-mapper_5.0_win_en.png',
                'http://www.coffeecup.com/images/software/icons/image-mapper_5.0_win_en.png',
                'http://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png',
                'http://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png',
                'http://cdn3.iconfinder.com/data/icons/seo-marketing-3/32/seo-marketing-image-search-128.png',
                'http://cdn3.iconfinder.com/data/icons/seo-marketing-3/32/seo-marketing-image-search-128.png',
                'http://fundingportal.com/tfportal/img/socialmediaicons/newslettericon.png',
                'http://fundingportal.com/tfportal/img/socialmediaicons/newslettericon.png',
                'http://www.cinema.com.my/_images/Movies/play-icon.png',
                'http://www.cinema.com.my/_images/Movies/play-icon.png',
            ];
            // if (type === 'easy') {
            //  cards=easyArray;
            // } else if (type === 'medium') {
            //  cards=easyArray;
            // } else {
            //  cards=easyArray;
            // }
            switch (data.type) {
                case easy:
                    cards = easyArray.slice(0);
                    break;
                case medium:
                    cards = mediumArray.slice(0);
                    break;
                case hard:
                    cards = hardArray.slice(0);
                    break;
            }
​
            // Below I created my HTML
            var $cards = $("#cards");
            $cards.empty();
            $cards.append("<section id=\"mySection\" class=\"containerWin\"></section>");
            
            for (var j=0; j<Math.sqrt(app.cards.length); j++) {
                for (var i=0; i<Math.sqrt(app.cards.length); i++) {
                    $('#mySection').append("<div class='flip-container'>");
                }   
                $('.containerWin').append('<div>');
            }
            $('.flip-container').append("<div class='card unmatched'>");
            $('.card').append("<div class='front'>");
            $('.card').append("<div class='back'>");
​
            app.shuffle();
        },
        shuffle: function(){
            // We are making random cards come up with this function
            var random=0;
            var temp=0;
            for (var i = 0; i<app.cards.length; i++) {
                random=Math.round(Math.random()*i);
                temp=app.cards[i];
                app.cards[i]=app.cards[random];
                app.cards[random]=temp;
            }
            app.assignCards(); // We are putting it here because we want it to shuffle cards first then assign them
            console.log("Shuffled cards array: " + app.cards);
        },
        assignCards: function() {
            $('.card').each(function(index){
                $(this).attr('data-card-value', app.cards[index]);
            });
            app.clickHandlers(); // We wonna do this function after they are shuffled and assigned so we put it here
        },
        clickHandlers: function() {
            $('.card').on('click', function(){
                // $(this).data('cardValue') > gives us number from data attribute
                // We call data attributes using camelCase in our case cardValue
                $(this).toggleClass('flipped');
                $(this).addClass('selected');
                $('.back', this).html('<img src=' + $(this).data('cardValue') +  '>');
                app.checkMatch();
            });
        },
        checkMatch: function() {
            if ($('.selected').length === 2) {
                if ($('.selected').first().data('cardValue') == $('.selected').last().data('cardValue')) {
                    $('.selected').each(function() {
                        $(this).animate({
                            opacity: 0
                        }).removeClass('unmatched');
                    });
​
                    // remove selected cards
                    $('.selected').each(function() {
                        $(this).removeClass('selected');
                    });
                    app.checkWin();
                }
                else {
                    // flip cards back over
                    setTimeout(function(){
                        $('.selected').each(function(){
                            $(this).toggleClass('flipped').removeClass('selected');
                        });
                    }, 735);
                }
            }
        },
        checkWin: function() {
            if ($('.unmatched').length === 0) {
                $('.containerWin').html('<h1>You Won</h1>');
            }
        }
    };
    // $('#start-easy').on('click', function() {
    //  app.init();
    // });
    $('#start-easy').click({type:easy}, function(event){
        app.init(event.data);
    });
    
​
​
​
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Karadjordjepro
0viewers