 |
 Faîtes la course contre l'ordinateur ! |
|
|
|
|
|
Voici un petit jeu de rapidité plutôt stressant mais assez plaisant il me
semble... |
|
|
|
|
|
Un pion pour l'ordinateur, un pour vous, un parcours, trois niveaux de difficulté.
Chaque pion est sur un calque, une fonction va s'occuper de déplacer le pion de l'ordinateur automatiquement, en
fonction du niveau de difficulté choisi, ce sera plus ou moins vite.
Une autre fonction est activée à chaque clic du joueur, donc pas en automatique.
Il s'agit en fait simplement de déplacer deux calques sur des petites distances (15 pixels), et dans des
directions qui varient suivant le déroulement du jeu (pour rester sur le parcours tracé ;-). Il faut donc
gérer des portions de la course qui déterminent la direction du déplacement, pour le calque de
l'ordinateur comme pour celui du joueur. On aura donc deux fonctions principales en parallèle. |
|
|
|
|
|
dans la partie <head>
 |
|
 |
|
<script language="JavaScript">
// Détection du navigateur
nc4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
// Création de la variable qui affichera le compte à rebours
var compteur = 5;
// Fonction préparant le lancement de la course
function depart() {
// Instructions pour Netscape
if (nc4) {
// Si un niveau de difficulté a été choisi...
if ( document.infos.document.formulaire.diff[0].status || document.infos.document.formulaire.diff[1].status || document.infos.document.formulaire.diff[2].status ) {
// On lance l'initialisation de la course
depart2();
}
// Sinon on prévient
else {
alert('Vous n\'avez pas sélectionné le niveau de difficulté !');
}
}
// Instructions pour Internet Explorer
if (ie4) {
if ( document.formulaire.diff[0].status || document.formulaire.diff[1].status || document.formulaire.diff[2].status ) {
depart2();
}
else {
alert('Vous n\'avez pas sélectionné le niveau de difficulté !');
}
}
}
// Fonction d'initialisation de la course
function depart2() {
// Tant que le compte à rebours est supérieur à 1
if ( compteur > 1 ) {
// On enlève 1 à la variable du compte à rebours
compteur--;
// Instruction pour Netscape
if (nc4) {
// On affiche la nouvelle valeur du compte à rebours
document.infos.document.formulaire.compte.value = compteur;
}
// Instruction pour Internet Explorer
if (ie4) {
document.formulaire.compte.value = compteur;
}
// On relance la fonction pour arriver jusqu'à '1'
setTimeout('depart()',1000);
}
// Si le compte à rebours a atteint '1'
else {
// Instructions pour Netscape
if (nc4) {
// On passe le compte à rebours à '0'
document.infos.document.formulaire.compte.value = 0;
// On cache le bouton d'attente
document.jeu0.visibility = "hidden";
// On affiche le bouton d'avancée de la course
document.jeu.visibility = "visible";
// Suivant la difficulté choisie, on lance le mouvement du pion de l'ordinateur plus ou moins vite
if (document.infos.document.formulaire.diff[0].status) {
departo(500);
}
if (document.infos.document.formulaire.diff[1].status) {
departo(250);
}
if (document.infos.document.formulaire.diff[2].status) {
departo(150);
}
}
// Instructions équivalentes pour Internet Explorer
if (ie4) {
document.formulaire.compte.value = 0;
jeu0.style.visibility = "hidden";
jeu.style.visibility = "visible";
if (document.formulaire.diff[0].status) {
departo(500);
}
if (document.formulaire.diff[1].status) {
departo(250);
}
if (document.formulaire.diff[2].status) {
departo(150);
}
}
}
}
// Création et initialisation des variables pour le nom du gagnant (J/O - Joueur/Ordinateur),
var gagnant = "";
// Calque du pion de l'ordinateur
var ordi;
// Coordonnées du calque du pion de l'ordinateur
var gauche_o;
var haut_o;
// Indication de la section de la course en cours
var mouvo = 1;
// Fonction déplacant le calque du pion de l'ordinateur
function departo(vit) {
// Création de raccourcis pour Netscape
if (nc4) {
// Le calque du pion
ordi = eval('document.bleu');
// Les positions en X et en Y
gauche_o = ordi.left;
haut_o = ordi.top;
}
// Création des mêmes raccourcis pour Internet Explorer
if (ie4) {
ordi = eval('bleu.style');
gauche_o = parseInt(ordi.left.substring(0,ordi.left.indexOf('p')));
haut_o = parseInt(ordi.top.substring(0,ordi.top.indexOf('p')));
}
// Si on est dans la première partie du parcours (1ère ligne horizontale)
if ( mouvo == 1 ) {
// Si le calque est situé avant le coude vers le bas...
if ( gauche_o < 600 ) {
// On déplace le calque de 15 pixels vers la droite, mais pas vers le bas
go(15,0)
// On relance la fonction à la même vitesse (difficulté choisie au départ)
setTimeout('departo(' + vit + ')',vit);
}
// Si le pion est arrivé au bout de la première ligne (> 600 pixels)...
else {
// On se place dans la seconde partie du parcours (1ère ligne verticale)
mouvo = 2;
}
}
// Si on est dans la seconde partie du parcours...
if ( mouvo == 2 ) {
// et qu'on n'a pas atteint le bas de cette partie...
if ( haut_o < 245 ) {
// ... on déplace le pion de 15 pixels vers le bas
go(0,15)
// et on relance la fonction
setTimeout('departo(' + vit + ')',vit);
}
// Si on est arrivé en bas de la seconde partie du parcours...
else {
mouvo = 3;
}
}
// etc jusqu'à la cinquième partie du parcours (dernière ligne droite)
if ( mouvo == 3 ) {
if ( gauche_o > 70 ) {
go(-15,0)
setTimeout('departo(' + vit + ')',vit);
}
else {
mouvo = 4;
}
}
if ( mouvo == 4 ) {
if ( haut_o < 375 ) {
go(0,15)
setTimeout('departo(' + vit + ')',vit);
}
else {
mouvo = 5;
}
}
// Si on est dans la dernière partie du parcours...
if ( mouvo == 5 ) {
if ( gauche_o < 600 ) {
go(15,0)
setTimeout('departo(' + vit + ')',vit);
}
// ... et qu'on a dépassé la ligne d'arrivée...
else {
// On lance la fonction de déclaration du vainqueur
vainqueur('O');
}
}
}
// Fonction de déplacement du calque du pion de l'ordinateur
function go(x,y) {
// On déplace soit le placement horizontal (x)...
ordi.left = gauche_o + x;
// ... soit le placement vertical (y)
ordi.top = haut_o + y;
}
// On créé des variables équivalentes à l'ordinateur mais pour le pion du joueur
var joueur;
var gauche_j;
var haut_j;
var mouvj = 1;
// Fonction de déplacmeent du calque du pion du joueur (identique à 'departo()')
function departj() {
if (nc4) {
joueur = eval('document.rouge');
gauche_j = joueur.left;
haut_j = joueur.top;
}
if (ie4) {
joueur = eval('rouge.style');
gauche_j = parseInt(joueur.left.substring(0,joueur.left.indexOf('p')));
haut_j = parseInt(joueur.top.substring(0,joueur.top.indexOf('p')));
}
if ( mouvj == 1 ) {
if ( gauche_j < 540 ) {
gj(20,0)
}
else {
mouvj = 2;
}
}
if ( mouvj == 2 ) {
if ( haut_j < 190 ) {
gj(0,20)
}
else {
mouvj = 3;
}
}
if ( mouvj == 3 ) {
if ( gauche_j > 40 ) {
gj(-20,0)
}
else {
mouvj = 4;
}
}
if ( mouvj == 4 ) {
if ( haut_j < 400 ) {
gj(0,20)
}
else {
mouvj = 5;
}
}
if ( mouvj == 5 ) {
if ( gauche_j < 600 ) {
gj(20,0)
}
else {
vainqueur('J');
}
}
}
// Fonction de déplacement du calque du pion du joueur
function gj(x,y) {
joueur.left = gauche_j + x;
joueur.top = haut_j + y;
}
// FOnction déclarant le vainqueur de la course
function vainqueur(qui) {
// Si personne n'a encore été déclaré vainqueur...
if ( gagnant == "" ) {
// On enregistre le vainqueur
gagnant = qui;
// Si c'est le joueur...
if ( gagnant == "J" ) {
// Félicitations...
alert('Bravo !!\nVous avez gagné la course.\n\nPour recommencer, rechargez la page.');
}
// Sinon...
if ( gagnant == "O" ) {
alert('Vous avez perdu !\nL\'ordinateur a été plus rapide. :-(\n\npour ré-essayez, rechargez la page.');
}
}
}
</script>
|
|
|
 |
|
 |
dans la partie <body>
|
|
|
|
<!-- Image du parcours de la course -->
<img src="course/course.gif">
<!-- Image du bandeau d'arrivee (z-index eleve pour que les pions passent au-dessous) -->
<div name="arrivee" id="arrivee" style="position: absolute; top: 320px; left: 593px; visibility: visible; z-index: 10;">
<img src="course/course_arrivee.gif" border="0">
</div>
<!-- Calque presentant les informations de jeu (explications et compte a rebours) -->
<div name="infos" id="infos" style="position: absolute; top: 112px; left: 10px; visibility: visible; z-index: 1;">
<table border="0" cellspacing="0" cellpadding="0" width="510">
<tr>
<td><img src="course/pixel.gif" width="350" height="1"></td>
<td><img src="course/pixel.gif" width="10" height="1"></td>
<td><img src="course/pixel.gif" width="100" height="1"></td>
<td><img src="course/pixel.gif" width="50" height="1"></td>
</tr>
<tr>
<td class="txt">Faîtes la course contre l'ordinateur !!
Choisissez le niveau de difficulté puis cliquez sur "Décompte" pour lancer le compte-à-rebours. Quand il atteindra "0", cliquez sur le bouton "Patientez/Go" pour faire avancer votre pion (le rouge). Le premier arrivé a gagné !</td>
<td><form name="formulaire"></td>
<!-- Niveaux de difficulte -->
<td class="txt"><input type="radio" name="diff"> facile
<input type="radio" name="diff"> moyen
<input type="radio" name="diff"> difficile</td>
<!-- Compte a rebours non modifiable -->
<td class="txt" align="center"><input type="text" size="1" name="compte" value="5" OnFocus="blur();">
<!-- Lancement du compte a rebours -->
<a href="javascript:depart();">Décompte</a></td>
</tr>
</table></form>
</div>
<!-- Calque masquant le bouton d'avancee de la course -->
<div name="jeu0" id="jeu0" style="position: absolute; top: 287px; left: 100px; visibility: visible; z-index: 2;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="course/pixel.gif" width="480" height="1"></td>
</tr>
<tr>
<td align="center"><img src="course/course_attente.gif"></td>
</tr>
</table>
</div>
<!-- Calque contenant le bouton d'avancee de la course -->
<div name="jeu" id="jeu" style="position: absolute; top: 287px; left: 100px; visibility: hidden; z-index: 1;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="course/pixel.gif" width="480" height="1"></td>
</tr>
<tr>
<!-- Bouton permettant l'avancee du pion du joueur -->
<td align="center"><a href="javascript:departj();"><img src="course/course_go.gif" border="0"></a></td>
</tr>
</table>
</div>
<!-- Calques contenant les pions de l'ordianteur et du joueur -->
<div name="bleu" id="bleu" style="position: absolute; top: 28px; left: 25px; visibility: visible; z-index: 1;">
<img src="course/course_b.gif" border="0">
</div>
<div name="rouge" id="rouge" style="position: absolute; top: 75px; left: 25px; visibility: visible; z-index: 1;">
<img src="course/course_r.gif" border="0">
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
