 |
 Tapez sur tout ce qui bouge ! |
|
|
|
|
|
Voici un petit jeu pour se défouler de temps en temps. Vous savez, dans les foires, le plateau avec des gros ronds d'où sortent des
têtes sur lesquelles il faut taper avec un gros marteau... |
|
|
|
|
|
Un tableau de jeu, 25 cases avec des images transparentes au départ, qui seront remplacées aléatoirmeent par des têtes.
Un petit script pour suivre les mouvements du pointeur et déplacer en même temps l'image d'un marteau, tête en l'air, à chaque clic, on remplace
marteau par son cousin, tête en bas (illusion du marteau qui tape).
On génère un nombre aléatoire pour afficher une des 25 têtes, on affiche la tête, on note laquelle est affichée pour pouvoir augmenter
les points si le visiteur tape dessus. Si il tape dessus, on modifie l'image de la tête pour la montrer 'écrasée', puis on repasse à l'image
transparente pour afficher une autre tête ailleurs.
Le jeu est chronométré et au bout du temps imparti, on annonce le score. Score qui est d'ailleurs affiché et incrémenté au fur et à mesure.
Trois niveau de difficulté sont prévus, où on fait varier la vitesse d'affichage des têtes. |
|
|
|
|
|
dans la partie <head>
 |
|
 |
|
<script language="JavaScript">
// Détection du navigateur
nc6 = (typeof(window.controllers) != 'undefined' && typeof(window.locationbar) != 'undefined')? true:false;
nc4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
// Fonction appelée lors du clic n'importe où sur la page (mouvement 1 du marteau)
function marty1() {
// Instructions pour Netscape 4.x
if (nc4) {
// Modification de l'image placée dans le calque suivant le pointeur
document.pointeur.document.mart.src = "marteau/marteau_1.gif";
}
// Instruction équivalente pour Internet Explorer et Netscape 6.x
if (ie4 || nc6) {
document.mart.src = "marteau/marteau_1.gif";
}
// On lance ensuite une fonction similaire pour rechanger l'image du marteau (mouvement 2)
setTimeout("marty2();",250);
}
// Fonction modifiant l'image du marteau (mouvement 2)
function marty2() {
if (nc4) {
document.pointeur.document.mart.src = "marteau/marteau_0.gif";
}
if (ie4 || nc6) {
document.mart.src = "marteau/marteau_0.gif";
}
}
// Fonction changeant les têtes en 'têtes écrasées'
function tape(cible) {
// Si l'image cliquée correspond à l'image affichée
if ( cible == numero ) {
// Modification de l'image
eval("document.cible" + cible).src = "marteau/tete_1.gif";
// Incrémentation du score
document.formulaire.score.value++;
// On lance une autre fonction pour ensuite faire disparaître la tête écrasée
setTimeout("tape2();",150);
}
}
// Fonction de disparition des têtes écrasées
function tape2() {
eval("document.cible" + numero).src = "marteau/px.gif";
}
// Le nombre de têtes à écraser
var nombre_tetes = 25;
var nombre_alleatoire;
// Le numéro de la tête précédemment affichée (pour éviter les doublés)
var numero_preced;
// Le numéro de l'image affichée
var numero;
// Le délai entre chaque affichage de tête (pour Netscape 4.x et Internet Explorer)
var vitesse;
// Variable qui recevra la 'boucle' du jeu (relance des fonctions)
var jeu;
// Variable qui reçoit l'attente de début du jeu (pour Netscape 4.x et Internet Explorer)
var attente;
// Fonction d'affichage des têtes pour Netscape 6
function alea_nc6() {
// Génération d'un nombre aléatoire (entre 0 et 1 ex: 0.2458768)
nombre_alleatoire = Math.random();
// Choix d'une tête grace au nombre aléatoire
numero = Math.round( ( nombre_tetes - 1 ) * nombre_alleatoire ) + 1;
// Si ce nombre est identique au précédent choix, on relance la fonction
if ( numero == numero_preced ) {
alea_nc6();
}
// Sinon...
else {
// Si le compteur de temps est vide, on le lance
if (document.formulaire.temps.value == "") {
compteur();
}
// On stocke le numéro de tête choisi pour le comparer lors du prochain tirage aléatoire
numero_preced = numero;
// On affiche la tête sélectionnée
eval("document.cible" + numero).src = "marteau/tete_0.gif";
// Suivant le niveau de difficulté choisi, on lance la disparition de l'image plus ou moins vite
if ( document.formulaire.niveau[0].checked == "1" ) {
// La fonction de disparition de l'image est placée en variable pour pouvoir l'interrompre à la fin du jeu
jeu = setTimeout("alea_nc62();",1400);
}
if ( document.formulaire.niveau[1].checked == "1" ) {
jeu = setTimeout("alea_nc62();",1000);
}
if ( document.formulaire.niveau[2].checked == "1" ) {
jeu = setTimeout("alea_nc62();",750);
}
}
}
// Fonction de disparition de l'image
function alea_nc62() {
eval("document.cible" + numero).src = "marteau/px.gif";
// Relance d'un nouvel affichage
alea_nc6();
}
// Fonction d'affichage des têtes pour Netscape 4.x et Internet Explorer (lancée au chargement de la page)
function alea() {
// Tant qu'aucun niveau n'est choisi, on relance la fonction
if (!document.formulaire.niveau[0].status && !document.formulaire.niveau[1].status && !document.formulaire.niveau[2].status) {
attente = setTimeout("alea();",2000);
}
// Dès qu'un niveau est choisi...
else {
// On bloque l'instruction suivante
clearTimeout(attente);
// Suivant le niveau choisi, on détermine un délai de relance
if ( document.formulaire.niveau[0].status ) {
vitesse = 1400;
}
if ( document.formulaire.niveau[1].status ) {
vitesse = 1000;
}
if ( document.formulaire.niveau[2].status ) {
vitesse = 750;
}
// Génération d'un nombre aléatoire (entre 0 et 1 ex: 0.2458768)
nombre_alleatoire = Math.random();
// Choix d'une tête grâce au nombre aléatoire
numero = Math.round( ( nombre_tetes - 1 ) * nombre_alleatoire ) + 1;
// Si ce nombre est identique au précédent choix, on relance la fonction
if ( numero == numero_preced ) {
alea();
}
// Sinon...
else {
// Si le compteur de temps est vide, on le lance
if (document.formulaire.temps.value == "") {
compteur();
}
// On stocke le numéro de tête choisi pour le comparer lors du prochain tirage aléatoire
numero_preced = numero;
// On affiche la tête sélectionnée
eval("document.cible" + numero).src = "marteau/tete_0.gif";
// La fonction de disparition de l'image est placée en variable pour pouvoir l'interrompre à la fin du jeu
jeu = setTimeout("alea2();",vitesse);
}
}
}
// Fonction de disparition de l'image
function alea2() {
eval("document.cible" + numero).src = "marteau/px.gif";
// Relance d'un nouvel affichage
alea();
}
// Fonction de gestion du temps
function compteur() {
// Si le compteur est vide
if (document.formulaire.temps.value == "" ) {
// On le place à 30
document.formulaire.temps.value = 30;
// Et on relance la fonction au bout d'une seconde
setTimeout("compteur();",1000);
}
// Si le compteur n'est pas vide...
else {
// Et qu'il est supérieur à 0
if ( document.formulaire.temps.value > 0 ) {
// On retire 1
document.formulaire.temps.value -= 1;
// Et on relance la fonction au bout d'une seconde
setTimeout("compteur();",1000);
}
// Si le compteur n'est plus supérieur à 0
else {
// On arrête la fonction d'affichage des têtes
clearTimeout(jeu);
// On masque la dernière tête
eval("document.cible" + numero).src = "marteau/px.gif";
// On initialise la tête active (pour éviter de continuer à cliquer et à marquer des points)
numero = 0;
// Message d'information sur les scores
alert('Termine !!\nVotre score est de : ' + document.formulaire.score.value + '.\n\nLes maxima sont :\nFacile : 22 points\nMoyen : 31 points\nDifficile : 40 points.');
}
}
}
</script>
|
|
|
 |
|
 |
dans la partie <body>
|
|
|
|
<!-- Initialisation du compteur au chargement de la page -->
<body OnLoad="document.formulaire.reset();">
<!-- Calque recevant l'image du marteau -->
<div id="pointeur" style="position: absolute; left: 0px; top: 0px; z-index: 2">
<img src="marteau/marteau_0.gif" name="mart">
</div>
<script language="JavaScript">
// Fonction de déplacement du marteau
function suivre_souris(e) {
// Instructions pour Netscape 6
if (nc6) {
// On intercepte la position en X (horizontale) du pointeur et on la place dans une variable
var x = e.pageX;// + parseInt(skn.style.left);
// De même pour la position en Y (verticale)
var y = e.pageY;// + parseInt(skn.style.top);
}
// Instructions équivalentes pour Netscape 4.x
if (nc4) {
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;
}
// Positionnement du calque spécifique pour Internet Explorer sur Mac
if ( (navigator.userAgent.indexOf('Mac') != -1) && (navigator.userAgent.indexOf('MSIE') != -1) ) {
// On affecte au calque les coordonnées du pointeur, corrigées
skn.left = x - 41;
skn.top = y - 41;
}
// Positionnement hors Internet Explorer Mac
else {
// Instructions pour Netscape 6
if (nc6) {
skn.style.left = x - 35;
skn.style.top = y - 35;
}
// Instructions équivalentes pour Netscape 4.x et Internet Explorer
else {
skn.left = x - 35;
skn.top = y - 30;
}
}
}
// Variable pour manipuler le calque recevant l'image du marteau
var skn;
// Affectation du nom du calque pour Netscape 6
if (nc6) {
skn = document.getElementById("pointeur");
}
// Instruction équivalente pour Netscape 4.x
if (nc4) {
skn = document.pointeur;
}
// Instruction équivalente pour Internet Explorer
if (ie4) {
skn = pointeur.style;
}
// Lancement de l'interception des mouvements du pointeur et du clic
if (nc4) {
document.captureEvents(Event.MOUSEMOVE);
document.captureEvents(Event.CLICK);
}
if (nc6) {
document.addEventListener("mousemove",document.onmousemove,true);
suivre_souris;
}
// Au mouvement, on lance la fonction de suivi du mouvement
document.onmousemove = suivre_souris;
// Au clic on lance la fonction d'animation du marteau
document.onclick = marty1;
</script>
<form name="formulaire">
Vous avez 30 secondes pour écraser le maximum de têtes !!
Choisissez le niveau de difficulté et c'est parti !!
<!-- Si l'état d'un des boutons change, Netscape 6 lance le jeu, les autres ne réagissent pas -->
Niveau : <input type="radio" name="niveau" OnChange="alea_nc6();"> Facile <input type="radio" name="niveau" OnChange="alea_nc6();"> Moyen <input type="radio" name="niveau" OnChange="alea_nc6();"> Difficile
<table border="1" cellspacing="4" cellpadding="0">
<tr>
<!-- On positionne chaque tête (image transparente au chargement), avec un nom 'logique' et une fonction pour l'animation de la tête -->
<td><a href="javascript:tape(1);"><img src="marteau/px.gif" name="cible1" width="40" border="0"></a></td>
<td><a href="javascript:tape(2);"><img src="marteau/px.gif" name="cible2" width="40" border="0"></a></td>
<td><a href="javascript:tape(3);"><img src="marteau/px.gif" name="cible3" width="40" border="0"></a></td>
<td><a href="javascript:tape(4);"><img src="marteau/px.gif" name="cible4" width="40" border="0"></a></td>
<td><a href="javascript:tape(5);"><img src="marteau/px.gif" name="cible5" width="40" border="0"></a></td>
</tr>
...
</table>
<!-- Les champs de temps restant et de score -->
Temps restant : <input type="text" name="temps" size="4"> Votre score = <input type="text" name="score" value="0">
</form>
<script language="JavaScript">
// Lancement de l'analyse de l'état des boutons de niveau pour Netscape 4.x et Internet Explorer à la fin de la page !!
if (!nc6) {
alea();
}
</script>
</body>
|
|
|
|
|
|
|
|
|
|
|
|
|
