C’est avec ce code source que vous allez pouvoir jouer au « Bandit manchot ». Il est séparé en deux parties, le Html et le JavaScript.
Pour voir le résultat, cliquez ici.
Le code Html :
<body>
<br />
<div id="globale">
<br />
<div id="contenu">
<br />
<div id="levier2">
<input type="image" value=" " onclick="lancer_jeu();" id="levier"/>
</div>
<p>
<br />
<div id="resultat">
<br />
<p id="affichage_gains">
---
</p>
<p>
</div>
<p>
<br />
<div id="pot">
<br />
<p class="vert">votre pot <br />est de :
</p>
<p>
<br />
<p id="affichage_pot">100
</p>
<p>
<br />
<p class="vert">mise :
</p>
<p>
<br />
<p id="affichage_mise">0
</p>
<p>
</div>
<p>
<br />
<div id="jackpot">
<img name="s1" src="media/theme/slot-vide.png" alt="slot-vide"/>
<img name="s2" src="media/theme/slot-vide.png" alt="slot-vide"/>
<img name="s3" src="media/theme/slot-vide.png" alt="slot-vide"/>
</div>
<p>
<br />
<div id="boutons">
<input onclick="miser();" type="image" src="media/theme/mise-plus.png" id="miser1"/>
<input onclick="tout_miser();" type="image" src="media/theme/mise-tout.png" id="miserall"/>
</div>
<p>
</div>
<p>
</div>
<p>
</body>
Le code JavaScript :
var mise = 0;
var pot = 100;
var gains = 0;
// nombre de slots
var nombre_slots = 3;
// declaration d'un tableau avec "slots" comme valeur
var slots = new Array(nombre_slots);
//dclaration de la valeur des slots
var valeur_des_slots = 0;
function lancer_jeu()
{
if (mise == 0) return;
// rinitialisation de la valeur des slots
valeur_des_slots = 0;
// creation et remplissage du tableau
for (var index = 0; index < nombre_slots; index++) { slots[index] = tirer_aleatoirement_image(); } s1.src=slots[0]; s2.src=slots[1]; s3.src=slots[2]; calculer_gains(); } //Cette fontion sert pour augmenter la valeur du pot function garder_gains() { if (valeur_des_slots > 0)
{
//alert('Vous avez Gagné !!!'); // Affiche une box avec le message "Vous avez Gagné"
pot = pot + gains;
}
}
//fonction pour tirer alatoirement une image
function tirer_aleatoirement_image()
{
var nombre_images = 4;
// nom de toutes les images d'un slot
var images = new Array("./media/slot/slot-euro.png","./media/slot/slot-cerise.png","./media/slot/slot-etoile.png","./media/slot/slot-couronne.png");
// tirage de l'alea
var alea = Math.floor(Math.random()*nombre_images);
// recuperation du nom de l'image dans le tableau
var slot = images[alea];
// mise jour de la valeur des slots
valeur_des_slots = (Math.pow(10,alea)) + (valeur_des_slots);
return slot;
}
function calculer_gains()
{
//je fais un switch case pour savoir quels sont mes gains
switch(valeur_des_slots)
{
case nombre_slots:
gains = mise*20;
alert('jackpot');
garder_gains();
break;
case nombre_slots * 1000:
gains = mise*15;
garder_gains();
break;
case nombre_slots * 100:
gains = mise*10;
garder_gains();
break;
case nombre_slots * 10:
gains = mise*5;
garder_gains();
break;
case 12:
case 102:
case 1002:
gains = mise*2;
garder_gains();
break;
default:
gains = 0;
break;
}
// rechargement automatique de la mis tant que le pot est plein (plus ergonomique)
mise = 0;
if (pot > 0)
{
pot -= 1;
mise = 1;
}
document.getElementById("affichage_pot").innerHTML = pot;
document.getElementById("affichage_gains").innerHTML = gains;
document.getElementById("affichage_mise").innerHTML = mise;
}
function miser()
{
if (pot > 1)
{
pot -= 1;
mise += 1;
document.getElementById("affichage_pot").innerHTML = pot;
document.getElementById("affichage_gains").innerHTML = gains;
document.getElementById("affichage_mise").innerHTML = mise;
}
}
function tout_miser()
{
if (pot > 1)
{
mise += pot;
pot = 0;
document.getElementById("affichage_pot").innerHTML = pot;
document.getElementById("affichage_gains").innerHTML = gains;
document.getElementById("affichage_mise").innerHTML = mise;
}
}
Le code css :
*
{
margin: 0;
padding: 0;
}
p
{
font-family: Arial;
}
/*------------------divs---------------------*/
#globale
{
width: auto;
height: auto;
}
#contenu
{
position: relative;
top:25px;
margin-left:auto;
margin-right: auto;
background: url(../theme/fond.png) no-repeat;
width: 642px;
height: 426px;
}
#levier
{
float: right;
width: 96px;
background: url(../theme/levier-depart.png) no-repeat;
width:100px;
height:300px;
}
#levier2
{
float: right;
width: 96px;
}
#levier:hover
{
background: url(../theme/levier-milieu.png) no-repeat;
}
#levier:active
{
background: url(../theme/levier-jouer.png) no-repeat;
}
#jackpot
{
float:right;
top:30px;
position:relative;
right:30px;
}
#resultat
{
position: relative;
background:url(../theme/resultat.png) no-repeat;
width: 532px;
height: 61px;
margin-left:6px;
top:20px;
}
#resultat p
{
font-size: 30px;
top:15px;
}
#result-tirage
{
position: relative;
float: right;
width:auto;
top:35px;
right:40px;
}
#pot
{
position: relative;
background:url(../theme/mise.png) no-repeat;
width: 149px;
height: 199px;
float:left;
top:40px;
margin-left: 7px;
}
#pot p
{
font-size: 15px;
top:35px;
margin-top: 10px;
}
#boutons
{
position: relative;
top:50px;
float: left;
left:90px;
width: auto;
height: auto;
}
#affichage_gains
{
position: relative;
color:green;
text-align: center;
}
#affichage_pot
{
position: relative;
color:green;
text-align: center;
}
#affichage_mise
{
position: relative;
color:green;
text-align: center;
}
/*------------------------------classes--------------------*/
.vert
{
position: relative;
color:green;
text-align: center;
}
Grand maître L
Laisser un commentaire