// JavaScript source code
$(document).ready(function () {
var canvas = $("canvas")[0];
var W = canvas.width;
var H = canvas.height;
var context = canvas.getContext("2d");
//incarcare imagine prin drag and drop
$(document)
.on('dragover', function (event) {
event.preventDefault();
})
.on('drop', function (event) {
event.preventDefault();
var file = event.originalEvent.dataTransfer.files;
if (file.length > 0) {
var fileReader = new FileReader();
fileReader.onload = function (event) {
$("<img></img>")
.on('load', function () {
sunet.setAttribute('src', 'media/dragdrop.mp3');
sunet.play();
adaugaImagine(this);
})
.attr({
src: event.target.result,
id: "drawImg"
});
};
fileReader.readAsDataURL(file[0]);
}
});
//variabile utilizate pentru realizare puzzle
var sunet = document.createElement('audio');
var img, pieseImagine, piesaW, piesaH, piesaCurenta, piesaDrop;
var pozitionareMouse;
var coloana, rand;
//functie adaugare imagine in canvas
function adaugaImagine(canvasImg) {
var iW = canvasImg.width;
var iH = canvasImg.height;
pieseImagine = [];
piesaCurenta = null;
piesaDrop = null;
pozitionareMouse = { x: 0, y: 0 };
$("#canvas").attr({ width: iW, height: iH });
img = canvasImg;
context.drawImage(canvasImg, 0, 0, iW, iH);
}
//functie de impartire imagine in piese rectangulare care sa formeze puzzle-ul
function piesePuzzle(img) {
var piesa;
for (var i = 0; i < coloana ; i++) {
for (var j = 0; j < rand; j++) {
piesa = {};
//determinare dimensiuni piesa de puzzle
piesa.latime = j*img.width/coloana;
piesa.inaltime = i * img.height / rand;
piesa.xPoz = j * (canvas.width / coloana);
piesa.yPoz = i * (canvas.height / rand);
//adaugare piese in vectorul pieseImagine
pieseImagine.push(piesa);
}
}
//functie de amestecare random a pieselor din vector
amestecaPuzzle();
}
function amestecaPuzzle() {
var j, x, i;
for (i = pieseImagine.length – 1; i > 0; i–) {
//interschimba piesa de pe pozitia i cu o piesa de pe pozitia j(generata random)
j = Math.floor(Math.random() * (i + 1));
x = pieseImagine[i],
pieseImagine[i] = pieseImagine[j],
pieseImagine[j] = x
}
context.clearRect(0, 0, canvas.width, canvas.height);
var piesa = {};
var p = 0;
//se completeaza canvas-ul cu piesele amestecate
for (var i = 0; i < coloana; i++) {
for (var j = 0; j < rand; j++) {
piesa = pieseImagine[p];
piesa.xPoz = j*(img.width/coloana);
piesa.yPoz = i*(img.height/rand);
context.drawImage(img, piesa.latime, piesa.inaltime, img.width / coloana, img.height / rand, piesa.xPoz, piesa.yPoz, img.width / coloana, img.height / rand);
p++;
}
}
//evenimentul de click pe mouse
document.onmousedown = jocPuzzle;
}
function jocPuzzle(e) {
//determinam coordonatele mouse-ului
pozitionareMouse.x = e.clientX – canvas.offsetLeft;
pozitionareMouse.y = e.clientY – canvas.offsetTop;
piesaCurenta = verificaClickPiesa();
//daca a fost gasita piesa se continua cu alegerea piesei cu care se va realiza interschimbarea
if (piesaCurenta != null) {
//x,y,latime, inaltime
//in canvas modificarile se fac prin redesenare, de aceea se sterge dreptunghiul si se deseneaza o alta piesa
context.clearRect(piesaCurenta.xPoz, piesaCurenta.yPoz, img.width / coloana, img.height / rand);
// impartirea la 2 pentru a ne pozitiona pe centrul pointerului mouse-ului
context.drawImage(img, piesaCurenta.latime, piesaCurenta.inaltime, img.width / coloana, img.height / rand, pozitionareMouse.x – (img.width / coloana) / 2, pozitionareMouse.y – (img.height / rand) / 2, img.width / coloana, img.height / rand);
//miscare mouse
document.onmousemove = actualizarePuzzle;
//ridicare mouse
document.onmouseup = interschimbarePiese;
}
}
function verificaClickPiesa() {
var i, piesa;
for (i = 0; i < pieseImagine.length; i++) {
//verificam coordonatele piesei in raport cu cele ale mouse-ului
piesa = pieseImagine[i];
if(pozitionareMouse.x>piesa.xPoz && pozitionareMouse.x<(piesa.xPoz+ img.width/coloana)&&
pozitionareMouse.y > piesa.yPoz && pozitionareMouse.y < (piesa.yPoz + img.height / rand)) {
return piesa;
}
}
return null;
}
function actualizarePuzzle(e) {
//se determina piesa pentru interschimbare verificandu-se in raport cu coordonatele mouse-ului
piesaDrop = null;
pozitionareMouse.x = e.clientX – canvas.offsetLeft;
pozitionareMouse.y = e.clientY – canvas.offsetTop;
context.clearRect(0, 0, canvas.width, canvas.height);
var i, piesa;
for (i = 0; i < pieseImagine.length; i++) {
piesa = pieseImagine[i];
context.drawImage(img, piesa.latime, piesa.inaltime, img.width / coloana, img.height / rand, piesa.xPoz, piesa.yPoz, img.width / coloana, img.height / rand);
if (piesaDrop == null) {
if (pozitionareMouse.x > piesa.xPoz && pozitionareMouse.x < (piesa.xPoz + img.width / coloana) &&
pozitionareMouse.y > piesa.yPoz && pozitionareMouse.y < (piesa.yPoz + img.height / rand)) {
piesaDrop = piesa;
context.fillRect(piesaDrop.xPoz, piesaDrop.yPoz, img.width / coloana, img.height / rand);
}
}
}
// impartirea la 2 pentru a ne pozitiona pe centrul pointerului mouse-ului
context.drawImage(img, piesaCurenta.latime, piesaCurenta.inaltime, img.width / coloana, img.height / rand, pozitionareMouse.x – (img.width / coloana) / 2, pozitionareMouse.y – (img.height / rand) / 2, img.width / coloana, img.height / rand);
context.strokeRect(pozitionareMouse.x – (img.width / coloana) / 2, pozitionareMouse.y – (img.height / rand) / 2, img.width / coloana, img.height / rand);
}
function interschimbarePiese(e) {
document.onmousemove = null;
document.onmouseup = null;
//interschimbare piese
if (piesaDrop != null) {
var pozitii = { x: piesaCurenta.xPoz, y: piesaCurenta.yPoz };
piesaCurenta.xPoz = piesaDrop.xPoz;
piesaCurenta.yPoz = piesaDrop.yPoz;
piesaDrop.xPoz = pozitii.x;
piesaDrop.yPoz = pozitii.y;
}
//verificare daca toate piesele sunt in pozitia initiala
var castig = true;
var i, piesa;
for (i = 0; i < pieseImagine.length; i++) {
piesa = pieseImagine[i];
context.drawImage(img, piesa.latime, piesa.inaltime, img.width / coloana, img.height / rand, piesa.xPoz, piesa.yPoz, img.width / coloana, img.height / rand);
if (piesa.xPoz != piesa.latime || piesa.yPoz != piesa.inaltime) {
castig = false;
}
}
if (castig) {
document.onmousedown = null;
alert("Puzzle complet");
}
}
$("#btnJoaca").click(function (e) {
sunet.setAttribute('src', 'media/click.mp3');
sunet.play();
//daca nu se selecteaza un radio button col si rand raman 1
coloana = 2; rand = 2;
//setare coloana si rand
if ($('#radioUsor').is(':checked')) { coloana = 3; rand = 3; }
if ($('#radioGreu').is(':checked')) { coloana = 4; rand = 4; }
adaugaImagine(img);
piesePuzzle(img);
})
//autorezolvare, afiseaza imaginea initiala
$("#btnRezolva").click(function () {
sunet.setAttribute('src', 'media/click.mp3');
sunet.play();
adaugaImagine(img);
})
//reguli-afiseaza o fereastra cu instructiunile
$("#btnReguli").click(function () {
sunet.setAttribute('src', 'media/click.mp3');
sunet.play();
//deschide o noua fereastra de browser
var win = window.open("", "Reguli", "width=600,height=600");
win.document.write("<p>Inserarea imaginii se realizeaza prin drag and drop.</p>");
win.document.write("<p>Dupa ce a fost inserata imaginea se apasa butonul joaca care v-a imparti imaginea in 4 piese daca nu este selectat nici un radio button. Daca este selectat usor – imaginea este impartita in 9 piese, iar daca apasati greu – 16 piese.</p>");
win.document.write("<p> Mutarea pieselor se realizeaza astfel: selectati piesa pe care doriti sa o mutati si apoi selectati locul in care vreti sa fie mutata.</p>")
})
})