PuzzleImg - Script creare Joc Puzzle din Imagine

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

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

<<-MPGal - Galerie de .. -- Auto schimbare imagini->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Care tag adauga rand nou in paragraf?

Prima linie ...<br>
Alta linie...

Ce proprietate CSS seteaza spatiu dintre litere?

text-size word-spacing letter-spacing

#id {
  letter-spacing: 2px;
}

Ce functie obtine accesul la un element HTML cu un anumit ID?

getElementById() getElementsByTagName() createElement()

var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);

Clic pe instructiunea "echo" utilizata corect.

echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";

echo "Adresa URL: http://CoursesWeb.net";

Care din urmatoarele expresii cu "paint" (a picta) se foloseste pentru forma Negativa?

will paint not paint have painted

She does not paint that landscape.
- Ea nu picteaza acel peisaj.

Care din urmatoarele expresii cu "cantar" (a canta) se foloseste pentru propozitie Negativa?

ir a cantar cantaba no cantar

Ella no canta esa canción.
- Ea nu canta acel cantec.