Download: cliquer ici
Retour vers: rubrique "Gag"
UN PUZZLE MARRANT ! !
Cliquez sur "download" pour télécharger le kit nécessaire.
Compatible IE et NS. Cliquer sur l'une des pièces du puzzle touchant la case vide (le rond) par l'un de
ses bords: elle échangeront leur place. Changer l'image par celle de votre choix. Utilisez
un logiciel de retouche spécialisé web pour confectionner les pièces du puzzle.
1/ Insérez entre HEAD et /HEAD:
ou entre BODY et /BODY...
<SCRIPT LANGUAGE="JavaScript">
<!--
// Puzzle JavaScript (C)1997 Cyril Pannetier - La Petite Boutique JavaScript -
// web : http://www.mygale.org/08/pannetie
// e-mail : pannetie@mygale.org
// Ce script est librement utilisable. Merci de ne pas effacer ces commentaires.
function Convert(l,c) {
return ( (l-1) * _col + c - 1 );
}
function CreateFileName(num) {
var name;
if (num < 10)
if (num >= 1)
name = _repert + "/" + _files + "0" + num + ".gif";
else
if (num == -1)
name = _repert + "/blank.gif";
else
name = _repert + "/" + _files + "00" + ".gif";
else
name = _repert + "/" + _files + num + ".gif";
return name;
}
function PlaceBitmap(ligne,colonne,name) {
var nbimage;
nbimage = Convert(ligne,colonne);
document.images[nbimage].src = name;
}
function MelangeBitmap() {
for (i = 0; i <= (_size-1); i++) {
bitmaps[i] = i;
}
for (i = 1; i < 100; i++) {
bmp1 = Math.floor((_size) * Math.random() );
bmp2 = Math.floor((_size) * Math.random() );
if (bmp1 != bmp2) {
temp = bitmaps[bmp1];
bitmaps[bmp1] = bitmaps[bmp2];
bitmaps[bmp2] = temp;
}
}
var k=0;
for (i = 1; i <= _ligne; i++) {
for (j = 1; j <= _col; j++) {
PlaceBitmap(i,j,CreateFileName(bitmaps[k++]));
}
}
PlaceBitmap(_ligne,_col,_repert +"/blank.gif");
bitmaps[_size] = -1;
}
function MoveDown(li,co) {
rep = false;
if (li < _ligne) {
if (bitmaps[Convert(li+1,co)] == -1)
rep = true;
}
return rep;
}
function MoveUp(li,co) {
rep = false;
if (li > 1) {
if (bitmaps[Convert(li-1,co)] == -1)
rep = true;
}
return rep;
}
function MoveRight(li,co) {
rep = false;
if (co < _col) {
if (bitmaps[Convert(li,co+1)] == -1)
rep = true;
}
return rep;
}
function MoveLeft(li,co) {
rep = false;
if (co > 1) {
if (bitmaps[Convert(li,co-1)] == -1)
rep = true;
}
return rep;
}
function Swap(l1,c1,l2,c2) {
Carte1 = Convert(l1,c1);
Carte2 = Convert(l2,c2);
temp = bitmaps[Carte1];
bitmaps[Carte1] = bitmaps[Carte2];
bitmaps[Carte2] = temp;
PlaceBitmap(l1,c1,CreateFileName(bitmaps[Carte1]));
PlaceBitmap(l2,c2,CreateFileName(bitmaps[Carte2]));
}
function CheckGame() {
win = true;
n = 0;
while (win) {
win = (bitmaps[n] == n);
n++;
if (n == _size)
break;
}
return win;
}
function Victory() {
PlaceBitmap(_ligne,_col,CreateFileName(_size));
window.alert('Vous avez gagné ! ' + NbDeplacements + ' déplacements' );
}
function MoveCard(ligne,colonne) {
if (bitmaps[Convert(ligne,colonne)] != -1) {
if (MoveDown(ligne,colonne)) {
Swap(ligne,colonne,ligne+1,colonne);
NbDeplacements++;
}
else
if (MoveUp(ligne,colonne)) {
Swap(ligne,colonne,ligne-1,colonne);
NbDeplacements++;
}
else
if (MoveRight(ligne,colonne)) {
Swap(ligne,colonne,ligne,colonne+1);
NbDeplacements++;
}
else
if (MoveLeft(ligne,colonne)) {
Swap(ligne,colonne,ligne,colonne-1);
NbDeplacements++;
}
}
if (CheckGame())
Victory();
}
// Initialise le jeu
// Variables à passer :
// psize : nombre de pièces dans le jeu
// pligne : nombre de lignes dans le tableau
// pcol : nombre de colonnes dans le tableau
// prepert : nom du repertoire contenant les images
//pfiles : nom de bas des fichiers
function InitGame(psize,pligne,pcol,prepert,pfiles) {
var i,j;
_size = psize;
_ligne = pligne;
_col = pcol;
_repert = prepert;
_files = pfiles;
bitmaps = new Array(_size);
NbDeplacements = 0;
MelangeBitmap();
}
// Fin du script du puzzle
function UpdateStatusBar(Num) {
commentaires = new Array(3);
commentaires[0] = '';
commentaires[1] = 'KITWEB a sélectionné pour vous...';
commentaires[2] = 'scripts, backgrounds, visuels, sons etc...';
window.status = commentaires[Num];
}
//-->
</SCRIPT>
2/ Insérez dans la page html:
à l'emplacement où doit apparaître le puzzle.
<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0>
<TR>
<TD><A HREF="#" onClick="MoveCard(1,1);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(1,2);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(1,3);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(1,4);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(1,5);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(1,6);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(1,7);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(1,8);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(1,9);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(1,10);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
</TR>
<TR>
<TD><A HREF="#" onClick="MoveCard(2,1);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(2,2);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(2,3);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(2,4);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(2,5);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(2,6);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(2,7);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(2,8);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(2,9);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(2,10);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
</TR>
<TR>
<TD><A HREF="#" onClick="MoveCard(3,1);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(3,2);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(3,3);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(3,4);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(3,5);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(3,6);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(3,7);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(3,8);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(3,9);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(3,10);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
</TR>
<TR>
<TD><A HREF="#" onClick="MoveCard(4,1);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(4,2);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(4,3);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(4,4);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(4,5);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(4,6);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(4,7);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(4,8);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(4,9);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(4,10);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
</TR>
<TR>
<TD><A HREF="#" onClick="MoveCard(5,1);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(5,2);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(5,3);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(5,4);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(5,5);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(5,6);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(5,7);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(5,8);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(5,9);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(5,10);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
</TR>
<TR>
<TD><A HREF="#" onClick="MoveCard(6,1);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(6,2);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(6,3);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(6,4);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(6,5);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(6,6);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(6,7);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(6,8);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(6,9);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(6,10);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
</TR>
<TR>
<TD><A HREF="#" onClick="MoveCard(7,1);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(7,2);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(7,3);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(7,4);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(7,5);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(7,6);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(7,7);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(7,8);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(7,9);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
<TD><A HREF="#" onClick="MoveCard(7,10);"><IMG SRC="camion/blank.gif" BORDER=0></A></TD>
</TR>
</TABLE>
3/ Insérer juste en-dessous du puzzle:
ou à l'emplacement de votre choix...
<FORM>
<INPUT TYPE="button" VALUE="Solution" onClick="SolPuzzle=window.open('camion/solution.html','SolPuzzle','width=500,height=366,toolbar=0,status=0');">
<INPUT TYPE="button" VALUE="Mélanger" onClick="InitGame(69,7,10,'camion','camion');">
</FORM>
4/ Insérer juste en-dessous des boutons:
<SCRIPT LANGUAGE="JavaScript">
<!--
InitGame(69,7,10,"camion","camion");
//-->
</SCRIPT>
