Membuat Game Mencocokkan Kartu Dengan PHP, Jquery & CSS

Hallo IT Loverz, kali ini saya akan memberikan sedikit tutorial atau mungkin lebih tepatnya script open source untuk Membuat Game Mencocokkan Kartu Dengan PHP, Jquery & CSS.

card-game.php

<title>Mini Card Game With jQuery & CSS | Tutorial Demo</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery.flip.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>


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

<div id="main">
<span class="good" style="text-align: center;"><h1>
Well Done, You Have a <span style="color: #009933;">Good</span> Memory!
<a href="http://www.blogger.com/card-game.php">Play again?</a></h1>
</span>
     
        <span class="nice" style="text-align: center;"><h1>
Nice, You Have an <span style="color: #0033ff;">Average</span> Memory!
<a href="http://www.blogger.com/card-game.php">Play again?</a></h1>
</span>
     
        <span class="bad" style="text-align: center;"><h1>
<span style="color: #cc0000;">Bad</span> Memory? No, I Think You Can Do Better :]
<a href="http://www.blogger.com/card-game.php">Play again?</a></h1>
</span>
 <div class="sponsorListHolder">

               start php
 
   // Looping through the array:
   $num=1;
   foreach($sponsors as $card)
   {
    echo'
    <div class="sponsor">
     <div class="sponsorFlip" id="'.$card[0].'" num="'.$num.'">
      <img alt="" src="img/sponsors/'.$card[1].'.png">
     </div>
<div class="sponsorData">
      <img alt="" src="img/sponsors/'.$card[0].'.png">
     </div>
</div>
';
    $num++;
   }

  end php
           
     <div class="clear">
</div>
</div>
</div>

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. Jika masih terdapat banyak kekurangan saya mohon maaf :)

DOWNLOAD SOURCE CODE

JANGAN LUPA SHARE DAN TINGGALKAN KOMENTAR ANDA

MESKI HANYA DALAM SATU KATA

ITU SANGAT MEMBANTU UNTUK KEMAJUAN BLOG INI

~~~~~~~~~~~~ TERIMA KASIH ~~~~~~~~~~~~