Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

JavaScript 1.3
Jeux

  Puzzle

fonction de ce script  principe de ce script  le script lui-meme  demonstration du script  telechargement du script

  Fonction
Le but de ce script est de proposer au visiteur un petit jeu de puzzle.
  Principe
Je dois avouer ne pas avoir créer ce script, je l'ai seulement simplifié un peu. Je ne le détaillerai donc pas beaucoup.
  Le script
dans la partie <head>
<script language="JavaScript">
var etat = 0;
var scoring = 0;
var vide = 4;

// on va créer les images à déplacer par JavaScript
lieu = new imagettes(17);

// on adresse un emplacement à chaque image au départ
lieu[1]=1; lieu[2]=2; lieu[3]=3; lieu[4]=4;
lieu[5]=5; lieu[6]=6; lieu[7]=7; lieu[8]=8;
lieu[9]=9; lieu[10]=10; lieu[11]=11; lieu[12]=12;
lieu[13]=13; lieu[14]=14; lieu[15]=15; lieu[16]=0;

// la liste des images
vign = new imagettes(17);

vign[0].src = "puzzle/black.gif";
vign[1].src = "puzzle/biblio01.gif";
vign[2].src = "puzzle/biblio02.gif";
vign[3].src = "puzzle/biblio03.gif";
vign[4].src = "puzzle/biblio04.gif";
vign[5].src = "puzzle/biblio05.gif";
vign[6].src = "puzzle/biblio06.gif";
vign[7].src = "puzzle/biblio07.gif";
vign[8].src = "puzzle/biblio08.gif";
vign[9].src = "puzzle/biblio09.gif";
vign[10].src = "puzzle/biblio10.gif";
vign[11].src = "puzzle/biblio11.gif";
vign[12].src = "puzzle/biblio12.gif";
vign[13].src = "puzzle/biblio13.gif";
vign[14].src = "puzzle/biblio14.gif";
vign[15].src = "puzzle/biblio15.gif";
vign[16].src = "puzzle/biblio16.gif";


function imagettes(n) {
this.length = n;
for (var i = 0; i<=n; i++) {
this[i] = new Image();
}
return this;
}

// on initialise le jeu
function depart() {
etat = 0;
scoring = 0;
vide = 4;
document.formulaire.indications.value = "Cliquez sur l'image pour commencer";
document.formulaire.score.value = "Votre score s'affichera ici";
}

// fonction pour effectuer le mélange du départ
function alleatoire(num) {
return Math.floor( Math.random() * num );
}

// fonction appelée ensuite pour afficher les images après déplacement
function afficher() {
for ( var j = 1; j < 17 ; j++ ) {
document ["vignette"+j].src = vign[lieu[j]].src;
}
}

function deplace(nb_img) {

// mélange des images
if (etat == 0) {
etat = 2;
for (var i = 0; i < 100; i++) {
i1 = alleatoire(16)+1;
i2 = alleatoire(16)+1;
tempo = lieu[i1];
lieu[i1] = lieu[i2];
lieu[i2] = tempo;
}
for (var i = 1; i < 17; i++) {
if ( lieu[i] == 0 ) {
vide = i;
}
}
afficher();
etat = 1;
document.formulaire.indications.value = "Cliquez sur une image pour la deplacer";
document.formulaire.score.value = "Votre score : 0";
}
else {

// déplacement des images
if ( etat == 1 ) {
if ( lieu[nb_img] != 0 ){
if ( (nb_img+4 == vide) || (nb_img-4 == vide) || ( (nb_img-1 == vide ) && (nb_img%4 != 1) ) || ( (nb_img+1 == vide ) && (nb_img%4 != 0) ) ) {
lieu[vide] = lieu[nb_img];
lieu[nb_img] = 0;
vide = nb_img;
scoring++;
document.formulaire.indications.value = "Cliquez sur une image pour la deplacer";
document.formulaire.score.value = "Votre score : " + scoring;
afficher();
}
}
}
}
}
</script>

dans la partie <body>
<body OnLoad="depart()">
<table border=1 cellpadding=0 cellspacing=0>
<tr>
<td><a href="#" onclick="deplace(1)"><img name="vignette1" src="puzzle/biblio01.gif" border="0"></a></td>
<td><a href="#" onclick="deplace(2)"><img name="vignette2" src="puzzle/biblio02.gif" border="0"></a></td>
<td><a href="#" onclick="deplace(3)"><img name="vignette3" src="puzzle/biblio03.gif" border="0"></a></td>
<td><a href="#" onclick="deplace(4)"><img name="vignette4" src="puzzle/biblio04.gif" border="0"></a></td>
</tr>
<tr>
<td><a href="#" onclick="deplace(5)"><img name="vignette5" src="puzzle/biblio05.gif" border="0"></a></td>
<td><a href="#" onclick="deplace(6)"><img name="vignette6" src="puzzle/biblio06.gif" border="0"></a></td>
<td><a href="#" onclick="deplace(7)"><img name="vignette7" src="puzzle/biblio07.gif" border="0"></a></td>
<td><a href="#" onclick="deplace(8)"><img name="vignette8" src="puzzle/biblio08.gif" border="0"></a></td>
</tr>
<tr>
<td><a href="#" onclick="deplace(9)"><img name="vignette9" src="puzzle/biblio09.gif" border="0"></a></td>
<td><a href="#" onclick="deplace(10)"><img name="vignette10" src="puzzle/biblio10.gif" border="0"></a></td>
<td><a href="#" onclick="deplace(11)"><img name="vignette11" src="puzzle/biblio11.gif" border="0"></a></td>
<td><a href="#" onclick="deplace(12)"><img name="vignette12" src="puzzle/biblio12.gif" border="0"></a></td>
</tr>
<tr>
<td><a href="#" onclick="deplace(13)"><img name="vignette13" src="puzzle/biblio13.gif" border="0"></a></td>
<td><a href="#" onclick="deplace(14)"><img name="vignette14" src="puzzle/biblio14.gif" border="0"></a></td>
<td><a href="#" onclick="deplace(15)"><img name="vignette15" src="puzzle/biblio15.gif" border="0"></a></td>
<td><a href="#" onclick="deplace(16)"><img name="vignette16" src="puzzle/black.gif" border="0"></a></td>
</tr>
</table>

<form name="formulaire">
<input name="indications" value="" size="38">

<input name="score" value="" size="38">
</form>
  Démonstration


  Téléchargement
Ce script est disponible en deux versions :
  • le script est intégré à la page où il agit,
  • le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

    L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
    Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.
    		•
    Script intégré :
    jeux_puzzle.zip
    37 Ko    		 telechargez le script telechargez le script
    Script séparé :
    jeux_puzzle2.zip
    37 Ko
    Recherche
    		aide sur la recherche
    CSS 2
    DHTML
    HTML 4
    Références
    Aide générale
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter