Pierre Feuille Ciseaux

[Résolu/Fermé]
Signaler
Messages postés
4
Date d'inscription
mardi 26 janvier 2016
Statut
Membre
Dernière intervention
29 janvier 2016
-
Messages postés
4
Date d'inscription
mardi 26 janvier 2016
Statut
Membre
Dernière intervention
29 janvier 2016
-
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

Messages postés
4
Date d'inscription
mardi 26 janvier 2016
Statut
Membre
Dernière intervention
29 janvier 2016
1
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
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
2518
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
1 septembre 2021
457
Essaye de modifier la largeur de div1 comme ceci :
div1.style.width = div1.offsetWidth - 100;
Messages postés
4
Date d'inscription
mardi 26 janvier 2016
Statut
Membre
Dernière intervention
29 janvier 2016
1
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 */
Messages postés
2518
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
1 septembre 2021
457
Salut,

Tes conditions pour vérifier qui a gagné ne sont pas correctes.

if(roche==chiffre)
Ici la variable chiffre est une chaine de caractère égal à "papier", "roche" ou "ciseau", or la variable roche à un élément html (getElementById), la comparaison ne sera donc jamais vraie.

Tes conditions devraient plus ressembler à :
if(roche.checked || papier.checked || ciseau.checked){
	// si l'ordinateur a choisi roche
	if (chiffre == 'roche') {
		if (roche.checked) { // et que l'utilisateur a choisi roche
			message.value="Égalité";
		} else if (papier.checked) { // et que l'utilisateur a choisi papier
			message.value="Tu as gagné";
		} else if (ciseau.checked) { // et que l'utilisateur a choisi ciseau
			message.value="Tu as perdu";
		}
	}
	
	// si l'ordinateur a choisi papier ...
	if (chiffre == 'papier') {
		if (papier.checked) {
			message.value="Égalité";
		} else if (ciseau.checked) {
			message.value="Tu as gagné";
		} else if (roche.checked) {
			message.value="Tu as perdu";
		}
	}
	
	if (chiffre == 'ciseau') {
		if (ciseau.checked) {
			message.value="Égalité";
		} else if (roche.checked) {
			message.value="Tu as gagné";
		} else if (papier.checked) {
			message.value="Tu as perdu";
		}
	}
}


PS : Pour éviter que l'utilisateur puisse cocher plusieurs radio, il faudrait définir le même attribut name pour toutes les radio et leurs définir un attribut value unique pour les différencier.
Et au passage la balise <center> est obsolète, il faut utiliser le css avec margin: 0 auto; ou text-align: center; sur le parent.

Bonne journée