<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Tologatós játék</title>
      <meta name="author" content="Tóth Péter" />
      <meta name="copyright" content="© 2012, NYME SEK" />
      <meta http-equiv="date" content="2012-10-01" />
      <meta name="revised" content="Tóth Péter, 01/10/2012" />
      <meta name="description" content="jQuery - Tologatós játék" />
      <meta http-equiv="content-language" content="hu" />
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <style type="text/css">
         .szin0{
            background-color:blue;
            }
         .szin1{
            background-color:green;
            }
         .szin2{
            background-color:red;
            }
         .szin3{
            background-color:yellow;
            }
         #idMatrix .szin4{
            background-color:transparent;
            border:0px none transparent;
            }
         .kocka{
            border:1px solid black;
            margin:2px;
            padding:0;
            outline:0;
            width:100px;
            height:100px;
            position:absolute;
            }
         #idMatrix{
            width:400px;
            height:400px;
            }
      </style>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
      <script type="text/javascript">
         <!--
         // Egy kocka mozgatása az üres helyre
         // iKocka - A lenyomott kocka ID-je
         // bEll   - Legye-e játék vége ellenőrzés
         function funcMozgat(iKocka,bEll){
            // Ellenőrizzük, hogy melyik irányban kell eltolni
            // Viszintes eltolás
            if(aMatrix[iKocka][1]==aMatrix[iKockaUres][1]){
               // Mozgatás irányának megállapítása
               if(aMatrix[iKockaUres][0]>aMatrix[iKocka][0])
                  var iMozgat=-1;
               else
                  var iMozgat=1;
               // Üres kocka csermozgatása amíg nem cserél helyet a kijelöl kockával
               do{
                  iKeresX=aMatrix[iKockaUres][0]+iMozgat;
                  // Megkeressük a mozgatandó kockát
                  iKeres=iKockaUres-1;
                  while(!((aMatrix[iKeres][1]==aMatrix[iKockaUres][1])&&(aMatrix[iKeres][0]==iKeresX)))iKeres-=1;
                  // Poziciókat kicseréljük
                  i=aMatrix[iKeres][0];
                  aMatrix[iKeres][0]=aMatrix[iKockaUres][0];
                  aMatrix[iKockaUres][0]=i;
                  // Új pozicíóra mozgatás
                  //$("#kocka_"+iKockaUres).animate({left:(aMatrix[iKockaUres][0]*100)+"px"});
                  $("#kocka_"+iKeres    ).animate({left:(aMatrix[iKeres][0]*100)+"px"});
                  }
               while(iKocka!=iKeres);
            }else
            // Függőleges eltolás
            if(aMatrix[iKocka][0]==aMatrix[iKockaUres][0]){
               // Mozgatás irányának megállapítása
               if(aMatrix[iKockaUres][1]>aMatrix[iKocka][1])
                  var iMozgat=-1;
               else
                  var iMozgat=1;
               // Üres kocka csermozgatása amíg nem cserél helyet a kijelöl kockával
               do{
                  iKeresY=aMatrix[iKockaUres][1]+iMozgat;
                  // Megkeressük a mozgatandó kockát
                  iKeres=iKockaUres-1;
                  while(!((aMatrix[iKeres][0]==aMatrix[iKockaUres][0])&&(aMatrix[iKeres][1]==iKeresY)))iKeres-=1;
                  // Poziciókat kicseréljük
                  i=aMatrix[iKeres][1];
                  aMatrix[iKeres][1]=aMatrix[iKockaUres][1];
                  aMatrix[iKockaUres][1]=i;
                  // Új pozicíóra mozgatás
                  //$("#kocka_"+iKockaUres).animate({top:(aMatrix[iKockaUres][1]*100)+"px"});
                  $("#kocka_"+iKeres    ).animate({top:(aMatrix[iKeres][1]*100)+"px"});
                  }
               while(iKocka!=iKeres);
            // Ha nincs egy sorban a lyukas hellyel, akkor nem csinál semmit
            }else{}
               
            // Játék végének ellenőrzése
            // Minden sorban csak egy szín lehet
            if(bEll){
               // Elenőrzéshez készítünk egy segédtömböt, ami megmutatja, hogy az adott sorban milyen szín van
               var aSor=new Array();
               for(i=0;i<=3;i++)aSor[i]=-1;
               // Ezzel jelezzük, hogy van-e kivétel, mert akkor nem kell tovább ellenőrizni
               var b=true;
               i=0;
               while((i<=15)&& b){
                  // A 4-es a lyukas kocka, azt nem vesszük figyelembe az ellenőrzés során
                  if(aMatrix[i][2]<4)
                     // Az adott sor első ellenőrzésekor felveszi az ott található kocka színét
                     if(aSor[aMatrix[i][1]]==-1)
                        aSor[aMatrix[i][1]]=aMatrix[i][2];
                     else // Minden további kockának ugyanolyan színűnek kell lennie
                        if(aSor[aMatrix[i][1]]!=aMatrix[i][2])
                           b=false;
                  i++;
                  }
               if(b) // Ha minden sor egyszínű, akkor üzenet
                  alert("Gratulálunk!");
               }
            }
         // KOckák kirajzolása
         function funcMatrixRajzolas(){
            // Megjelenés létrehozása
            var sz="";
            for(i in aMatrix)
               if(i<15)
                  sz+="<div id=\"kocka_"+i+"\" class=\"kocka szin"+aMatrix[i][2]+"\" style=\"left:"+(aMatrix[i][0]*100)+"px;top:"+(aMatrix[i][1]*100)+"px;\"></div>";
            document.getElementById("idMatrix").innerHTML=sz;
            // Kockára való klikkelés esemény lekezelésének létrehozása
            $(".kocka").click(function(){
               funcMozgat($(this).attr("id").split("_")[1],true);
               });
            }
         // Mátrix létrehozása
         var aMatrix=new Array();
         var i=0;
         for(var iX=0;iX<=3;iX++){
            for(var iY=0;iY<=3;iY++){
               aMatrix[i]=new Array();
               aMatrix[i][0]=iX; // X pozíció (oszlop száma)
               aMatrix[i][1]=iY; // Y pozíció (sor száma)
               aMatrix[i][2]=iY; // Szín kód
               i++;
               }
            }
         // Egy kocka kijelölése üres területnek
         // (4-es jelenti, hogy üres terület)
         var iKockaUres=15;
         aMatrix[iKockaUres][2]=4;
         // jQuery betöltődés után aktiválódo script
         $(document).ready(function(){
            // Mátrix kirajzolása
            funcMatrixRajzolas();
            // Mátrix összekeverése
            for(var i=1;i<=100;i++){
               // Melyik kockát mozgatjuk át
               iKocka=Math.floor((Math.random()*15));
               funcMozgat(iKocka,false);
               }
            });
         -->
      </script>
   </head>
   <body>
      <div id="idMatrix"></div>
   </body>
</html>