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

Ce tip de <input> creaza o paleta de culori pentru selectare culoare?

type="text" type="color" type="date"

<input type="color" name="get_color" />

Care metoda CSS roteste elementul HTML la un anumit numar de grade?

scale() translate() rotate()

#some_id:hover {
  transform: rotate(60deg);
  -ms-transform: rotate(60deg);    /* IE 9 */
  -moz-transform: rotate(60deg);   /* Firefox */
}

Click pe functia care returneaza numarul cel mai mare.

pow() min() max()

var maxn = Math.max(8, 4, 88, 56);
alert(maxn);      // 88

Ce functie previne ca un fisier sa fie inclus mai mult de o data intr-o pagina?

include() include_once() require()

include_once("un_fisier.php");

Care este traducerea corecta pentru: "Ahead of time"?

Peste timp La timp Inainte de vreme

Most people arrived ahead of time.
- Cei mai multi oameni au sosit inainte de vreme (prea devreme).

Indicati traducerea corecta a cuvantului "buenísimo"

mai bun mai putin bun extrem de bun

Este fruto es buenísimo.
- Acest fruct este extrem /nemaipomenit de bun.