javascript - 内存游戏数组

Question

大家好，我正在尝试制作简单的内存游戏，但遇到了一些问题。所以我制作了基本结构并决定对其进行扩展并添加不同的难度。 为了做到这一点，我决定创建 switch 循环并根据用户选择的难度更改我的卡片数组。我从卡片数组中复制了链接并将其放入 easyArray 中。代码:

$(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(){
        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 (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(){
    app.init();
});




});

这是 HTML:

<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>

现在，即使当我单击简单难度后 console.log 卡数组时，这也不起作用，这似乎很好。现在我是JS新手，我什至不知道我的方法是否正确。甚至可以这样完成以及如何完成？

这是带有完整代码的 JSBin:http://jsbin.com/yidobe/edit?js,output

Answer 1

init: function(){

应该是

init: function(data){

和

$('#start-easy').click({type:easy}, function(){
  app.init();
});

应该是

$('#start-easy').click({type:easy}, function(event){
  app.init(event.data);
});

和

switch(type) {

应该是

switch(data.type) {

和

cards = easyArray.slice(0);

应该是

this.cards = easyArray.slice(0);