Puzzle glisant javascript

Explicatii

Codul HTML

Codul HTML este alcatuit din doua butoane si un tabel.
Butoanele sunt folosite pentru a initializa tabelul cu numere sau cu o imagine prestabilita.
Tabelul are pe fiecare celula adaugata functia "swap(this)" pe click.
Cu ajutorul acesteia se va face intershimbare intre celula pe care s-a facut click (trimisa cu ajutorul variabilei this) si celula goala.
Pentru a facilita accesul la tabel din codul javascript am asignat un id unic acestuia.
Iar pentru a aplica stil CSS i-am asignat clasa "ascuns" (la inceput este folosita aceasta valoare, dar cu ajutorul codului javascript valoare va fi schimbata pentru a ajusta stilul pentru numere sau imagine).

Codul javascript

T

Codul CSS

Selectori:

1. ascuns: 
• este atribuit tabelelului la inceput, dar este schimbat la initializare
• ascunde tabelul neinitializat
2. numar:
• este atribuit tabelului la initializarea numerica
• este folosit in combinatie cu td pentru a se aplica regula doar celulelor din tabel
• celulele vor avea:
• lungimea si latimea de 100pixeli
• textul pozitionat in centru
• marimea textului de 36 de pixeli
3. imagine:
• este atribuit tabelului la initializarea cu imagine
• este folosit in combinatie cu:
• td: va colora celula libera a imaginii
• div:
• se aplica div-urilor(create la initializare) din celulele tabelelor, este folosit pentru a evita sectionarea fizica a zonelor din imagine pastrand un singur fisier
• seteaza lungimea si latimea la 100 de pixeli
• vizibilitatea zonei ce depaseste limita elementului html (ascunde partea de imagine ce nu intra in celula)

Codul sursa este accesibil aici