Pierre Feuille Ciseaux JS

Version imprimable

Bonjour,
Je n'arrive pas à créer mes choix à partir de boutons, comment dois-je m'y prendre ?

J'ai déjà une fonction regroupant tout le jeux pour y jouer en écrivant dans un prompt (js):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
var equal = "égalité";
var win = "you win";
var lose = "ia win";
var user_point=0;
var ia_point=0;
 
function PFC(i, j) {
  while (user_point < 2 && ia_point < 2) {
 var i = prompt("pierre, feuille, ciseaux");
  var j = Math.random()*90;
 
if (i === "pierre") {
} else if (i === "feuille") {
} else if (i === "ciseaux") {
} else {
  alert("entrez pierre, feuille, ciseaux")
}
 
  if (j <=30) {
    j="pierre";
  } else if (j <=60 && j >30) {
    j="feuille";
  } else if (j <=90 && j >60) {
    j="ciseaux";
  }
  console.log("vous: "+i+", l'ordinateur: "+j);
 
 
  if (i===j) {
    console.log(equal);
  } else if (i=="ciseaux" && j=="pierre"){
    console.log(lose);
    ia_point++;
  } else if (i=="ciseaux" && j=="feuille"){
    console.log(win);
    user_point++;
  } else if (i=="pierre" && j=="ciseaux"){
    console.log(win);
    user_point++;
  } else if (i=="pierre" && j=="feuille"){
    console.log(lose);
    ia_point++;
  } else if (i=="feuille" && j=="ciseaux"){
    console.log(lose);
    ia_point++;
  } else if (i=="feuille" && j=="pierre"){
    console.log(win);
    user_point++;
  }
  console.log(user_point+" - "+ia_point);
  document.getElementsByTagName("p")[0].innerHTML=user_point+" - "+ia_point;
}
 
if (user_point==2 || ia_point==2){
  user_point=0;
  ia_point=0;
}
}

dans mon html j'ai :

Code:

1
2
3
4
<button onclick="PFC()">START</button>
  <input type="button" class="btn" value="pierre" />
  <input type="button" class="btn" value="feuille" />
  <input type="button" class="btn" value="ciseaux" />

merci!

21/08/2018, 08h26
lefou123456

Bonjour,

Pourquoi tu utilises des balises <input> ? Tu peux directement utiliser <button> directement !

Ensuite tu pourrais par exemple créer trois fonctions : jouerPierre(), jouerFeuille() et jouerCiseaux()
Il te suffirait ensuite de les ajouter en tant que listeners pour chaque bouton !
21/08/2018, 08h31
lefou123456

Au passage, c'est une mauvaise idée d'utiliser la variable j pour contenir et la valeur tirée au hasard et le coup joué par l'IA, il faut utiliser deux variables différentes et préférer des noms significatifs pour chacune d'entre elles ! :mrgreen: (parce qu'après on s'y retrouve plus)

Je te conseille en plus de voir les énumérations, ça te simplifieras la vie et ça t’empêcheras d'écrire ce gros pavé confus de conditions.

Citation:
Envoyé par Uisge Beatha
Code:

1 2 3 4 5 6 7 if (i === "pierre") { } else if (i === "feuille") { } else if (i === "ciseaux") { } else { alert("entrez pierre, feuille, ciseaux") }
Tu savais que tu peux cumuler les conditions ?
Et dans ce cas, il vaut mieux vérifier si la variable n'est aucune de ces valeurs !
Code:

1 2 3 4 if( i != "pierre" && i != "feuille" && i != "ciseaux") { alert("Entrez: pierre, feuille ou ciseaux"); }
J'ai notamment remarqué une grande répétition lors de la comparaison du choix du joueur et de l'IA pour déterminer le gagnant,
il serait là aussi bien de créer des fonctions à appeler :
Code:

1 2 3 4 5 6 7 8 9 10 function win() { console.log("Vous avez gagné"); user_point++; } function loose() { console.log("L'IA a gagné"); ia_point++; }
et je crois que j'en ai beaucoup dis déjà ;)
Bonne chance ! :mrgreen:

merci pour ton aide,

J'ai reussi à faire mes boutons se matin, je vais aussi appliquer se que tu m'a dit pour le reste petit à petit pour améliorer mon jeu.

Pour mes boutons j'ai utiliser des input comme tu m'a dit
Code:

1 2 3 <input type="image" src="img/pierre.png" onclick='PFC("pierre")' value="Pierre"></input> <input type="image" src="img/feuille.png" onclick='PFC("feuille")' value="Feuille"></input> <input type="image" src="img/ciseaux.png" onclick='PFC("ciseaux")' value="Ciseaux"></input>
dans le onclick j'appelle ma fonction en remplaçant i ( PFC(i) ) par ma valeur. j'ai aussi commencé à ajouter des images, je vais essayer de faire un jeu plus complet au final avec animations etc pendant mon temps libre.

PS: si tu es encore là, est-ce que utiliser des frameworks JS etc est une bonne chose ou vaudrait-t-il mieux tout faire soit même ? Sinon je mettrais se sujet en résolu ;)

Encore merci, bonne journée/soirée.

21/08/2018, 17h49
lefou123456

Tu as mal compris, je t'ai dis qu'il est préférable d'utiliser <button> :mouarf:
Et pour l'histoire de framerwork, si tu débutes je pense que c'est mieux de ne pas en utiliser pour mieux apprendre le langage !

Content d'avoir pus de rendre service ;)

Bonjour,

voici un script que je me suis amusé à faire : https://codepen.io/jreaux62/pen/EeaNgo

Code:

1
2
3
4
5
6
7
8
9
10
<h4>pierre - feuille - ciseaux</h4>
  <button type="button" class="btn" onclick="PFC(this.value);" value="0" />
    <img src="http://www.groupepromix.com/userfiles/images/granite.png" alt="pierre" /></button>
  <button type="button" class="btn" onclick="PFC(this.value);" value="1" />
    <img src="https://thumbs.dreamstime.com/b/feuille-de-papier-chiffonn%C3%A9e-6457832.jpg" alt="feuille" /></button>
  </button>
  <button type="button" class="btn" onclick="PFC(this.value);" value="2" />
    <img src="https://www.humanosphere.info/wp-content/uploads/2015/04/120522_5w6rb_objet_ciseaux_sn635.jpg" alt="ciseaux" /></button>
  </button>
<div id="result"></div>

(il faudra utiliser tes propres images)

Code:

1
2
button { padding:0; cursor:pointer; }
button img { display:block; width:120px; height:100px; }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
var equal = "égalité";
var win = "gagné";
var lose = "perdu";
var txt_equal = "égalité";
var txt_win = "Vous gagnez !";
var txt_lose = "Vous avez perdu.";
var user_point = 0;
var ia_point = 0;
var bet = ["pierre", "feuille", "ciseaux"];
var result = document.getElementById("result");
result.innerHTML = '';
var txt_result = '';
 
function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}
function PFC(player_bet) {
  var i = Number(player_bet);
  var j = getRandomInt(3); // 0, 1 or 2
 
  if (user_point < 3 && ia_point < 3) { // il faut 3 victoires
    result.innerHTML += "(vous) <b>" + bet[i] + "</b> - (IA) <b>" + bet[j] + "</b> : ";
 
    if (i === j) {
      result.innerHTML += equal + "<br />";
    } else if ((i == 0 && j == 2) || (i == 1 && j == 0) || (i == 2 && j == 1)) {
      result.innerHTML += win + "<br />";
      user_point++;
    } else {
      result.innerHTML += lose + "<br />";
      ia_point++;
    }
    result.innerHTML += "Score : " + user_point + " - " + ia_point + "<br />";
  }
 
  if ( (user_point >= 3 || ia_point >= 3) && txt_result == '' ) { // on a 3 victoires
    if( user_point==ia_point ){
      txt_result = txt_equal;
    } else if( user_point>ia_point ){
      txt_result = txt_win;
    } else {
      txt_result = txt_lose;
    }
    result.innerHTML += "<h4>Résultat final : <b>"+txt_result+"</b></h4>";
    result.innerHTML += "<button type=\"button\" onclick=\"PFC_reset();\">Rejouer ?</button><br />";
  }
}
function PFC_reset(){
  txt_result = '';
  result.innerHTML = '';
  user_point = 0;
  ia_point = 0;
}

N.B. Ça peut certainement s'optimiser... ;)

22/08/2018, 08h03
Uisge Beatha

lefou123456 ah oui pardon, non en fait j'avais changé en bouton, j'ai ensuite remit en input pour pouvoir mettre un type image (qui ne fonctionnait pas en bouton), et je viens de voir sur le code de jreaux62 qu'on peut mettre une image sur un bouton avec une façon différente ^^ .

jreaux62 Merci beaucoup ! Je vais m'inspirer de ton code pour optimiser le miens, en commençant par utiliser un tableau comme tu as fait, se qui me parait plus adéquat, et plus simple après pour la suite si je rajoute différents choix. Me reste encore à bien comprendre ton code, (je ne compte pas faire de copier/coller).

Encore merci, bonne journée à vous deux.
22/08/2018, 10h12
lefou123456

De rien et bonne journée !

Bonjour,

je viens de m'amuser à faire une version "objet" : https://codepen.io/jreaux62/pen/xaberO
(en fait : j'apprends aussi...)

Code:

1
2
3
4
5
6
7
8
9
10
11
<h4>pierre - feuille - ciseaux</h4>
  <button type="button" class="PFC_btn" value="0" />
    <img src="http://www.groupepromix.com/userfiles/images/granite.png" alt="pierre" /></button>
  <button type="button" class="PFC_btn" value="1" />
    <img src="https://thumbs.dreamstime.com/b/feuille-de-papier-chiffonn%C3%A9e-6457832.jpg" alt="feuille" /></button>
  </button>
  <button type="button" class="PFC_btn" value="2" />
    <img src="https://www.humanosphere.info/wp-content/uploads/2015/04/120522_5w6rb_objet_ciseaux_sn635.jpg" alt="ciseaux" /></button>
  </button>
<p>Jouez :</p>
<div id="PFC_show_result"></div>

(le code HTML a aussi été modifié)

Code:

1
2
3
4
5
button.PFC_btn { padding:0; cursor:pointer; }
button.PFC_btn img { display:block; width:120px; height:100px; }
button.PFC_btn_replay { padding:10px; cursor:pointer; }
#PFC_show_result b { color:green; }
#PFC_show_result h4 { font-weight:normal; }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
// -----------------
// JEU : pierre, feuille, ciseaux
// -----------------
// Définition de l objet PFC
var PFC = {
	init:function(){
		this.equal = "égalité";
		this.win = "gagné";
		this.lose = "perdu";
		this.txt_equal = "égalité";
		this.txt_win = "Vous gagnez !";
		this.txt_lose = "Vous avez perdu.";
 
		this.my_point = 0;
		this.ia_point = 0;
		this.count = 0;
		this.bet = ['pierre', 'feuille', 'ciseaux'];
 
		this.show_result = document.getElementById('PFC_show_result');
		this.show_result.innerHTML = '';
		this.txt_result = '';
	},
	play:function( player_bet ){
		var i = Number(player_bet);
		var j = Math.floor(Math.random() * 3); // 0, 1 or 2
 
		if (this.my_point < 3 && this.ia_point < 3)  // il faut 3 victoires
		{
			this.show_result.innerHTML += this.score(i,j);
      this.count++;
		}
 
		if ( (this.my_point >= 3 || this.ia_point >= 3) && this.txt_result == '' )  // on a 3 victoires
		{
			this.show_result.innerHTML += this.result(this.my_point,this.ia_point);
		}
	},
	score:function(i,j) {
		var txtHTML = '';
		txtHTML += "(vous) <b>" + this.bet[i] + "</b> - (IA) <b>" + this.bet[j] + "</b> : ";
 
		if (i === j) {
			txtHTML += this.equal + "<br />";
		} else if ((i == 0 && j == 2) || (i == 1 && j == 0) || (i == 2 && j == 1)) {
			txtHTML += "<b>" + this.win + "</b><br />";
			this.my_point++;
		} else {
			txtHTML += this.lose + "<br />";
			this.ia_point++;
		}
		txtHTML += "Score : " + this.my_point + " - " + this.ia_point + "<br />";
		return txtHTML;
	},
	result:function(my_point,ia_point) {
		var txtHTML = '';
		if( this.my_point==this.ia_point ){
			this.txt_result = this.txt_equal;
		} else if( this.my_point>this.ia_point ){
			this.txt_result = this.txt_win;
		} else {
			this.txt_result = this.txt_lose;
		}
		txtHTML += "<h4>Résultat final (en "+this.count+" coups) : <b>"+this.txt_result+"</b></h4>";
		txtHTML += "<button type=\"button\" class=\"PFC_btn_replay\">Rejouer ?</button><br />";
		return txtHTML;
	},
	reset:function() {
		this.txt_result = '';
		this.show_result.innerHTML = '';
		this.my_point = 0;
		this.ia_point = 0;
		this.count = 0;
	}
}
// -----------------
// lancement du jeu : on crée et initialise un objet PFC
var PFC1 = Object.create(PFC);
document.body.onload = function(){
	PFC1.init();
	// au clic sur un des 3 boutons : on joue 
	var PFC_btns = document.querySelectorAll('.PFC_btn');
	PFC_btns.forEach(function(PFC_btn) {
		PFC_btn.addEventListener('click', function() {
			PFC1.play(PFC_btn.value);
		}, false);
	});
};
// -----------------
// bouton "rejouer" : le bouton n'existe pas dans le DOM au départ.
// on doit le relier à un élément existant
document.body.addEventListener( 'click', function ( event ) {
	if( event.target.className == 'PFC_btn_replay' ) {
		PFC1.reset();
	};
});
// -----------------

(j'ai ajouté aussi le "nombre de coups" joués)

24/08/2018, 14h20
lefou123456

C'est pas conseillé d'utiliser les nouveaux mots clés : class, constructor... pour faire de l'orienté objet ? (Moi je trouve ça plus propre en tous cas :mrgreen:)
24/08/2018, 14h30
Invité

Je me suis mal exprimé.
Le script utilise juste un "objet" JS.
(je n'y connais rien en "orienté objet" !)