Tabele pentru javascript

Notă. În viitor, următorul cod va fi folosit pentru a da cursorului mouse-ului forma corectă:

tbl.style.cursor = 'pointer' // Sau un alt tip, de exemplu, crosshair

Să scriem codul rezultat într-un fișier tryTbl.js și vom construi html-table, care a fost deschis într-un fișier de browser tst.html, având următoarea umplutură:

Ambele fișiere (tryTbl.js și tst.html) se află în același folder.
Rezultatul obținut după deschiderea fișierului tst.html de către browser poate fi văzut în Fig. 1.

Fig. 1. Tabel cu indicatorul cursorului

După apăsarea mouse-ului pe celula tabelului, va apărea următorul mesaj (Figura 2):

Fig. 2. Se selectează a treia celulă din al doilea rând al tabelului (cellIndex = 2, rowIndex = 1)

În joc, cu excepția unuia, celulele tabelului sunt inițial umplute aleatoriu cu numere de la 1 la n × n - 1, unde n este dimensiunea tabelului care este umplut.
Această acțiune poate fi efectuată utilizând următorul cod.

funcția nGmFftngs () // mT - dimensiunea tabelului fiind populat
fL = mT * mT;
// Array de numere întregi generate
arrF = array nou (fL);
// Array de casete de selectare pentru numerele întregi generate
// Elementul arrF2 [k] este fals dacă numărul k este deja prezent în matricea arrF
arrF2 = array nou (fL);
pentru (k = 0; k arrF2 [k] = adevărat;
>
kL = kL2 = 0;
// Ciclul de umplere a arrF array
// Numărul de iterații nu mai mari de 10000
în timp ce (kL k = Math.floor (Math.random () * (fL + 1));
dacă (k> 0 arrF2 [k - 1]) arF2 [k - 1] = false;
arrF [kL] = k;
kL ++;
>
>
kL = 0;
// Ciclul de umplere a tabelului cu numere din arrF
pentru (i = 0; i pentru (j = 0; rw.cells [j] .innerHTML = (k> fL-1). "". k;
>
>
>

Notă. În loc de innerHTML, puteți utiliza innerText

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

Puneți acest cod în fișierul tryTbl.js existent. Apelul pentru funcția de testare va asigura că browserul execută fișierul tst.html modificat:

În comparație cu versiunea originală, versiunea curentă a fișierului tst.html a adăugat o definiție a stilului textului pentru textul celulei de tabelă și un apel la funcția nGmFftngs care umple tabela. Rezultatul este arătat în Fig. 3.

Fig. 3. Umplerea aleatorie a mesei de 5 × 5

Un număr adiacent unei celule goale orizontal sau vertical poate fi mutat în această celulă. Astfel, în situația prezentată în Fig. 3, puteți muta numărul 3, 11, 14 sau 15 într-o celulă goală.
În programul dat, cursorul mouse-ului, dacă este situat deasupra numărului vecinului, are indicatorul de formă, altfel cursorul este afișat ca o cruce. Acest comportament este furnizat de mkCrsr, care se ocupă cu mouseover, care apare atunci când mouse-ul este poziționat pe o celulă de tabelă.

Acest handler este specificat în funcția mkTbl modificată de creare a tabelului. În această funcție, linia de cod

se înlocuiește cu următorul rând:

Handlerul însuși este specificat de următoarele funcții (ambele funcții sunt plasate în fișierul tryTbl.js):

funcția mkCrsr (cll) c = cll.cellIndex;
r = gtRw (cll, c);
dacă (r == -1)
mvd = false;
altfel
pentru (kL = 0; kL <4; kL++) switch (kL) case 0. mvd = chkC2(r - 1, c, cll); break;
cazul 1. mvd = chkC2 (r, c - 1, cll); pauză;
cazul 2. mvd = chkC2 (r + 1, c, cll); pauză;
cazul 3. mvd = chkC2 (r, c + 1, cll); pauză;
>
dacă (mvd) se rupe;
>
tbl.style.cursor = (mvd). „Indicatorul“. 'Crosshair';
>
// Returneaza true daca celula r2: c2 este goala
funcția chkC2 (r2, c2, cll) dacă (r2 = -1 || c2 == -1 || r2 == mT || c2 == mT) returnează false;
cll2 = tbl.rows [r2]. celule [c2];
dacă (cll2.innerHTML == "") returnează adevărat;
>

Ambele forme ale cursorului pot fi văzute în Fig. 4.

Fig. 4. În imaginea de mai sus, cursorul are indicatorul de formă, iar deasupra figura 2 - crucea

Notă. Cursorul, dacă este situat în afara mesei, are forma implicită.

Handler-ul este verificat ca urmare a deschiderii fișierului tst.html.

Un număr adiacent orizontal sau vertical cu o celulă goală ocupă această celulă cu manipulatorul mvFg al evenimentului clic, care apare după ce mouse-ul este lovit de cifră. Celula eliberată devine goală (Figura 5).

Fig. 5. Mutați cifra 7 de la mvFg pentru evenimentul de clic

Acest handler este specificat în funcția mkTbl modificată de creare a tabelului. În această funcție, linia de cod

se înlocuiește cu următorul rând:

Handlerul este implementat prin următoarele funcții (ambele funcții sunt plasate în fișierul tryTbl.js):

funcția mvFg (cll) c = cll.cellIndex;
r = gtRw (cll, c);
dacă (r == -1) retur;
fL = mT * mT;
pentru (kL = 0; kL <4; kL++) switch (kL) case 0. mvd = chkC(r - 1, c, cll); break;
cazul 1. mvd = chkC (r, c - 1, cll); pauză;
cazul 2. mvd = chkC (r + 1, c, cll); pauză;
cazul 3. mvd = chkC (r, c + 1, cll); pauză;
>
>
>
funcția chkC (r2, c2, cll) dacă (r2 = -1 || c2 == -1 || r2 == mT || c2 == mT) returnează false;
cll2 = tbl.rows [r2]. celule [c2];
dacă (cll2.innerHTML == "") cll2.innerHTML = cll.innerHTML;
cll.innerHTML = "";
tbl.style.cursor = "cruce";
return true;
>
>

Handler-ul este verificat ca urmare a deschiderii fișierului tst.html.

• fixarea momentului sfârșitului jocului (variabila globală dn ia în momentul valorii adevărată);
• numărarea timpului de joc (stochează variabila globală tmS);
• numărarea numărului de mișcări (stochează variabilele globale de variabile);
• finalizarea jocului (funcția bldFftngs);
• afișarea numărului de miscări și timp petrecute (funcția sRslt).

// variabile globale
tbl = "";
mT = 0;
dn = false;
tmS = 0;
nFftngs = 0;
//
funcția mkTbl (tdSz, n) mT = n;
td = " td + = ">„;
tHdr = "