Pierre Feuille Ciseaux

Résolu

Javascript

Bababobibu Messages postés 4 Date d'inscription Statut Membre Dernière intervention -
Bababobibu Messages postés 4 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

A voir également:

Pierre feuille ciseaux python
Télécharger outil capture d'écran ciseaux - Télécharger - Capture d'écran
Feuille de score belote excel - Forum Excel
Citizen code python avis - Accueil - Outils
Pierre eclat pokemon platine ✓ - Forum Jeux vidéo
Symbole ciseaux word - Forum Word

2 réponses

Réponse 1 / 2

Bababobibu Messages postés 4 Date d'inscription Statut Membre Dernière intervention 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 :)

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

Essaye de modifier la largeur de div1 comme ceci :

div1.style.width = div1.offsetWidth - 100;

Bababobibu Messages postés 4 Date d'inscription Statut Membre Dernière intervention 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 */

Réponse 2 / 2

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

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

Discussions similaires

Afficher le score (points) sur un mini-jeu

Afficher une image en JavaScript

Changer la couleur d'un texte ?

utiliser une variable JS dans du code php

retour à la ligne dans javascript ?

Impossible de se connecter sur 1fichier.com

Votre réponse

Discussions similaires