Adding Jigsaw to Hype Website Template

Template Gallery
4

I have added some code at the end of the check() function that tests each piece against its starting value:

	function checkSolved() {
	    var numberOfCorrectPieces = 0; 
		var totalPieces = starting.length;
		
		for(var i = 0; i < totalPieces; i++) {
			var pieceID = starting[i][0];
			var pieceElement = hypeDocument.getElementById(pieceID);
	
			var currentX = hypeDocument.getElementProperty(pieceElement, 'left');
			var currentY = hypeDocument.getElementProperty(pieceElement, 'top');
			var currentRotation = hypeDocument.getElementProperty(pieceElement, 'rotateZ');
			console.log(currentRotation);
			
			var startingX = starting[i][1];
			var startingY = starting[i][2];
			
			if(currentX == startingX && currentY == startingY && (currentRotation % 360 == 0)) {
				numberOfCorrectPieces += 1;	
			}
		}
		
		console.log("solved " + numberOfCorrectPieces + " of " + totalPieces);
		
		var isPuzzleSolved = (numberOfCorrectPieces == totalPieces);
		if(isPuzzleSolved == true) {
			// do something here
			alert("congrats, you are a genius!");
		}
	}
	
	// only check when done with the drag
	if(event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd) {
		window.setTimeout(checkSolved, 350); // 350 is the "d" of .25 with .1s padding
	}

Where it says:

			// do something here
			alert("congrats, you are a genius!");

You'll want to replace that with your complete action. If it is just showing a different scene, it would be something like:

			hypeDocument.showSceneNamed("mySceneName", hypeDocument.kSceneTransitionCrossfade, 1.1);

Example doc:
HypeWebPageWithJigsawEx1b-solve-detection.hype.zip (145.2 KB)

8 Likes