PuzzleImg e un script JavaScript prin care se poate crea foarte usor un joc puzzle simplu dintr-o imagine. Cu acest script se pot transforma imagini din pagina in puzzle-uri, sau puteti crea puzzel cu imagine de la o adresa URL.

- 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

Vis de Primavara

Copac

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".

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut indica faptul ca un camp de formular trebuie completat?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Ce metoda CSS misoreaza sau mareste dimensiunile unui element (inclusiv continutul)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click pe metoda obiectului Date care returneaza ziua din luna.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Ce functie este folosita pentru a incarca un fisier pe server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "Fisierul a fost incarcat";
}
Cum se spune in engleza expresia: "Ploua cu galeata"?
rain cats and dogs rain buckets quiet rain
In Bucharest it`s raining cats and dogs.
- In Bucuresti ploua cu galeata.
Cum se spune in spaniola expresia: "Ploua cu galeata"?
llover cubo llover a cántaros lluvia tranquila
En Madrid está lloviendo a cántaros.
- In Madrid ploua cu galeata.
PuzzleImg - Script creare Joc Puzzle din Imagine

Last accessed pages

  1. Creare si editare pagini HTML (32718)
  2. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (43494)
  3. Jokes - Glume, Bancuri, Humor (2) (3446)
  4. Curs si Tutoriale JavaScript (15213)
  5. Trecut perfect si Trecutul perfect continuu - Past perfect and Continuous (27313)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2269)
  2. Curs HTML gratuit Tutoriale HTML5 (1633)
  3. Curs si Tutoriale JavaScript (1600)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (1550)
  5. Curs CSS Online Tutoriale CSS3 (1434)