- Clic pe acest link pt. a descarca script-ul si exemple: JavaScript Image Puzzle (352 KB).
Documentatia este in romana, dar codul si exemplele sunt in engleza.
Examplu - Transformare imagini din pagina in puzzle
• Clic pe butonul "Creaza puzzel" pt. a transforma pozele in puzzel-uri.Vis de Primavara
Copac
Examplu - Adauga puzzel cu imagine de la o adresa URL
Aici va fi adaugat elementul <canvas> cu jocul puzzel creat cu JavaScript.
Adresa Imagine:
Utilizare
1. Descarcati scriptul si copiati aceste fisiere pe server: puzzleimg.css si puzzleimg.js.2. Includeti "puzzleimg.css" si "puzzleimg.js" in pagina web adaugand acest cod in zona <head>:
<link rel="stylesheet" href="puzzleimg.css" /> <script src="puzzleimg.js"></script>3a. Daca vreti sa creati un puzzel dintr-o imagine de la o adresa URL, adaugati acest cod in locul unde vreti sa fie afisat puzzel-ul:
<div id="div_id" class="puzelm">Aici va fi adaugat un <canvas> cu jocul puzzle.</div>
<script>
var puz1 = new PuzzleImg('div_id', 'locatie/image.png', 5, 4, 600, 450);
</script>
- Primul argument de la PuzzleImg() este ID-ul Div-ului unde va fi adaugat puzzel-ul ('div_id').- Al doilea argument este adresa imaginii ('locatie/image.png').
- Argumentele trei si patru reprezinta numarul de Coloane si Randuri in care e impartita imaginea in puzzle (5, 4).
- Ultimele doua argument sunt optionale (600, 450), ele reprezinta Lungimea si Inaltimea elementului canvas. Daca aceste argumente nu sunt adaugate, canvas-ul va avea dimensiunile imaginii.
- Div-ul care va contine canvas-ul cu jocul puzzle trebuie sa aibe: class="puzelm".
- Daca vreti sa definiti o functie care sa fie apelata dupa ce puzzel-ul e completat, atribuiti-o proprietatii solved. De asemenea, puteti folosi proprietatea clicks pentru a obtine numarul de clic-uri.
Exemplu:
var puz1 = new PuzzleImg('div_id', 'locatie/image.png', 5, 4, 600, 450);
puz1.solved = function(){
alert('Completat in '+ puz1.clicks +' clic-uri.');
}
3b. Daca vreti sa transformati imagini din pagina in puzzle, doar adaugati acest cod la sfarsitul documentului html:
<script>
imgToPuzzle('CSS Selector', 3, 4, 0, callback);
</script>
- Primul argument din imgToPuzzle() e selectorul css care reprezinta imaginile din pagina care vor fi facute puzzle (exemplu: '#id_img', sau 'div .class_imgs').- Argumentele doi si trei reprezinta numarul de Coloane si Randuri in care e impartita imaginea in puzzle (3, 4).
- Daca al patrulea argument (aici 0) are valoarea 0, scriptul nu va afisa butonul de auto-rezolvare puzzle. Pentru a afisa acel buton, setati valoarea 1.
- Argument-ul callback este optional, reprezinta o functie care sa fie apelata cand puzzel-ul e completat.
Alte Specificatii
Puzzelul e creat intr-un element <canvas>, sunt adaugate un mini-thumbnail pentru a previlualiza imaginea si un buton html pentru auto-rezolvare puzzle.Div-ul care contine puzzel-ul are class: "puzelm".
Elementul canvas are class: "puzcnv".
Pictograma mini-thumbnail are class: "puzimg".
Butonul pentru auto-rezolvare puzzle are class: "puzsolve".