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

JavaScript 1.3
Jeux

  Petit puzzle !

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

  Fonction
Voici un petit jeu de puzzle classique : une image de éclatée en 20 pièces qu'il va falloir replacer chacune au bon endroit.
  Principe
Chaque pièce du puzzle est placée sur un calque identifié.
Un clic sur chacune des images déclenche le mouvement du calque suivant le mouvement de la souris (la pièce suit la souris), puis un autre clic relache le calque et analyse son placement : s'il est à une distance X de sa 'bonne position', on place le calque à sa 'bonne position'. Sinon, on le repose simplement.
A chaque fois qu'un calque est 'reposé', on compare la position de tous les calques à leur 'bonne position' respective, si tout est en place, on signale que le jeu est gagné.
  Le script
dans la partie <head>
<script language="JavaScript">
// Détection du navigateur
nc4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

// approx : la distance par rapport à l'emplacement exact des pièces qui sera 'toléré'
var approx = 10;

// Position en X de la première pièce
var a1x = 10;

// Position en Y de la première pièce
var a1y = 10;

// etc...
var a2x = 132;
var a2y = 10;
var a3x = 254;
var a3y = 10;
var a4x = 376;
var a4y = 10;
var a5x = 498;
var a5y = 10;
var a6x = 10;
var a6y = 118;
var a7x = 132;
var a7y = 118;
var a8x = 254;
var a8y = 118;
var a9x = 376;
var a9y = 118;
var a10x = 498;
var a10y = 118;
var a11x = 10;
var a11y = 226;
var a12x = 132;
var a12y = 226;
var a13x = 254;
var a13y = 226;
var a14x = 376;
var a14y = 226;
var a15x = 498;
var a15y = 226;
var a16x = 10;
var a16y = 334;
var a17x = 132;
var a17y = 334;
var a18x = 254;
var a18y = 334;
var a19x = 376;
var a19y = 334;
var a20x = 498;
var a20y = 334;

// La variable qui servira à manipuler les calques
var skn;

// Deux variables d'ajustement spécifique à Internet Explorer Mac
var delta_x;
var delta_y;

// Etat du déplacement (oui: en cours, non: pas en cours)
var demarre = "non";

// Variables prenant comme valeur la position attendue de la pièce en cours de déplacement
var g;
var h;

// Fonction se déclenchant au clic sur les pièces, lançant le déplacement ou la pose de la pièce
function bouge(calque) {

// S'il n'y a pas de déplacement en cours, on attrape la pièce
if (demarre == "non") {
selec(calque);
}

// S'il y a un déplacmeent en cours, on pose la pièce
if (demarre == "oui") {
lache(calque);
}
}

// Fonction lançant le déplacement des calques
function selec(calque) {

// Instructions pour Netscape
if (nc4) {

// Renseignement de la variable de manipulation des calques
skn = eval('document.' + calque);
}

// Instruction équivalente pour Internet Explorer
if (ie4) {
skn = eval(calque + '.style');
}

// On fait passer le calque sélectionné au dessus des autres (Z-index supérieur)
skn.zIndex += 1;

// Lancement de la détection des mouvements de la souris
if (nc4) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = suivre_souris;
}

// Fonction utilisant le déplacement de la souris pour déplacer le calque sélectionné
function suivre_souris(e) {

// Instructions pour Netscape
if (nc4) {

// On intercepte les coordonnées X et Y du pointeur de la souris
var x = e.pageX;
var y = e.pageY;
}

// Instructions équivalentes pour Internet Explorer
if (ie4) {
var x = event.x + document.body.scrollLeft;
var y = event.y + document.body.scrollTop;
}

// Si on n'est pas sous Internet Explorer Mac
if ( (navigator.userAgent.indexOf('Mac') != -1) && (navigator.userAgent.indexOf('MSIE') != -1) ) {

// On attribue les coordonnées du pointeur au calque
skn.left = x;
skn.top = y;
}

// Si on est sous Internet Explorer Mac
else {

// On corrige légèrement les coordonnées X et Y du pointeur
delta(x,y);
skn.left = x - delta_x;
skn.top = y - delta_y;
}
}

// Fonction de correction des coordonnées du pointeur pour Internet Explorer Mac
function delta(x,y) {
if (demarre != "oui") {
demarre = "oui";
delta_x = x - parseInt(skn.left);
delta_y = y - parseInt(skn.top);
}
}

// Fonction de pose du calque sélectionné et d'analyse de la position
function lache(calque) {

// On marque qu'aucun déplacement n'est plus en cours
demarre = "non";

// Suivant le calque sélectionné, on récupère sa 'bonne position'
if (calque == "p1") { g = a1x; h = a1y; }
if (calque == "p2") { g = a2x; h = a2y; }
if (calque == "p3") { g = a3x; h = a3y; }
if (calque == "p4") { g = a4x; h = a4y; }
if (calque == "p5") { g = a5x; h = a5y; }
if (calque == "p6") { g = a6x; h = a6y; }
if (calque == "p7") { g = a7x; h = a7y; }
if (calque == "p8") { g = a8x; h = a8y; }
if (calque == "p9") { g = a9x; h = a9y; }
if (calque == "p10") { g = a10x; h = a10y; }
if (calque == "p11") { g = a11x; h = a11y; }
if (calque == "p12") { g = a12x; h = a12y; }
if (calque == "p13") { g = a13x; h = a13y; }
if (calque == "p14") { g = a14x; h = a14y; }
if (calque == "p15") { g = a15x; h = a15y; }
if (calque == "p16") { g = a16x; h = a16y; }
if (calque == "p17") { g = a17x; h = a17y; }
if (calque == "p18") { g = a18x; h = a18y; }
if (calque == "p19") { g = a19x; h = a19y; }
if (calque == "p20") { g = a20x; h = a20y; }
if (nc4) document.captureEvents(Event.MOUSEMOVE);

// Si le calque est à plus ou moins le décallage toléré par rapport à sa 'bonne position'
if ( parseInt(skn.left) > (g-approx) && parseInt(skn.left) < (g+approx) && parseInt(skn.top) > (h-approx) && parseInt(skn.top) < (h+approx) ) {

// On le place à la bonne position
skn.left = g;
skn.top = h;

// Et on le récale à son niveau initial (pour qu'il ne recouvre plus les autres calques)
skn.zIndex -= 1;
}

// Si tous les calques sont à leur 'bonne position'...
// Instructions pour Netscape
if (nc4) {
if (document.p1.left == a1x && document.p1.top == a1y) {
if (document.p2.left == a2x && document.p2.top == a2y) {
if (document.p3.left == a3x && document.p3.top == a3y) {
if (document.p4.left == a4x && document.p4.top == a4y) {
if (document.p5.left == a5x && document.p5.top == a5y) {
if (document.p6.left == a6x && document.p6.top == a6y) {
if (document.p7.left == a7x && document.p7.top == a7y) {
if (document.p8.left == a8x && document.p8.top == a8y) {
if (document.p9.left == a9x && document.p9.top == a9y) {
if (document.p10.left == a10x && document.p10.top == a10y) {
if (document.p11.left == a11x && document.p11.top == a11y) {
if (document.p12.left == a12x && document.p12.top == a12y) {
if (document.p13.left == a13x && document.p13.top == a13y) {
if (document.p14.left == a14x && document.p14.top == a14y) {
if (document.p15.left == a15x && document.p15.top == a15y) {
if (document.p16.left == a16x && document.p16.top == a16y) {
if (document.p17.left == a17x && document.p17.top == a17y) {
if (document.p18.left == a18x && document.p18.top == a18y) {
if (document.p19.left == a19x && document.p19.top == a19y) {
if (document.p20.left == a20x && document.p20.top == a20y) {

// Message en cas de succès
alert('Gagné !!');
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}

// Instructions équivalentes pour Internet Explorer
if (ie4) {
if (parseInt(p1.style.left) == a1x && parseInt(p1.style.top) == a1y) {
if (parseInt(p2.style.left) == a2x && parseInt(p2.style.top) == a2y) {
if (parseInt(p3.style.left) == a3x && parseInt(p3.style.top) == a3y) {
if (parseInt(p4.style.left) == a4x && parseInt(p4.style.top) == a4y) {
if (parseInt(p5.style.left) == a5x && parseInt(p5.style.top) == a5y) {
if (parseInt(p6.style.left) == a6x && parseInt(p6.style.top) == a6y) {
if (parseInt(p7.style.left) == a7x && parseInt(p7.style.top) == a7y) {
if (parseInt(p8.style.left) == a8x && parseInt(p8.style.top) == a8y) {
if (parseInt(p9.style.left) == a9x && parseInt(p9.style.top) == a9y) {
if (parseInt(p10.style.left) == a10x && parseInt(p10.style.top) == a10y) {
if (parseInt(p11.style.left) == a11x && parseInt(p11.style.top) == a11y) {
if (parseInt(p12.style.left) == a12x && parseInt(p12.style.top) == a12y) {
if (parseInt(p13.style.left) == a13x && parseInt(p13.style.top) == a13y) {
if (parseInt(p14.style.left) == a14x && parseInt(p14.style.top) == a14y) {
if (parseInt(p15.style.left) == a15x && parseInt(p15.style.top) == a15y) {
if (parseInt(p16.style.left) == a16x && parseInt(p16.style.top) == a16y) {
if (parseInt(p17.style.left) == a17x && parseInt(p17.style.top) == a17y) {
if (parseInt(p18.style.left) == a18x && parseInt(p18.style.top) == a18y) {
if (parseInt(p19.style.left) == a19x && parseInt(p19.style.top) == a19y) {
if (parseInt(p20.style.left) == a20x && parseInt(p20.style.top) == a20y) {
alert('Gagné !!');
}}}}}}}}}}}}}}}}}}}}
}

// On arrête tout mouvement au déplacement de la souris
document.onmousemove = rien;
}

// Fonction arrétant tout
function rien() {
void(0);
skn.zIndex = 3;
}
</script>

dans la partie <body>
<!-- Image de fond du puzzle -->
<div id="fond" name="fond" style="position: absolute; top: 9px; left: 9px; visibility: visible; z-index: 1;">
<img src="puzzle_noel/puzzle_fond2.gif"><br>
La tolérance de placement est de 10 pixels
</div>

<!-- Une première pièce du puzzle -->
<!-- Le calque porte le nom de sa pièce et est positionné... n'importe où -->
<div id="p20" name="p20" style="position: absolute; top: 150px; left: 310px; visibility: visible; z-index: 3;">

<!-- Sur Clic, on lance la fonction principale -->
<a href="javascript:bouge('p20');"><img src="puzzle_noel/puzzle20.gif" border="0"></a>
</div>

<!-- Une seconde pièce du puzzle... -->
<div id="p14" name="p14" style="position: absolute; top: 45px; left: 130px; visibility: visible; z-index: 3;">
<a href="javascript:bouge('p14');"><img src="puzzle_noel/puzzle14.gif" border="0"></a>
</div>
etc...
  Démonstration

Voir la 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_noel.zip
    87 Ko (avec les images)    		 telechargez le script telechargez le script
    Script séparé :
    jeux_puzzle_noel2.zip
    87 Ko (avec les images)
    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