Táblázat javascript

Megjegyzés. A jövőben, hogy a kurzort a megfelelő fajta kellett használni az alábbi kódot:

tbl.style.cursor = „mutatót” // valamilyen formában, mint például a kereszt

Írunk az alábbi kódot tryTbl.js fájlt, és építeni egy html-asztal, nyitott böngészőben tst.html fájlt a következő tartalommal:

Mindkét fájlt (tryTbl.js és tst.html) ugyanabban a mappában.
A terméket a fájl megnyitásakor böngésző tst.html eredmény látható ábrán. 1.

Ábra. 1. táblázat egérmutatót

Az ütközés után az egér egy táblázat cella, a következő üzenet jelenik meg (2. ábra)

Ábra. 2. válassza ki a harmadik cella a második sorban a táblázat (cellIndex = 2, rowIndex = 1)

A játék Tizenöt egy kivételével minden táblázat cella kezdetben véletlenszerűen töltött számok 1-től n × n - 1, ahol n - a méret a táblázatban kell tölteni.
Ezt megteheti a következő kódot.

funkció nGmFftngs () // mT - akkora, mint egy asztal tele
fL = Mt * mT;
// Array egészek generált
arrF = new Array (fL);
// Array zászlók generált egészek
// elem arrF2 [k] egyenlő hamis, ha a szám k már rendelkezésre áll a tömbben arrF
arrF2 = new Array (fL);
A (k = 0; k arrF2 [k] = true;
>
kL = KL-2 = 0;
// töltse ki a tömb ciklus arrF
// Az iterációk száma nem több, mint 10.000
while (kL k = Math.floor (Math.random () * (fl + 1));
ha (k> 0 arrF2 [K - 1]) arrF2 [K - 1] = false;
arrF [kl] = k;
kL ++;
>
>
kL = 0;
// Hurok töltse ki a táblázatot számokat egy tömbben arrF
for (i = 0; i a (j = 0; j rw.cells [J] .innerHTML = (k> fL - 1). "". k;
>
>
>

Megjegyzés. Ehelyett lehet használni innerHTML innerText

rw.cells [J] .innerText = (k> fL - 1). "". k;

Helyezze ezt a kódot a meglévő tryTbl.js fájlt. Teszt hívás funkció érvényesíteni a módosított böngésző tst.html file:

Összehasonlítva az eredeti verziót, hogy a jelenlegi változat a fájl tst.html hozzá a meghatározása táblázatcellába szöveg stílusa és kihívást nGmFftngs függvény kitölti az asztalra. Az eredmény ábrán látható. 3.

Ábra. 3. Véletlenszerű töltés 5 × 5-asztal

Digitális, szomszédos üres cella a vízszintes vagy függőleges lehet mozgatni ebbe a sejtbe. Tehát a helyzet ábrán látható. 3, az üres cella tudja mozgatni a számjegy 3, 11, 14 vagy 15.
A program által vezérelt egér kurzor, amikor vége van a szám szomszéd néz mutató, egyébként a kurzor célkereszt. Ez a viselkedés egy felvezető mkCrsr események egérráhelyezés megjelenő amikor az egér pozícióját a táblázat cellájába.

Ez a kezelő határozza meg a módosított funkció mkTbl táblalétrehozáshoz. Ebben a funkcióban egy sor kódot

helyébe a következő sort:

a felvezető megadhatja a következő funkciókat (mindkét funkciót kerülnek tryTbl.js fájl):

működnek mkCrsr (CLL) c = cll.cellIndex;
R = gtRw (CLL, c);
ha (R == -1)
MVD = false;
más
A (kL = 0; kL <4; kL++) switch (kL) case 0. mvd = chkC2(r - 1, c, cll); break;
esetében 1. MVD = chkC2 (r, c - 1, CLL); break;
2. eset MVD = chkC2 (r + 1, c, CLL); break;
3. eset MVD = chkC2 (r, c + 1, CLL); break;
>
ha (MVD) törés;
>
tbl.style.cursor = (MVD). 'Pointer.' 'Crosshair';
>
// return true, ha a cella r2: c2 üres
funkció chkC2 (r2, c2, CLL) amennyiben (R2 == -1 || c2 == -1 || R2 == mT || c2 == mT) return false;
CLL2 = tbl.rows [r2] .cells [C2];
if (cll2.innerHTML == "") return true;
>

Mindkét kurzor különböző lehet ábrán látható. 4.

Ábra. 4. A fenti 3. számú kurzor egy mutató, és több mint a '2' - célkereszt

Megjegyzés. Kurzor ha kívül helyezkedik el az asztal, a forma az alapértelmezett.

Processzor ellenőrzést végzünk eredményeként a nyitó tst.html fájlt.

Ábra a szomszédos vízszintesen vagy függőlegesen, hogy egy üres cella, a sejt vesz használatával eseménykezelő mvFg kattint, felmerült az ütközés után az egérrel az ábrán. A felszabadult sejt kiürül (ábra. 5).

Ábra. 5. Mozgassa a szám 7 mvFg kattintással eseménykezelő

Ez a kezelő határozza meg a módosított funkció mkTbl táblalétrehozáshoz. Ebben a funkcióban egy sor kódot

helyébe a következő sort:

A felvezető a következő funkciókat látja (mindkét funkciót kerülnek tryTbl.js fájl):

működnek mvFg (CLL) c = cll.cellIndex;
R = gtRw (CLL, c);
ha (R == -1) visszatérési;
fL = Mt * mT;
A (kL = 0; kL <4; kL++) switch (kL) case 0. mvd = chkC(r - 1, c, cll); break;
esetében 1. MVD = chkC (r, c - 1, CLL); break;
2. eset MVD = chkC (r + 1, c, CLL); break;
3. eset MVD = chkC (r, c + 1, CLL); break;
>
>
>
funkció chkC (r2, c2, CLL) amennyiben (R2 == -1 || c2 == -1 || R2 == mT || c2 == mT) return false;
CLL2 = tbl.rows [r2] .cells [C2];
ha (cll2.innerHTML == "") cll2.innerHTML = cll.innerHTML;
cll.innerHTML = "";
tbl.style.cursor = 'szálkereszt';
return true;
>
>

Processzor ellenőrzést végzünk eredményeként a nyitó tst.html fájlt.

• amennyi idő a játék befejeződik (globális változó dn kap ezen a ponton az érték true);
• száma birtoklása (üzletek globális változó TMS);
• számítva a lépések számát (üzletek globális változó nFftngs);
• befejezése a játék (funkció bldFftngs);
• kijelző a löketszám és töltött időt (a funkció sRslt).

// globális változók
tbl = "";
mT = 0;
dn = false;
TMS = 0;
nFftngs = 0;
//
működnek mkTbl (TDSZ, n) mT = n;
td = " td + = „>„
ThDr = "