Skladačka

Domov
Výpisy
Premenné
Dialógové okná
Tlačidlá
.Podmienky a vetvenie
Cyklus
Funkcie
Objekty
Objekt Array
Objekty tvorené užívateľom
Objekt Date
Objekt Math
Formuláre
Objekty formulárov
Ďalšie objekty formulára
Obrázky
Obrázky-2
Stavový riadok
Popis v stavovom riadku
Animovaný text
Hodiny
Skladačka
Linky

6

13

11

10

12

1

9

4

2

14

5

7

3

15

14. Číselná skladačka

Tento skript pochádza od Davida Morkesa - z knihy JavaScript - tipy a triky pro tvurce webu - vydaný nakladateľstvom Grada r.2002 ISBN 80-247-0258-4 . Nájdete ho na na stránke www.grada.cz

Klasická číselná skladačka sa ovláda kurzorovými klávesami. Tieto sú nastavené pomocou premennej ieKey=event.keyCode. Kód 38 odpovedá riadiacej klávese hore, 40 - dolu, 37 - vľavo a 39 - vpravo.

Pozícia herného plánu je číslovaná od ľavého horného riadku = 1 po riadkoch až po číslo 16 vpravo dolu. Pole pos uchováva informácie o postavení jednotlivých čísel , t.j. napr pos[8]=1 znamená, že číslo 8 je umiestnené vľavo hore. Premenná blank_pos určuje pozíciu prázdneho políčka.

Pole nam obsahuje odkaz na style príslušného čísla, kde je dôležité postavenie - left (vzdialenosť ľavej hrany od ľavého okraja) a top (vzdialenosť hornej hrany od horného okraja)

Funkcia KeyDown() posúva jednotlivé čísla

Po stlačení klávesy:

najskôr zistí pozíciu prázdneho políčka - či je možné urobiť príslušný ťah
do premennej x priradí číslo kameňa, ktoré sa nachádza pri prázdnom políčku
posunutie políčkom zmenením vlastnosti left alebo top

<html> <head> <title>Skladačka</title> <SCRIPT LANGUAGE="JavaScript"> var blank_pos = 16, count = 0, pos = new Array(), nam = new Array(); pos[1] = 7; pos[2] = 10; pos[3] = 14; pos[4] = 9; pos[5] = 12; pos[6] = 2; pos[7] = 13; pos[8] = 1; pos[9] = 8; pos[10] = 5; pos[11] = 4; pos[12] = 6; pos[13] = 3; pos[14] = 11; pos[15] = 15; function start() { nam[1] = L1.style; nam[2] = L2.style; nam[3] = L3.style; nam[4] = L4.style; nam[5] = L5.style; nam[6] = L6.style; nam[7] = L7.style; nam[8] = L8.style; nam[9] = L9.style; nam[10] = L10.style; nam[11] = L11.style; nam[12] = L12.style; nam[13] = L13.style; nam[14] = L14.style; nam[15] = L15.style; document.onkeydown = keyDown; } function keyDown() { var ieKey = event.keyCode; //alert(ieKey) if (ieKey == 38) { if (blank_pos < 13) { count=blank_pos + 4; X = fun(count); Z = (parseInt(nam[X].top)); nam[X].top = Z - 52; Q = pos[X]; pos[X] = blank_pos; blank_pos = Q; } } else if (ieKey == 40) { if (blank_pos > 4) { count = blank_pos - 4; X = fun(count); Z = (parseInt(nam[X].top)); nam[X].top = Z + 52; Q = pos[X]; pos[X] = blank_pos; blank_pos = Q; } } else if (ieKey == 37) { r = blank_pos % 4 if (r == 0) {} else { count = blank_pos + 1; X = fun(count); Z = (parseInt(nam[X].left)); nam[X].left = Z - 52; Q = pos[X]; pos[X] = blank_pos; blank_pos = Q; } } else if (ieKey == 39) { ch = blank_pos + 3; r = ch % 4; if (r == 0) {} else { count = blank_pos - 1; X = fun(count); Z = (parseInt(nam[X].left)); nam[X].left = Z + 52; Q = pos[X]; pos[X] = blank_pos; blank_pos = Q; } } else { alert("Ovládanie pomocou kurzorových kláves"); } A = false; b = 0; for (i = 1; i < 16; i++) { b++; if (pos[i] == b) { A = true; } else { A = false; break; } } if (A) alert("Gratulujem!!"); } function fun(count) { for (var i = 1; i < 16; i++) { if (pos[i] == count) { var X = i; } } return X; } </script> </head> <body onLoad="start()"> <div ID="L8" STYLE="position:absolute; left:202px; top:302px; width:50px; height:50px; background-color:green;"> <br><b><center>8</center> </div> <div ID="L6" STYLE="position:absolute; left:254px;top:302px; width:50px; height:50px; background-color:green;"> <br><b><center>6</center> </div> <div ID="L13" STYLE="position:absolute; left:306px;top:302px; width:50px; height:50px; background-color:green;"> <br><b><center>13</center> </div> <div ID="L11" STYLE="position:absolute; left:358px;top:302px; width:50px; height:50px; background-color:green;"> <br><b><center>11</center> </div> <div ID="L10" STYLE="position:absolute; left:202px; top:354px; width:50px; height:50px; background-color:green;"> <br><b><center>10</center> </div> <div ID="L12" STYLE="position:absolute; left:254px;top:354px; width:50px; height:50px; background-color:green;"> <br><b><center>12</center> </div> <div ID="L1" STYLE="position:absolute; left:306px;top:354px; width:50px; height:50px; background-color:green;"> <br><b><center>1</center> </div> <div ID="L9" STYLE="position:absolute; left:358px;top:354px; width:50px; height:50px; background-color:green;"> <br><b><center>9</center> </div> <div ID="L4" STYLE="position:absolute; left:202px; top:406px; width:50px; height:50px; background-color:green;"> <br><b><center>4</center> </div> <div ID="L2" STYLE="position:absolute; left:254px;top:406px; width:50px; height:50px; background-color:green;"> <br><b><center>2</center> </div> <div ID="L14" STYLE="position:absolute; left:306px;top:406px; width:50px; height:50px; background-color:green;"> <br><b><center>14</center> </div> <div ID="L5" STYLE="position:absolute; left:358px;top:406px; width:50px; height:50px; background-color:green;"> <br><b><center>5</center> </div> <div ID="L7" STYLE="position:absolute; left:202px; top:458px; width:50px; height:50px; background-color:green;"> <br><b><center>7</center> </div> <div ID="L3" STYLE="position:absolute; left:254px;top:458px; width:50px; height:50px; background-color:green;"> <br><b><center>3</center> </div> <div ID="L15" STYLE="position:absolute; left:306px;top:458px; width:50px; height:50px; background-color:green;"> <br><b><center>15</center> </div> </body> </html>

Úloha:

Zmeňte parametre hry
- farbu políčok zo zelenej na hnedú
- iné umiestnenie na stránke

Riešenie:

farbu políčok zmeníme v riadkoch

<div ID="L8" STYLE="position:absolute; left:202px; top:302px; width:50px; height:50px; background-color:green;"> ...

iné umiestnenie zmeníme zmenou top a left v tých istých riadkoch nastavením v bodoch (pixeloch)

<div ID="L8" STYLE="position:absolute; left:202px; top:302px; width:50px; height:50px; background-color:green;">...

Posledná aktualizácia: 12 máj, 2003

Webmaster: Mgr.Anna Peťovská