HRA "Přeskakování žab"

zaba.png
nezaba.png
vo.png
sv.png
zabas.png
zaba-data.txt

1. pomocí JavaScript si připravíme tabulku 5x5 buněk

     document.write("<table border=1><tr>");
     for (i=0;i<5;i++){
       for (j=0;j<5;j++){
         document.write("<td></td>");
         if (j % 5 == 4){
           document.write("</tr><tr>");
         }
       }
     }
     document.write("</table>");
     

2. v buňkách "0,0;0,2;0,4;1,1; ..." tj. tam kde budou "sedět žáby" si připravíme obrázek (zatím bez src a dáme mu unikátní id)
   do ostatních buněk připravíme svislé (sv.png) resp. vodorovné čáry (vo.png) (vodorovné v sudých, svislé v lichých řádcích)

     document.write("<table><tr>");
   
     for (i=0;i<5;i++){
       for (j=0;j<5;j++){
         soucet=i+j;
         if (soucet % 2 ==0){
             document.write('<td><img  id=p'+i+'_'+j+'></td>');
         }else{
           if (i % 2==0){
             document.write("<td align=center><img src=vo.png></td>");
           }else{
             document.write("<td align=center><img src=sv.png></td>");
           }
         }
         if (j % 5 == 4){
           document.write("</tr><tr>");
         }
       }
     }
     document.write("</table>");
     

3. ze souboru zaba-data.txt si zkopirujeme první řádek
   00000;00010;00001;00000;10100
   a připravíme podle něj rozmístění žab do dvourozměrného pole

   pom="00000;00010;00001;00000;10100";
   radky=pom.split(";");
   roz=Array(0);
   for (i=0;i<5;i++){
     roz[i]=radky[i].split("");
   }
   

4. pripravíme si funkci "rozmisti()", která umístí žáby na políčka podle pole roz

   function rozmisti(){
     for (i=0;i<5;i++){
       for (j=0;j<5;j++){
         soucet=i+j;
         if (soucet % 2 ==0){
           if (roz[i][j]==1){src="zaba.png";}else{src="nezaba.png";}
           document.getElementById('p'+i+'_'+j).src=src;
         }
       }
     }
   }
   

   a funkci zavoláme:
5. připravíme si funkci klikna(x,y), která ošetří kliknutí na políčko i,j
   funkce bude zatím jen hlásit, kam bylo kliknuto

   function klikna(x,y){
     alert("kliknul jsi na "+x+","+y);
   }
   

6. funkci klikna(x,y) přidáme jako akci onClick() pro obrázky se žábami tj. při tvorbě tabulky
   

   document.write('<td><img  id=p'+i+'_'+j+' onClick="klikna('+i+','+j+');"> /td>');
   

7. musíme si zapamatovat jestli kliknutí je první (klik odkud žába skáče) nebo druhé (kam skáče)
   resp. obecně souřadnice x,y "z" (políčka) a "na" (políčko) na začátek si připravíme čtyři proměnné a vyplníme -1

   zx=-1;
   zy=-1;
   nax=-1;
   nay=-1;
   

8. ve funkci klikna(x,y) ošetříme 1.kliknutí, když na políčku "sedí" žába obrázek změníme na "zabas.png"
   tj. žába se připravuje ke skoku (zároveň si musím zapamatovat souřadnice odkud skáču)
   když tam žába nesedí, klik jakoby se nestal

   function klikna(x,y){
     if (zx==-1){
       //ošetřuji první kliknutí
       zx=x;
       zy=y;
       if (roz[zx][zy]==1){
         document.getElementById('p'+zx+'_'+zy).src="zabas.png";
       }else{
         zx=-1;
       }
     }
   }
   

9. ve funkci klikna(x,y) ošetříme druhé kliknutí - zatím tak, že žába přeskočí na druhé políčko
   (nekontrolujeme, jestli je ten skok "možný")

   function klikna(x,y){
     if (zx==-1){
       //ošetřuji první kliknutí
       zx=x;
       zy=y;
       if (roz[zx][zy]==1){
         document.getElementById('p'+zx+'_'+zy).src="zabas.png";
       }else{
         zx=-1;
       }
     }else{
     //ošetřuji druhé kliknutí
       nax=x;
       nay=y;
       roz[x][y]=1;
       roz[zx][zy]=0;
       rozmisti();
       zx=-1;
     }
   }
   

10. funkci klikna(x,y) dále upravíme tak, aby bylo možné skočit pouze na prázdné políčko
    není to jediná podmínka, proto si zavedeme proměnou kontrola a nastavíme na 0

    function klikna(x,y){
      if (zx==-1){
        //ošetřuji první kliknutí
        zx=x;
        zy=y;
        if (roz[zx][zy]==1){
          document.getElementById('p'+zx+'_'+zy).src="zabas.png";
        }else{
          zx=-1;
        }
      }else{
      //ošetřuji druhé kliknutí
        nax=x;
        nay=y;
        kontrola=0;
        if (roz[nax][nay]==0){
          kontrola=1;
        }
    
        if (kontrola==1){
          roz[x][y]=1;
          roz[zx][zy]=0;
          rozmisti();
        }else{
          document.getElementById('p'+zx+'_'+zy).src="zaba.png";
        }
        zx=-1;
      }
    }
    

11. další podmínka pro správný skok je, aby mezi políčky "z" a "na" seděla žába
    políčko mezi získáme jako "průměr" "z" a "na"

    midx=zx+0.5*(nax-zx);
    midy=zy+0.5*(nay-zy);
    if (roz[midx][midy]==0){
      kontrola=0;
    }
    ...
    if (kontrola==1){
      roz[x][y]=1;
      roz[zx][zy]=0;
      rozmisti();
    }else{
       document.getElementById('p'+zx+'_'+zy).src="zaba.png";
    }
    

12. předchozí kontrola nepostihne případ, kdy bych se pokusil přeskočit "z rohu do rohu"
    a uprostřed by "seděla" žába, to mohu ošetřit např. vzdáleností skoku, která nesmí být delší než 4

    dx=nax-zx;
    dy=nay-zy;
    dist=Math.sqrt(dx*dx+dy*dy);
    if (dist>4){
      kontrola=0;
    }
    

13. zatím jsme měli pouze jedno zadání pro zajímavost si můžeme vytvořit pole zadání (z zaba-data.txt)

    zadani=Array();
    zadani[0]="00000;00010;00001;00000;10100";
    zadani[1]="00100;01010;00100;01010;00000";
    zadani[2]="00000;01010;10101;01010;00000";
    ...
    zadani[38]="10101;01010;10001;01010;10101";
    nahodne=Math.floor(Math.random() * 38);
    pom=zadani[nahodne];