Le vrai puzzle, avé les vraies pièces !

Sur de nombreux sites web (y compris celui-ci !), vous trouverez des applets de puzzle avec des pièces carrées. Oui, mais... Avec TruePuzzle, vous allez retrouver la galère des pièces qui se mélangent, se superposent, se déplacent, s'imbriquent les unes dans les autres: un vrai puzzle, koâ !

Un exemple simple pour commencer (c'est à ma portée !) :

Votre navigateur n'est pas compatible Java !

Facile !? Essayez donc ša :

Votre navigateur n'est pas compatible Java !

Pour utiliser cette applet dans vos pages Web...

TruePuzzle
  1. Téléchargez le fichier suivant : TruePuzzle.zip
  2. Décompactez-le au même endroit que votre page Web (ou sinon utilisez le tag CodeBase pour paramétrer l'applet).

Vous obtiendrez 2 fichiers :

  • TruePuzzle.class
  • TPCell.class
  1. Incorporez le code suivant dans votre page HTML :
<applet code="TruePuzzle.class" width="315" height="175" name="Puzzle">
<param name="IMAGE" value="logo.jpg">
<param name="HCELLS" value="5">
<param name="VCELLS" value="3">
<param name="SNAP" value="2">
Votre navigateur n'est pas compatible Java !
</applet>

Les paramètres sont les suivants :

width La largeur de l'applet.
En principe, il s'agit de la largeur de l'image. Cependant, si votre puzzle comporte de nombreuses pièces, il est conseillé de donner une largeur plus grande, de façon à faciliter la manipulation des pièces.
height La hauteur de l'applet.
En principe, il s'agit de la hauteur de l'image. Cependant, si votre puzzle comporte de nombreuses pièces, il est conseillé de donner une hauteur plus grande, de façon à faciliter la manipulation des pièces.
image L'image qui sera affichée sous forme de puzzle (au format GIF ou JPG).
hcells Nombre de pièces en largeur
vcells Nombre de pièces en hauteur
snap Le seuil de tolérance pour la résolution du puzzle.
Il est parfois difficile d'imbriquer parfaitement 2 pièces (elles peuvent être décalées de 1 ou 2 pixels). Le seuil de tolérance règle ce problème.
Exemple : si snap=3, deux pièces seront considérées comme bien placées, même si elles sont décalées de 3 pixels en largeur ou en hauteur.

Pour ajouter les boutons "Résoudre" et "Mélanger" :

Créez un formulaire dans votre page HTML, en y ajoutant le code suivant :

<form>
<input type="button" name="btnResolve" value="Résoudre le puzzle"
onclick="document.Puzzle.resolve();"> 
<input type="button" name="btnScramble" value="Mélanger le puzzle"
onclick="document.Puzzle.scramble();"> 
</form>