Sujet Précédent Sujet Suivant

Pierre Feuille Ciseaux

Résolu/Fermé
Bababobibu Messages postés 4 Date d'inscription mardi 26 janvier 2016 Statut Membre Dernière intervention 29 janvier 2016 - 26 janv. 2016 à 04:24
Bababobibu Messages postés 4 Date d'inscription mardi 26 janvier 2016 Statut Membre Dernière intervention 29 janvier 2016 - 29 janv. 2016 à 03:03
Bonjour,

Je débute en programmation et j'ai entrepris de construire un petit jeu de «Pierre Feuille Ciseaux». J'ai beau me creuser la tête et fouiner un peu partout sur internet, je n'arrive pas à comprendre où est mon erreur dans le code suivant, et pourquoi, quoi qu'il advienne, il est toujours inscrit: «Vous avez gagné la partie».

Voici le code (Html/JavaScript)

HTML: 


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RochePapierCiseaux</title>
<script src="JS.js"></script>
<link rel="stylesheet" type="text/css" href="CSS.css" />
</head>

<body>
<center><h1>Roche Papier Ciseau</h1></center><br/>
<center>
Roche <input type="radio" id="roche" name='roche'/>Papier <input type="radio" id="papier" name='papier'/>Ciseau <input type="radio" id="ciseau" name='ciseau'/><br/>

<input type="text" id="message" /><br/>
<input type="button" id="bouton" value="Bataille"onclick="validation()"/><br/>
</center>

</body>
</html>


JavaScript 





function validation(){
	var message=document.getElementById("message");
	var roche=document.getElementById("roche");
	var papier=document.getElementById("papier");
	var ciseau=document.getElementById("ciseau");
	var chiffre= Math.floor(Math.random()*100+1);
	
	if (chiffre <= 34) {
chiffre = "roche";
} else if(chiffre <= 67) {
chiffre = "papier";
} else {
chiffre = "ciseau";
}
if(roche.checked||papier.checked||ciseau.checked){
		
		
if(roche==chiffre){
	message.value="Égalité";
	}
	else if(roche<chiffre){
		message.value="Tu as gagné";
	} else {

		message.value="Tu as perdu";
	}
	
	
	
	if(papier==chiffre){
		message.value="Égalité";
	}
	else if(papier<chiffre){
		message.value="Tu as gagné";
	} else {
	
		message.value="Tu as perdu";
	}
	
	if(ciseau==chiffre){
	message.value="Égalité";
	}
	else if(ciseau<chiffre){
		message.value="Tu as gagné";
	} else {
	
		message.value="Tu as perdu";
	}
}
}



Merci infiniment

2 réponses

Réponse 1 / 2
Bababobibu Messages postés 4 Date d'inscription mardi 26 janvier 2016 Statut Membre Dernière intervention 29 janvier 2016 1
27 janv. 2016 à 03:33
Bonjour,

Merci beaucoup pour ta réponse et tes conseils, ça fonctionne à merveille ! J'ai continué à essayer de nouveaux trucs çà et là et j'aurais une autre petite question, toujours concernant le code du «Pierre Feuille Ciseaux».

J'ai entrepris de créer une jauge de vie (div) qui diminue de 100px à chaque fois que le joueur perd. Je crois comprendre le principe, mais je ne vois pas où est mon erreur dans le code.

Voici le nouveau code:

HTML 


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RochePapierCiseau</title>
<script src="JS.js"></script>
<link rel="stylesheet" type="text/css" href="CSS.css" />
</head>

<body>
<h1 id="rochetitre">Roche</h1><h1 id="papiertitre">Papier</h1><h1 id="ciseautitre">Ciseaux</h1><br/>
<h2>
Roche <input type="radio" id="roche" name='rpc'/>Papier <input type="radio" id="papier" name='rpc'/>Ciseau <input type="radio" id="ciseau" name='rpc'/><br/>
</h2>

<input type="text" id="message" /><br/>
<input type="button" id="bouton" value="Bataille"onclick="validation()"/><br/>
<input type="text" id="choixJoueur" /><br/>
<input type="text" id="choixOrdinateur" /><br/>
<div id="div1"></div>



</body>
</html>




JavaScript 



function validation(){
	var message=document.getElementById("message");
	var choixJoueur=document.getElementById("choixJoueur")
	var choixOrdinateur=document.getElementById("choixOrdinateur")
	var roche=document.getElementById("roche");
	var papier=document.getElementById("papier");
	var ciseau=document.getElementById("ciseau");
	var div1=document.getElementById("div1");
	var chiffre= Math.floor(Math.random()*100+1);
	var perd = new Audio("perd.mp3");
        var gagne = new Audio("gagne.mp3");
	var egal = new Audio("egal.mp3");
	
	
	if (chiffre <= 34) {
chiffre = "roche";
} else if(chiffre <= 67) {
chiffre = "papier";
} else {
chiffre = "ciseau";
}


if(roche.checked || papier.checked || ciseau.checked){
	
	if (chiffre == 'roche') {
		if (roche.checked) { 
			message.value="Égalité";
			egal.play();
			 message.style.color='green';
			 choixJoueur.value="Vous avez choisi Roche";
			 choixOrdinateur.value="Ordinateur a choisi Roche";
		} else if (papier.checked) { 
			message.value="Tu as gagné";
			gagne.play();
			 message.style.color='blue';
			  choixJoueur.value="Vous avez choisi Papier";
			 choixOrdinateur.value="Ordinateur a choisi Roche";
		  
		} else if (ciseau.checked) { 
			message.value="Tu as perdu";
		    perd.play();
				message.style.color='red';
				div1.style.width = div1 =- "100 px";
				 choixJoueur.value="Vous avez choisi Ciseaux";
			      choixOrdinateur.value="Ordinateur a choisi Roche";
				    div1.style.width = div1 =- "100px"; //C'est ça qui me cause problème
			

	
		}
	}
	

	if (chiffre == 'papier') {
		if (papier.checked) {
			message.value="Égalité";
			egal.play();
			 message.style.color='green';
			 choixJoueur.value="Vous avez choisi Papier";
			 choixOrdinateur.value="Ordinateur a choisi Papier";
		} else if (ciseau.checked) {
			message.value="Tu as gagné";
			gagne.play();
			 message.style.color='blue';
			 choixJoueur.value="Vous avez choisi Ciseaux";
			 choixOrdinateur.value="Ordinateur a choisi Papier";
			
		} else if (roche.checked) {
			message.value="Tu as perdu";
			perd.play();
		    message.style.color='red';
			div1.style.width = div1 =- "100px";
			choixJoueur.value="Vous avez choisi Roche";
			 choixOrdinateur.value="Ordinateur a choisi Papier";
		      div1.style.width = div1 =- "100px"; //C'est ça qui me cause problème
			
		}
	}
	
	if (chiffre == 'ciseau') {
		if (ciseau.checked) {
			message.value="Égalité";
			egal.play();
			 message.style.color='green';
			 choixJoueur.value="Vous avez choisi Ciseaux";
			 choixOrdinateur.value="Ordinateur a choisi Ciseaux";
		} else if (roche.checked) {
			message.value="Tu as gagné";
			gagne.play();
			 message.style.color='blue';
			 choixJoueur.value="Vous avez choisi Roche";
			 choixOrdinateur.value="Ordinateur a choisi Ciseaux";
		
		} else if (papier.checked) {
			message.value="Tu as perdu";
			perd.play();
			message.style.color='red';
			choixJoueur.value="Vous avez choisi Papier";
			 choixOrdinateur.value="Ordinateur a choisi Ciseaux";
			div1.style.width = div1 =- "100px"; //C'est ça qui me cause problème
		
			
		}
	}
	
}}


CSS 



@charset "utf-8";
/* CSS Document */
h1{
	font-family:Impact;
	
}

h2{
	 font-style: italic;
	 
}

#message{
	text-align:center;
	font-style:oblique;
	}
	
	#choixJoueur{
	text-align:center;
	
	}
	
	#choixOrdinateur{
	text-align:center;
	
	}
	
	
	#rochetitre{
		color:red;
		
		
	}
	
	#papiertitre{
		color:blue;
		
		
		
	}
	
	
	#ciseautitre{
		
		color:green;
		
	
		}
	
	#div1{
      width:600px;
	  height:25px;
	  border:1px solid #11111;
      background-color:red;
	  margin: auto;
	 
		
	}

body{
	background-image: url(fondecrangagne.jpg);
	text-align: center;
	
}



Encore une fois merci beaucoup :)
1
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
27 janv. 2016 à 09:24
Essaye de modifier la largeur de div1 comme ceci : 
div1.style.width = div1.offsetWidth - 100;
0
Bababobibu Messages postés 4 Date d'inscription mardi 26 janvier 2016 Statut Membre Dernière intervention 29 janvier 2016 1
29 janv. 2016 à 03:03
J'ai sans doute fait une erreur ailleurs, parce que ça fonctionne pas :P

J'ai tout de même trouvé une solution avec: 

 hp1 = hp1 - 100;
				   div1.style.width = hp1 + "px";
				   if (hp1 <= 0){
					   
					   hp1 = 600;
					    div1.style.width = hp1 + "px";
						alert("Il ne te reste plus de vie :O");


Merci pour tout et bonne journée !

Pour ceux que ça pourrait intéresser éventuellement, voici le code:
Html 
<body>
<h1 id="rochetitre">Roche</h1><h1 id="papiertitre">Papier</h1><h1 id="ciseautitre">Ciseau</h1><br/>
<h2>
Roche <input type="radio" id="roche" name='rpc'/>Papier <input type="radio" id="papier" name='rpc'/>Ciseau <input type="radio" id="ciseau" name='rpc'/><br/>
</h2>
<!-- Boutons radio servant à permettre le choix de «Roche» «Papier» ou «Ciseau» -->

<input type="text" id="message" /><br/>
<!-- Dans cette boîte de texte sera indiqué qui a gagné ou perdu -->

<input type="button" id="bouton" value="Bataille"onclick="validation()"/><br/><!-- Bouton pour lancer l'affrontement -->

<input type="text" id="choixJoueur" size="40" /><br/><!-- Dans cette boîte de texte sera indiqué le choix de joueur -->

<input type="text" id="choixOrdinateur" size="40" /><br/>
<!-- Dans cette boîte de texte sera indiqué le choix de l'ordinateur -->

<div id="div1"></div><!-- Barre de vie -->

</body>
</html>



JavaScript

hp1 = 600;
/*Variable globale donnant une valeur à la barre de vie*/

function validation(){
	var message=document.getElementById("message");/*Variable  correspondant à la zone de texte annonçant le résultat de la partie*/
	
	var choixJoueur=document.getElementById("choixJoueur");/*Variable correspondant au choix du joueur*/
	
	var choixOrdinateur=document.getElementById("choixOrdinateur");/*Variable correspondant au choix de l'ordinateur*/
	
	var roche=document.getElementById("roche");/*Variable correspondant à l'id "roche"*/
	
	var papier=document.getElementById("papier");/*Variable correspondant à l'id "papier"*/
	
	var ciseau=document.getElementById("ciseau");/*Variable correspondant à l'id "ciseau"*/
	
	var div1=document.getElementById("div1");/*Variable correspondant à la barre de vie*/
	
	var chiffre= Math.floor(Math.random()*100+1);/*Variable correspondant au chiffre généré au hasard par l'ordinateur*/
	
	var perd = new Audio("perd.mp3");/*Variable correspondant au bruit lorsque le joueur perd*/
    
	var gagne = new Audio("gagne.mp3");/*Variable correspondant au bruit lorsque le joueur gagne*/
	
	var egal = new Audio("egal.mp3");/*Variable correspondant au bruit lorsque c'est égal*/
	
	
	if (chiffre <= 34) {
chiffre = "roche";
} else if(chiffre <= 67) {
chiffre = "papier";
} else {
chiffre = "ciseau";
}
/*Conditions pour associer un nombre à «roche» «papier» ou «ciseau»*/


if(roche.checked || papier.checked || ciseau.checked){
	
	if (chiffre == 'roche') {
		if (roche.checked) { 
			message.value="Égalité";
			egal.play();
			 message.style.color='green';
			 choixJoueur.value="Vous avez choisi Roche";
			 choixOrdinateur.value="Ordinateur a choisi Roche";
			 /*Série d'actions si les deux opposants choisissent «roche»*/
		
		} else if (papier.checked) { 
			message.value="Tu as gagné";
			gagne.play();
			 message.style.color='blue';
			  choixJoueur.value="Vous avez choisi Papier";
			 choixOrdinateur.value="Ordinateur a choisi Roche";
		  /*Série d'actions si le joueur choisi «papier» et l'ordinateur «roche»*/
		
		} else if (ciseau.checked) { 
			message.value="Tu as perdu";
		    perd.play();
				message.style.color='red';
				 choixJoueur.value="Vous avez choisi Ciseau";
			      choixOrdinateur.value="Ordinateur a choisi Roche";
				  /*Série d'actions si le joueur choisi «ciseau» et l'ordinateur «roche»*/
				  
				  hp1 = hp1 - 100;
				   div1.style.width = hp1 + "px";
				   if (hp1 <= 0){
					   
					   hp1 = 600;
					    div1.style.width = hp1 + "px";
						alert("Il ne te reste plus de vie :O");
						
					  }
					  /*Série d'actions concernant la barre de vie*/

			
  
	
		}
	}
	

	if (chiffre == 'papier') {
		if (papier.checked) {
			message.value="Égalité";
			egal.play();
			 message.style.color='green';
			 choixJoueur.value="Vous avez choisi Papier";
			 choixOrdinateur.value="Ordinateur a choisi Papier";
			 /*Série d'actions si les deux opposants choisissent «papier»*/
			 
		} else if (ciseau.checked) {
			message.value="Tu as gagné";
			gagne.play();
			 message.style.color='blue';
			 choixJoueur.value="Vous avez choisi Ciseau";
			 choixOrdinateur.value="Ordinateur a choisi Papier";
			 /*Série d'actions si le joueur choisi «ciseau» et l'ordinateur «papier»*/
			
		} else if (roche.checked) {
			message.value="Tu as perdu";
			perd.play();
		    message.style.color='red';
			choixJoueur.value="Vous avez choisi Roche";
			 choixOrdinateur.value="Ordinateur a choisi Papier";
			 /*Série d'actions si le joueur choisi «roche» et l'ordinateur «papier»*/
			 
		       hp1 = hp1 - 100;
				   div1.style.width = hp1 + "px";
				   if (hp1 <= 0){
					    hp1 = 600;
					    div1.style.width = hp1 + "px";
						alert("Il ne te reste plus de vie :O");
						
					  }
					  /*Série d'actions concernant la barre de vie*/

			
		}
	}
	
	if (chiffre == 'ciseau') {
		if (ciseau.checked) {
			message.value="Égalité";
			egal.play();
			 message.style.color='green';
			 choixJoueur.value="Vous avez choisi Ciseau";
			 choixOrdinateur.value="Ordinateur a choisi Ciseau";
			 /*Série d'actions si les deux opposants choisissent «ciseau»*/
			 
		} else if (roche.checked) {
			message.value="Tu as gagné";
			gagne.play();
			 message.style.color='blue';
			 choixJoueur.value="Vous avez choisi Roche";
			 choixOrdinateur.value="Ordinateur a choisi Ciseau";
		 /*Série d'actions si le joueur choisi «roche» et l'ordinateur «ciseau»*/
		} else if (papier.checked) {
			message.value="Tu as perdu";
			perd.play();
			message.style.color='red';
			choixJoueur.value="Vous avez choisi Papier";
			 choixOrdinateur.value="Ordinateur a choisi Ciseau";
			 /*Série d'actions si le joueur choisi «papier» et l'ordinateur «ciseau»*/
			 
			 hp1 = hp1 - 100;
				   div1.style.width = hp1 + "px";
				   if (hp1 <= 0){
					    hp1 = 600;
					    div1.style.width = hp1 + "px";
						alert("Il ne te reste plus de vie :O");
						
					  }
					  /*Série d'actions concernant la barre de vie*/

			
		}
	}
	 
					  
	

	 }}



CSS

@charset "utf-8";
/* Document CSS */

h1{
	font-family:Impact;
}
/*Police des titres en h1 */
h2{
	 font-style: italic;
	 }
/*Police des tites en h2*/
#message{
	text-align:center;
	font-style:oblique;
	}
	/*Caractéristiques de l'annonce lorsque que le joueur perd ou gagne */
	
	#choixJoueur{
	text-align:center;
	size:auto;
	}
	/*Caractéristiques de l'annonce du choix du joueur*/
	
	#choixOrdinateur{
	text-align:center;
	size:auto;
	}
	/*Caractéristiques de l'annonce du choix de l'ordinateur */
	
	#rochetitre{
		color:red;
		}
		/*Couleurs des différents titres */
	
	#papiertitre{
		color:blue;
		}
	    /*Couleurs des différents titres */
	
	#ciseautitre{
		color:green;
		}
		/*Couleurs des différents titres */
	
	#div1{
      width:600px;
	  height:25px;
	  border:1px solid #11111;
      background-color:red;
	  margin: auto;
	 }
	 /*Barre de vie */

body{
	background-image: url(background.jpg);
	text-align: center;
	}
	/*Fond d'écran */

    




    
 
    
        
    0

                    
        
    
    

            



    

        
        
    



    

    
            

        

            

        
        

            
        



    
Discussions similaires

                                                    

                
                    Afficher le score (points) sur un mini-jeu
                    

                        
    
    

                
            

    


                        

                                                                                    Jean20B -  

                            
                                                                                    Jean20B - 
                        

                    

                    

                    

                        6 réponses
                    

                
            

                                                        

                
                    Afficher une image en JavaScript
                    

                        
    
    

                
            

    


                        

                                                                                    spritueur -  

                            
                                                                                    spritueur - 
                        

                    

                    

                    

                        4 réponses
                    

                
            

                                                        

                
                    Changer la couleur d'un texte ?
                    

                        
    
    

            

    


                        

                                                                                    Mozartini -  

                            
                                                                                    jordane45 - 
                        

                    

                    

                    

                        3 réponses
                    

                
            

                                                        

                
                    utiliser une variable JS dans du code php
                    

                        
    
    

            

    


                        

                                                                                    zaks91 -  

                            
                                                                                    zaks91 - 
                        

                    

                    

                    

                        7 réponses
                    

                
            

                                                        

                
                    retour à la ligne dans javascript ?
                    

                        
    
    

            

    


                        

                                                                                    unknown -  

                            
                                                                                    unknown - 
                        

                    

                    

                    

                        2 réponses
                    

                
            

                                                        

                
                    Impossible de se connecter sur 1fichier.com
                    

                        
    
    

                
            

    


                        

                                                                                    lamouche2208 -  

                            
                                                                                    roc - 
                        

                    

                    

                    

                        22 réponses