|
 |
Voici un petit jeu où vous n'aurez rien à faire, simplement à parier
sur un pion puis à donner le départ de la course.
Le navigateur fera le reste : chaque pion se voit attribuer une vitesse qui changera deux fois pendant la course, pour
ménager le suspense.
Une fois le premier pion arrivé, annonce du gain ou de la perte. |
 |
|
|
|
 |
Chaque pion est placé sur un calque qui sera ensuite déplacé à
sa vitesse propre.
Le pari sur le pion ne sert qu'à comparer le gagnant à la fin de la course.
Une fois le départ donné, le script génère 6 nombres alléatoires qui serviront
à donner une vitesse à chaque calque.
On déplace ensuite chaque calque suivant sa vitesse tout en surveillant leur position de façon à
regénérer des vitesses alléatoires dès qu'un pion atteint le tiers de la distance à
parcourir.
On réaffecte ces vitesses et on reprendra le même fonctionnement au deuxième tiers de la course.
Dès qu'un calque atteint ou dépasse la position de 'fin de course', on arrête les mouvements et on
annonce la victoire ou la perte du pari. |
|
|
|
|
 |
dans la partie <head>
 |
|
 |
|
<script language="JavaScript">
// Détection du navigateur
nc4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
// La variable 'bet' sert à savoir si le pari à été fait ou non
var bet;
// La variable 'choix' stocke le pion choisi
var choix;
// Fonction de stockage du pari et d'affichage du pion sélectionné
function pari(bouton) {
// Si le pari n'a pas encore été fait
if ( bet != "fait" ) {
// On note que le pari est maintenant effectué
bet = "fait";
// Si on a cliqué sur le premier pion...
if ( bouton == "un" ) {
// On place l'image du premier pion dans la zone montrant le pari
document.pari.src = "tierce/pmu_bc.gif";
}
// Si on a clique sur le second pion...
if ( bouton == "deux" ) {
document.pari.src = "tierce/pmu_vl.gif";
}
if ( bouton == "trois" ) {
document.pari.src = "tierce/pmu_bl.gif";
}
if ( bouton == "quatre" ) {
document.pari.src = "tierce/pmu_rg.gif";
}
if ( bouton == "cinq" ) {
document.pari.src = "tierce/pmu_or.gif";
}
if ( bouton == "six" ) {
document.pari.src = "tierce/pmu_vt.gif";
}
// On affiche maintenant le bouton permettant de donner le départ
document.departure.src = "tierce/pmu_depart.gif";
// On stocke le pari effectué
choix = bouton;
}
// Si le pari a déjà été placé
else {
alert('Vous avez déjà parié, pour changer de pari, rechargez la page.');
}
}
// Le tableau de données 'vitesses' permettra de stocker les vitesses de chaque pion
var vitesses = new Array();
// On créé une variable donnant le nombre de fois ou on génère les vitesses (il y aura 3 passages)
var preums = "0";
// La fonction attribuant les vitesses à chaque pion
function depart() {
// Si le pari n'a pas été fait
if ( bet != "fait" ) {
alert('Vous n\'avez pas encore parié...');
}
// Sinon...
else {
// On génère un nombre alléatoire (entre 0 et 1) et on 'élimine' la virgule en le multipliant
// On obtiendra par exemple ceci : 0,2658748965874 => 265874896587,4
var vit = Math.random()*1000000000000;
// On attribue le premier chiffre obtenu à la premiere vitesse (premier pion)
vitesses[0] = Math.round(parseInt((vit.toString()).substring(0,1)))+1;
// Le second chiffre à la deuxieme vitesse...
vitesses[1] = Math.round(parseInt((vit.toString()).substring(1,2)))+1;
vitesses[2] = Math.round(parseInt((vit.toString()).substring(2,3)))+1;
vitesses[3] = Math.round(parseInt((vit.toString()).substring(3,4)))+1;
vitesses[4] = Math.round(parseInt((vit.toString()).substring(4,5)))+1;
vitesses[5] = Math.round(parseInt((vit.toString()).substring(5,6)))+1;
// Si c'est la première fois qu'on tire les vitesses (départ de la course)
if ( preums == "0" ) {
// On attend une seconde et on lance le déplacement des calques
setTimeout('go()',1000);
}
// Sinon on n'attend quasiment pas pour lancer le déplacement des calques
else {
setTimeout('go()',5);
}
}
}
// Fonction pour déplacer les calques (illusion du mouvement des pions)
function go() {
// Instructions pour Netscape
if (nc4) {
// On créé 6 variables pour manipuler les calques
var uno = eval('document.un');
var dos = eval('document.deux');
var tres = eval('document.trois');
var quatro = eval('document.quatre');
var cinquo = eval('document.cinq');
var seis = eval('document.six');
// Si un des calques atteint le premier tiers de la course
if ( uno.left > 200 || dos.left > 200 || tres.left > 200 || quatro.left > 200 || cinquo.left > 200 || seis.left > 200 ) {
// Et qu'on n'a pas encore fait varier les vitesses
if ( preums == "0" ) {
// On indique qu'on opère un changement des vitesses
preums = "1";
// Et on relance de nouvelles vitesses
depart();
}
}
// Si un des calques atteint le second tiers de la course
if ( uno.left > 400 || dos.left > 400 || tres.left > 400 || quatro.left > 400 || cinquo.left > 400 || seis.left > 400 ) {
if ( preums == "1" ) {
preums = "2";
depart();
}
}
// Si un des calques atteint la fin de la course
if ( uno.left > 585 || dos.left > 585 || tres.left > 585 || quatro.left > 585 || cinquo.left > 585 || seis.left > 585 ) {
// On lance la fonction de fin de course
fin();
}
// Sinon...
else {
// On déplace chaque calque de sa vitesse propre (en fait une distance en pixels)
uno.left = uno.left + vitesses[0];
dos.left = dos.left + vitesses[1];
tres.left = tres.left + vitesses[2];
quatro.left = quatro.left + vitesses[3];
cinquo.left = cinquo.left + vitesses[4];
seis.left = seis.left + vitesses[5];
// Et on relance la fonction au bout d'un cinquième de seconde
setTimeout('go()',200);
}
}
// Instructions équivalentes pour Internet Explorer
if (ie4) {
var uno = eval('un.style');
var dos = eval('deux.style');
var tres = eval('trois.style');
var quatro = eval('quatre.style');
var cinquo = eval('cinq.style');
var seis = eval('six.style');
var uno2 = uno.left;
// L'information de position d'un calque pour IE n'étant pas '25' mais '25px', on est obligé de supprimer la partie 'px' et de convertir la donnée en nombre
uno2 = eval(uno2.substring(0,uno2.indexOf('p')));
var dos2 = dos.left;
dos2 = eval(dos2.substring(0,dos2.indexOf('p')));
var tres2 = tres.left;
tres2 = eval(tres2.substring(0,tres2.indexOf('p')));
var quatro2 = quatro.left;
quatro2 = eval(quatro2.substring(0,quatro2.indexOf('p')));
var cinquo2 = cinquo.left;
cinquo2 = eval(cinquo2.substring(0,cinquo2.indexOf('p')));
var seis2 = seis.left;
seis2 = eval(seis2.substring(0,seis2.indexOf('p')));
if ( uno2 > 200 || dos2 > 200 || tres2 > 200 || quatro2 > 200 || cinquo2 > 200 || seis2 > 200 ) {
if ( preums == "0" ) {
preums = "1";
depart();
}
}
if ( uno2 > 400 || dos2 > 400 || tres2 > 400 || quatro2 > 400 || cinquo2 > 400 || seis2 > 400 ) {
if ( preums == "1" ) {
preums = "2";
depart();
}
}
if ( uno2 > 585 || dos2 > 585 || tres2 > 585 || quatro2 > 585 || cinquo2 > 585 || seis2 > 585 ) {
fin();
}
else {
uno.left = uno2 + vitesses[0];
dos.left = dos2 + vitesses[1];
tres.left = tres2 + vitesses[2];
quatro.left = quatro2 + vitesses[3];
cinquo.left = cinquo2 + vitesses[4];
seis.left = seis2 + vitesses[5];
setTimeout('go()',200);
}
}
}
// On créé une variable pour marquer la fin de la course
var fini = "0";
// Fonction d'arrêt de la course
function fin() {
// Si la course n'était pas finie,
if (fini == "0" ) {
// On marque qu'elle est terminée
fini = "1";
// Instructions pour Netscape
if (nc4) {
// Si le calque contenant le pari du joueur n'a pas passé la ligne d'arrivée
if ( eval('document.' + choix).left < 585 ) {
// On indique par une alerte que le pion est à X distance de l'arrivée
alert('Vous avez perdu !!\nIl vous a manqué ' + (585 - eval('document.' + choix).left) + ' pixels pour gagner !');
}
// Sinon on déclare la victoire
else {
alert('Bravo !!\nVotre pari a été le bon !');
}
}
// Instructions pour Internet Explorer
if (ie4) {
var mise = eval(choix + '.style').left;
mise = eval(mise.substring(0,mise.indexOf('p')));
if ( mise < 585 ) {
alert('Vous avez perdu !!\nIl vous a manqué ' + (585 - mise) + ' pixels pour gagner !');
}
else {
alert('Bravo !!\nVotre pari a été le bon !');
}
}
}
}
</script>
|
|
|
 |
|
 |
dans la partie <body>
|
|
|
|
<!-- Image de fond de la course -->
<img src="tierce/pmu_fond.gif"><br>
<table border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td><img src="tierce/pixel.gif" width="10" height="4"></td>
<td></td>
<td><img src="tierce/pixel.gif" width="20" height="1"></td>
<td><img src="tierce/pixel.gif" width="50" height="1"></td>
<td><img src="tierce/pixel.gif" width="20" height="1"></td>
<td></td>
<td><img src="tierce/pixel.gif" width="20" height="1"></td>
<td></td>
</tr>
<tr>
<td></td>
<td class="txt">Cliquez sur le pion de votre choix pour parier sur sa victoire.<br>
Ensuite, donnez le départ et attendez de voir...</td>
<td></td>
<td class="txt" bgcolor="#009966" align="center">Pari :<br>
<!-- L'image transparente qui sera remplacée par l'image du pion du pari -->
<img src="tierce/pixel.gif" name="pari" width="25" height="24"> </td>
<td></td>
<!-- Image déclenchant le début de la course -->
<td><a href="javascript:depart();"><img src="tierce/pmu_depart0.gif" name="departure" border="0"></a></td>
<td></td>
<td class="txt" valign="bottom" align="right"><a href="javascript:history.go(0);">Rejouer</a></td>
</tr>
</table>
<!-- Création des calques de chaque pion -->
<div name="un" id="un" style="position: absolute; top: 15px; left: 5px; visibility: visible; z-index: 1;">
<!-- Un clic sur l'image stocke le pari -->
<a href="javascript:pari('un');"><img src="tierce/pmu_bc.gif" border="0"></a>
</div>
<div name="deux" id="deux" style="position: absolute; top: 45px; left: 5px; visibility: visible; z-index: 2;">
<a href="javascript:pari('deux');"><img src="tierce/pmu_vl.gif" border="0"></a>
</div>
<div name="trois" id="trois" style="position: absolute; top: 75px; left: 5px; visibility: visible; z-index: 3;">
<a href="javascript:pari('trois');"><img src="tierce/pmu_bl.gif" border="0"></a>
</div>
<div name="quatre" id="quatre" style="position: absolute; top: 105px; left: 5px; visibility: visible; z-index: 4;">
<a href="javascript:pari('quatre');"><img src="tierce/pmu_rg.gif" border="0"></a>
</div>
<div name="cinq" id="cinq" style="position: absolute; top: 135px; left: 5px; visibility: visible; z-index: 5;">
<a href="javascript:pari('cinq');"><img src="tierce/pmu_or.gif" border="0"></a>
</div>
<div name="six" id="six" style="position: absolute; top: 165px; left: 5px; visibility: visible; z-index: 6;">
<a href="javascript:pari('six');"><img src="tierce/pmu_vt.gif" border="0"></a>
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
Pari au tiercé
