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 atribut e folosit in tag-ul <img> pentru adresa imaginii?

href src rel

<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />

Care din aceste coduri CSS ascunde elementul in pagina?

display: none; display: inline; position: relative;

#id {
  display: none;
}

Ce instructiune opreste executia lui while() sau for() ?

continue prompt() break

for(var i = 0; i< 8; i++) {
  if(i > 1) break;
  alert(i);
}

Indicati functia utilizata pentru a crea constante.

define() include() defined()

define("CONSTANT_NAME", "value");
echo CONSTANT_NAME;

Care este forma de plural a substativului "class" (clasa)?

classes clases clasis

This school has three classes.
- Scoala asta are trei clase.

Care este pluralul substativului "voz" (voce)?

vose voze voces

Escuché dos voces.
- Am auzit doua voci.