|
Przyk│ad zrobienia puzzli zaczerpn▒│em z Komputer ªwiata, jednak sam dopisa│em
do niego stoper licz▒cy czas uk│adania puzzli.
Pierwsze co musimy zrobiµ, to podzieliµ rysunek na prostok▒tne czΩ╢ci. Niestety, musi byµ tyle samo wierszy co kolumn, czyli puzzle typu 5x3 nie
wchodz▒ w grΩ.
Obrazki numerujemy kolejno od 0 od np. 8 (gdy mamy puzzle 3x3). Rysunki musz▒ byµ w formacie JPG! Nale┐y tak┐e przygotowaµ pusty
prostok▒t o takich
samych wymiarach jak czΩ╢ci, jednak jednokolorowy (na niego bΩd▒ zamieniaµ siΩ
czΩ╢ci) o nazwie "_.jpg".
CzΩ╢ci nie musz▒ byµ kwadratami, mog▒ byµ prostok▒tami.
NastΩpnie w tre╢ci strony powinien znale╝µ siΩ fragment kodu:
<form name="puzzle">
<table border="3" celspacing="0" cellpadding="0">
<tr><td>
<a href="javascript:Zamien(0);"><img src="0.jpg"
name="pole0" border="1" alt="Puzzle"></a>
<a href="javascript:Zamien(1);"><img src="1.jpg"
name="pole1" border="1" alt="Puzzle"></a>
<a href="javascript:Zamien(2);"><img src="2.jpg"
name="pole2" border="1" alt="Puzzle"></a><br>
<a href="javascript:Zamien(3);"><img src="3.jpg"
name="pole3" border="1" alt="Puzzle"></a>
<a href="javascript:Zamien(4);"><img src="4.jpg"
name="pole4" border="1" alt="Puzzle"></a>
<a href="javascript:Zamien(5);"><img src="5.jpg"
name="pole5" border="1" alt="Puzzle"></a><br>
<a href="javascript:Zamien(6);"><img src="6.jpg"
name="pole6" border="1" alt="Puzzle"></a>
<a href="javascript:Zamien(7);"><img src="7.jpg"
name="pole7" border="1" alt="Puzzle"></a>
<a href="javascript:Zamien(8);"><img src="8.jpg"
name="pole8" border="1" alt="Puzzle"></a>
</td></tr>
</table>
<br>
<table border="0" width="200"><tr><td align="left"
width="70">
<input type="button" value="START" onClick="Start();
timer();"></td>
<td width="130" align="right">
<font color="white" size="2" face="verdana">Tw≤j
czas: </font>
<input type="text" name="czasPole" size="5"></td>
</tr></table>
</form>
To kod dla puzzli 3x3. Je┐eli chcemy mieµ puzzle 4x4 to musimy dopisaµ odpowiedni▒
ilo╢µ tych wierszy i wpisaµ w odpowiednie miejsca kolejne cyfry (w
tym samym wierszu te same cyfry):
<a href="javascript:Zamien(kolejna cyfra);"><img
src="kolejna cyfra.jpg" name="polekolejna cyfra"
border="1" alt="Puzzle"></a>
Pozostaje nam jeszcze odpowiednie podzielenie p≤l na wiersze, przez dopisanie w
odpowiednich miejscach tagu <br>. Tak wiΩc przy puzzlach 3x3 jest on co
trzy linie, a przy 4x4 co cztery linie.
NastΩpnie w sekcji 'head' wpisujemy taki┐ oto fragment skryptu:
<script language="JavaScript">
ilosc_kolumn=3;
ilosc_wierszy=3;
puste_pole=(ilosc_kolumn*ilosc_wierszy+10);
function Start()
{
puste_pole=(ilosc_kolumn*ilosc_wierszy-1);
document.images['pole'+(ilosc_kolumn*ilosc_wierszy-1)].src="_.jpg";
for(i=0;i<(ilosc_kolumn*ilosc_wierszy-1);i++)
{ document.images['pole'+i].src=""; }
i=0;
while(i<(ilosc_kolumn*ilosc_wierszy-1))
{
j=Math.round(Math.random()*(ilosc_kolumn*ilosc_wierszy-1));
if(document.images['pole'+j].src.lastIndexOf( '.jpg') < 0 )
{
document.images['pole'+j].src=i+".jpg";
i++;
}
}
}
function Zamien(nr_pola)
{
pusty_wiersz=Math.floor(puste_pole/ilosc_wierszy)+1;
pusty_kolumna=Math.floor(puste_pole%ilosc_kolumn)+1;
aktualny_wiersz=Math.floor(nr_pola/ilosc_wierszy)+1;
aktualny_kolumna=Math.floor(nr_pola%ilosc_kolumn)+1;
if((pusty_kolumna==aktualny_kolumna)&&((aktualny_wiersz==pusty_wiersz-1)
||(aktualny_wiersz==pusty_wiersz+1)))
{
document.images['pole'+puste_pole].src=document.images['pole'+nr_pola].src;
document.images['pole'+nr_pola].src="_.jpg";
puste_pole=nr_pola;
Sprawdz();
}
else if((pusty_wiersz==aktualny_wiersz)&&((aktualny_kolumna==pusty_kolumna-1)
||(aktualny_kolumna==pusty_kolumna+1)))
{
document.images['pole'+puste_pole].src=document.images['pole'+nr_pola].src;
document.images['pole'+nr_pola].src="_.jpg"
puste_pole=nr_pola;
Sprawdz();
}
}
function Sprawdz()
{B OK=true;
for(i=0;i<(ilosc_wierszy*ilosc_kolumn-1);i++)
{
if( document.images['pole'+i].src.lastIndexOf( i+'.jpg') < 0 )
{ OK=false; }
}
if(OK)
{
czasGry = Math.round(eval(now - czasStartu) / 1000 );
czasMin = Math.floor(czasGry/60);
czasSek = Math.floor(czasGry%60);
alert('WYGRAúE?!!! Tw≤j czas to:'+czasGry+' s. ('+czasMin+' min.'+czasSek+'
s.)');
document.images['pole'+(ilosc_kolumn*ilosc_wierszy-1)].src=(ilosc_kolumn*ilosc_wierszy-1)+'.jpg';
puste_pole=(ilosc_kolumn*ilosc_wierszy+10);
}
}
function timer()
{
czasStartu = new Date();
pokazCzas();
}
function pokazCzas()
{
now = new Date();
aktCzas = Math.round( eval(now - czasStartu) / 1000 );
document.puzzle.czasPole.value = (aktCzas + " s");
timerID=setTimeout("pokazCzas()",1000);
}
</script>
Musimy tylko podstawiµ odpowiedni▒ ilo╢µ kolumn i ilo╢µ wierszy w tym
fragmencie powy┐szego kodu:
ilosc_kolumn=tu wpisujesz ilo╢µ kolumn;
ilosc_wierszy=a tu ilo╢µ wierszy;
Czyli gdy mamy puzzle 4x4 to cyfrΩ 3 zmieniamy w obu przypadkach na 4.
A tu przyk│ad takich puzzli (aby rozpocz▒µ kliknij 'START'):
Kub@
sendor13@poczta.onet.pl
http://www.statki.w.pl
http;//www.d--s--j.prv.pl
|
|
