MemoryGame Arrays

Question

Привет, ребята, я пытаюсь сделать простую игру памяти, и у меня возникают некоторые проблемы. Поэтому я сделал базовую структуру и решил расширить ее и добавить различные трудности. Чтобы сделать это, я решил создать цикл переключателя и изменить массив карт в зависимости от сложности, которую пользователь выбрал. Я скопировал ссылки из массива карт и поместил их в 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);