Kineticjs validant des morceaux de jigsaw?

Question

Quelqu'un sait-il comment pourrais-je valider mes morceaux de jigsaw dans l'endroit original après avoir été brouillé?et montrez que j'ai terminé le puzzle?Vroralement j'utilise la bibliothèque Kineticjs.Merci:)

function jigsaw(){
    var imageObj = new Image();
    imageObj.src = "kidwallpaper.jpg";
    imageObj.onload = function(){
        drawImage(this);
    }
 }

ps: mon jsfiddle: http://jsfiddle.net/vfez6/21/

Answer 1

Un moyen est de définir un cercle où chaque pièce se connecte à une autre pièce.

Par exemple, supposons que votre puzzle n'a que 2 pièces - une pièce supérieure et une pièce inférieure.

Cette illustration montre un cercle rouge sur la pièce supérieure et un cercle d'or sur la pièce inférieure.

Lorsque les cercles de connexion se chevauchent exactement, les pièces sont exactement connectées.

Bien sûr, vous voulez probablement donner à vos joueurs une marge d'erreur afin de ne pas avoir besoin exactement chevauchent les cercles. Peut-être que si les 2 cercles se chevauchent du tout, il est "assez bon" pour être appelé résolu.

Si vous avez défini le rayon x, y, rayon des 2 cercles, vous pouvez dire si elles se chevauchent tout comme ceci:

var dx = circle2.x - circle1.x;
var dy = circle2.y - circle1.y;
var isSolved = Math.sqrt(dx*dx+dy*dy) <= circle.radius*2;

Je vois que vous tournez vos morceaux. Cela signifie que vous devez également tester que l'angle de rotation des 2 pièces est identique pour qu'ils soient connectés.

Naturellement, vous ne dessineriez pas réellement les cercles - ils sont juste ici pour une illustration.