[Résolu] Un jeu de jackpot en javascript - Je bloque sur la boucle while par kami441 - page 1

Bonjour à tous.
Je dois réaliser un jackpot en javascript dans le cadre des cours et je bloque un tantinet.
J'ai réussi à tirer mes combinaisons d'images (stockées dans un array) et à signifier au joueur s'il avait perdu ou gagné (et si oui combien). Mon problème maintenant c'est de répéter le processus tant que le joueur possède des gains. Je pensais faire une boucle while. Mais ça ne marche pas (ni firebug, ni la console d'erreur de FF ne me signalent quelque chose). En gros il faudrait qu'a chaque mise, un tirage aléatoire ait lieu et que les gains ou les pertes du joueur s'ajoutent à la somme qu'il avait au début de chaque tour. A chaque tour le joueur peut décider de partir avec ses gains ou de retenter sa chance. Une fois que ses gains sont à zéro il ne peut plus jouer.
Voici les codes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    
   <head>
       <title>Le CNAM Casino</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Mon design" href="design.css" />
	   <script type="text/javascript" src="casino.js"> 
	   </script>
   </head>
   <body>
	
    <div id="container">
		<div id="header">
		</div>
    <h1> Bienvenue au jackpot du CNAM Casino </h1>
    <h2> Venez jouer et tenter de gagner le gros lot (jusqu'à 20 fois votre mise)</h2>
    <p id="contenu"> Dans sa grande générosité le CNAM Casino vous offre 100 euros pour vous aider
    à rafler le jackpot. Vous pouvez décider de miser cette somme entièrement ou une partie
    seulement. Bien entendu, chaque mise sera retranchée de la somme que vous possédez.
    Vous pouvez miser jusqu'à épuisement de votre compte. <br/>
    Si vous voyez apparaître trois symboles euro vous gagnez trois fois votre mise;
    trois couronnes, quinze fois la mise; trois étoiles, dix fois la mise; trois cerises,
    cinq fois la mise; deux symboles euro couplées à un autre symbole (couronne, étoile ou cerise),
    vous emportez deux fois la mise. Tout autre symbole ne vous fera rien gagner.
    A l'issue de chaque tour, vous pouvez choisir de partir avec la somme gagnée
    ou de retenter votre chance. </p>
		<form id="jeu">
		<p class="mise"> <label for="mise"> <strong>Misez la somme souhaitée</strong></label> :  <input id="text" type="text" name="mise" value=""/> euros. </p>
		<p> <input type="submit" name="submit" value="Jouer" onClick="recupValeurMise()"/></p>
		</form>
		<div id="footer">
			<p> Ce site est hébergé par OVH. Responsable légal : groupe Partouche, 5 rue de Rennes, Paris VI<sup>e</sup>.</p> 
		</div>
	

    </div>
	
	 
	
	
   </body>
</html>

HTML

Et le JS (je pense que le CSS n'est pas utile mais si vous le voulez pas de soucis)

// Etape 1 : initialisation de la majeure partie des variables utilisées pour le script
	var sommeDepart=100; 
	var miseDepart=0; 
	
 
	// On stocke les chemins des images dans un tableau
			var tableauSlots=new Array('image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png', 'image6.png', 
		'image7.png', 'image8.png', 'image9.png', 'image10.png', 'image11.png', 'image12.png','image13.png', 
		'image14.png', 'image15.png', 'image16.png', 'image17.png', 'image18.png', 'image19.png', 'image20.png',
		'image21.png', 'image22.png', 'image23.png', 'image24.png', 'image25.png', 'image26.png', 'image27.png',
		'image28.png', 'image29.png', 'image30.png', 'image31.png', 'image32.png', 'image33.png', 'image34.png',
		'image35.png', 'image36.png', 'image37.png', 'image38.png', 'image39.png', 'image40.png', 'image41.png',
		'image42.png', 'image43.png', 'image44.png', 'image45.png', 'image46.png', 'image47.png', 'image48.png',
		'image49.png', 'image50.png', 'image51.png', 'image52.png', 'image53.png', 'image54.png', 'image55.png',
		'image56.png', 'image57.png', 'image58.png', 'image59.png', 'image60.png', 'image61.png', 'image62.png',
		'image63.png', 'image64.png'); 
 


	
	
	//----------------------------------------------------------------------------------Début du code proprement dit -------------------------------------------------------
	
	
// On récupère le contenu de l'input du formulaire et on teste sa valeur (chercher pour le type)
	
			
function recupValeurMise() {
		
					
          var miseDepart=document.getElementById('text').value;
		if(miseDepart<=100) { 

			// Tirage aléatoire des images et stockage du chemin de l'image 
			var tirageAleatoire=Math.round(Math.random()*tableauSlots.length) -1; 
			var i= tirageAleatoire;  // indice
			var resultat= './slots/'+tableauSlots[i]+''; // chemin complet de l'image  
			document.getElementById('contenu').innerHTML='<img src='+resultat+' class="slot"/>'; // insertion de l'image dans le DOM 
								
				if (resultat=='./slots/image1.png') {
					var sommeArrivee = miseDepart*20 + (sommeDepart-miseDepart); 
					alert('Votre gain est de '+sommeArrivee+' euros'); 
				}	
							
							
				else if (resultat=='./slots/image49.png') {
					var sommeArrivee=miseDepart*15 + (sommeDepart-miseDepart); 
					alert('Votre gain est de '+sommeArrivee+' euros'); 
				}
							
				else if (resultat=='./slots/image33.png') {
					var sommeArrivee=miseDepart*10 + (sommeDepart-miseDepart); 
					alert('Votre gain est de '+sommeArrivee+' euros'); 
				}
								
				else if (resultat=='./slots/image14.png') {
					var sommeArrivee=miseDepart*5 + (sommeDepart-miseDepart); 
					alert('Votre gain est de '+sommeArrivee+' euros'); 
				}
								
				else if (resultat=='./slots/image2.png'|| resultat=='./slots/image3.png' 
				|| resultat=='./slots/image4.png' || resultat=='./slots/image29.png' || resultat=='./slots/image30.png' || resultat=='./slots/image31.png'|| resultat=='./slots/image21.png' || resultat=='./slots/image40.png' || resultat=='./slots/image56.png') {
					var sommeArrivee=miseDepart*2 + (sommeDepart-miseDepart); 
					alert('Votre gain est de '+sommeArrivee+' euros'); 
				}
							
				else {
					 var sommeArrivee=sommeDepart - miseDepart; 
					alert ('Perdu pour cette fois : vous ne disposez plus que de '+sommeArrivee+' euros'); 
				}
							
			     document.getElementById('jeu').innerHTML='<p> <strong> Vous disposez désormais de '+sommeArrivee+' euros. Vous pouvez partir avec cette somme ou décider de <a href="index.html">rejouer</a></strong>'; 
								
								
		}		
		else {
		 alert("Le nombre entré est trop élevé ou ce n'est pas un nombre. Veuillez ressaisir un chiffre inférieur ou égal à 100"); 
		}
				
				
			
			
}

Merci d'avance pour votre aide. Je fais du javascript depuis peu, donc ce n'est pas évident.
A bientôt
Kami.

kami441

6 janvier 2011 à 15:27:04

NoseborN

8 janvier 2011 à 20:45:36

Bonjour,

Bon, j'ai un peu tester ta page et j'aurais quelques remarque même si elle ne sont pas toutes utiles.

Premièrement, je trouve qu'il serait plus simple pour toi et le joueur que tu te concentre sur le jeu que sur les a-coté ! Ce que je veux dire c'est imagine que tu joue à la roulette, et essai de mettre ces actions en script
Le principe du javascript est de faire des actions coté client, donc éviter les rechargement de page.

Deuxio, utilise plus les <input type="button" onclick=""/> que les lien et les formulaires. Pour ton utilisation c'est plus logique et ca t'aidera

Je pense qu'avec ces quelques conseils ça devrais mieux aller.
(En tout cas, un while est a proscrire ici ...)

Bonne chance

NoseborN

ps : une derniere chose, n'oublie pas que l'indice d'un tableau commence à 0.

12 janvier 2011 à 17:15:50

Bonjour.
Merci cela m'a aidé un peu à avancer.
Kami

Un jeu de jackpot en javascript

Je bloque sur la boucle while

Un jeu de jackpot en javascript

Supprimer

Modérer

Signaler le message aux modérateurs