Membuat Game Menjodohkan Kartu Dengan PHP, JQuery, dan CSS (Demo+Source)

Mungkin anda pernah memainkan game mengingat dan menjodohkan gambar (Memory Game) seperti berikut ini:

Pada kesempatan kali ini saya akan membagikan kepada anda contoh source untuk membuat game tersebut dengan menggunakan php, jquery, dan css (mohon maaf jika mungkin masih belum sempurna karena saya hanya iseng membuatnya)

Berikut penjelasan singkat source code game menjodohkan gambar kartu:

card-game.php

start php

// Each sponsor is an element of the $sponsors array:
$sponsors = array(
 array('ea','card'),
 array('mysql','card'),
 array('hp','card'),
 array('cisco','card'),
 array('canon','card'),
 array('ea','card'),
 array('mysql','card'),
 array('hp','card'),
 array('cisco','card'),
 array('canon','card')
);

// Randomizing the order of sponsors:
shuffle($sponsors);

end php




Well Done, You Have a Good Memory!
Play again?

        
        

Nice, You Have an Average Memory!
Play again?

        
        

Bad Memory? No, I Think You Can Do Better :]
Play again?

 


  
               start php
   
   // Looping through the array:
   $num=1;
   foreach($sponsors as $card)
   {
    echo'
    

     

      
     

      
     

';
    $num++;
   }
  
  end php

              
     

script.js

$(document).ready(function(){
 $('.good').hide();
 $('.nice').hide();
 $('.bad').hide();
 /* The following code is executed once the DOM is loaded */
 var selected=0;
 var card1;
 var card2;
 var tries=0;
    var hidden=0;
 var busy;
 $('.sponsorFlip').bind("click",function(){
  if(($(this).data('flipped')&&selected==1)||busy==1){
  //do nothing 
  }else{
  busy=1;
  //alert(busy);
  if(selected==0){
   card1=this.id; 
   
  }else if(selected==1){
   card2=this.id;  
   
  }
  // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
  var elem = $(this);
   // Using the flip method defined by the plugin:
   elem.flip({
    direction:'lr',
    speed: 350,
    onBefore: function(){
     // Insert the contents of the .sponsorData div (hidden from view with display:none)
     // into the clicked .sponsorFlip div before the flipping animation starts:
     
     elem.html(elem.siblings('.sponsorData').html());
    }
   });
   selected=selected+1;
   // data('flipped') is a flag we set when we flip the element:
   elem.data('flipped',true);
   if(selected==2)
   {
    selected=0;
    tries++;
    //kalau sama kartu disembunyikan
    if(card1==card2){
     hidden=hidden+2;
     setTimeout(hidecard, 1000);
     if(hidden==10){
      hideboard();
      if(tries>=5&&tries<=10){
       setTimeout($('.good').show('slow'), 6000);
      }else if(tries>=11&&tries<=15){
       setTimeout($('.nice').show('slow'), 6000);
      }else{
       setTimeout($('.bad').show('slow'), 6000);
      }
     }
    //kalau tidak sama kartu ditutup kembali
    }else if(card1!=card2){
     setTimeout(flipcard, 1000);
     
    }
    card1="";
    card2="";
    
    $('#step').text('Step = '+tries);
    
   }
  }if(selected==1){
   setTimeout(free, 500);
  }
 });
 
 function free(){
 busy=0
 }
 function flipcard() {
   
 $('.sponsorFlip').each(function() {
  if($(this).data('flipped')){
    $(this).revertFlip()
    // Unsetting the flag:
    $(this).data('flipped',false);
      
  }
  setTimeout(free, 1000);
 });
 }
 
 function hidecard(){
  $('.sponsorFlip').each(function() {
    if($(this).data('flipped')){
      $(this).hide('fast');
    }
    
  });
  setTimeout(free, 1000);
  selected=0; 
 }
 function hideboard(){
  setTimeout($('.sponsorListHolder').remove(),4500);
 }
 
});

pada script JQuery diatas, saya sengaja menggunakan banyak function setTimeout() untuk memberi delay agar kartu tidak dapat dibuka secara brutal (membuka semua kartu dengan cepat) karena akan mengacaukan function2 yang sedang berjalan.

♠ Demo ♠
♣ Source Code ♣