Discussion :

[Pikkoro359]

Bonjour à tous,

Je suis débutant en JavaScript et je dois réaliser un jeu
Il s'agit du jeu des allumet
Il y a un bouton "Initialiser" (avec la fonction initialiser()), un des joueurs en choisit quel nombre au départ, il permet aussi de recommencer une partie.
Puis il y a un bouton "Enlever" (avec la fonction enlever()), chaque joueur à leur tour enlève entre 1 à 3 allu.

J'ai 2 questions:
- Tout d'abord ma fonction enlever() ne fonctionne pas comme elle devrait, je vous demande de m'aider afin de savoir d'où pourrait provenir le bug?
Chaque clic sur le bouton Enlever active donc la fonction "enlever()".
Voici le code de la fonction en question :

On commence par le code HTML dans le body (je n'ai pas tout mit) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
        <p>
            <button type="submit" onclick="enlever()">Enlever</button><input type="text" id="alluEnlevees"/>
        </p>
        <p>
            <button type="submit" onclick="initialiser()">(Re)Initialiser</button><input type="text" value="2" id="nbAllu"/>
        </p>
        <script>
            function enlever() {
                var nbAlluEnlevees = document.getElementById("alluEnlevees").value;
                var nbAllu = document.getElementById("nbAllu").value;
// Image d'une flamme qui s'affiche à l'écran au tout début du jeu et qui se remplace par l'image du nombre d'allu tapé dans le champ Initialiser
                var flammeElt = document.getElementById("flamme");
 
                if ((nbAlluEnlevees == "") || (nbAlluEnlevees > 3) || (nbAlluEnlevees < 1)) {
                    alert("Veuillez entrer un chiffre compris entre 1 et 3");
                } else if (nbAllu < nbAlluEnlevees) {
                    alert("Veuillez choisir un chiffre inférieur");
                } else {
                    for (var i=nbAlluEnlevees-1; i>=0; i--) {
// On retire le dernier enfant, à chaque itération la fonction devrait enlever 1 image d'une allu mais ce n'est pas ce qui se passe
                        flammeElt.removeChild(flammeElt.lastChild);
                    }
                    nbAllu -= nbAlluEnlevees;
                }
                    alert("Il reste : " + nbAllu);
 
                    if (nbAllu == 0) {
//  Je n'ai pas encore initialisé de variable joueur.
                        flammeElt.innerHTML = "<p>Le " + "joueur" + " a gagné</p>";
                    }
            }
        </script>

Si quelqu'un pouvait me donner quelques pistes ça serait vraiment génial.

- Ensuite, comme le titre l'indique (jeu 2 joueurs) je souhaiterai que lorsqu'un joueur clic sur le bouton "Enlever" qui active la fonction enlever(), il faudrait que cela change de joueur pour pouvoir afficher qui est le gagnant soit le joueur1 ou le joueur2.
J'ai pensé à mettre une condition "if" avec une variable "joueur" qui varie entre 0 et 1, mais je ne sais pas comment faire cela.
Je dois déterminer quand un joueur clic sur le bouton pour savoir quand changer de joueur.
Avez-vous certaines idées?

Merci beaucoup à tous, j'attends avec impatience vos réponses.

[Copiximp]

Bonjour,

Ton idée de simple variable qui varie entre 0 et 1 pour distinguer le joueur me semble bien. Tu as juste besoin de savoir quel joueur termine si je ne me trompe pas, donc pas réellement besoin de "switcher" de joueur à chaque tour.
Du coup mettre une variable dont tu changes la valeur dans ta fonction enlever() suffit.
Et à la fin tu regardes la variable pour savoir à quel joueur elle correspond et qui a gagné.

[Pikkoro359]

Merci pour ta réponse.
Je vois ce que tu veux dire mais comment je pourrais mettre ça en place dans cette fonction.
Car je ne sais pas comment je pourrais changer la valeur du joueur entre 0 et 1 et déterminer qui termine du coup.
As-tu une idée précise?

[Copiximp]

Je verrais bien un truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
if (joueur == 0) joueur = 1;
else joueur = 0;

Ou alors :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

joueur = (joueur+1)%2

[Pikkoro359]

Ha oui bonne idée Copiximp,
C'est ce que je cherche en vain et pourtant c'est si simple, je pense que ça va marcher nickel.

Par ailleurs as-tu une idée de ce qui peut causer un bug dans ma fonction "enlever()" ?
J'ai mît le code dans mon 1er post.

Encore un grand merci à toi.

[Copiximp]

De rien, juste il faudrait que tu dises ce qu'est le bug exactement parce que si je ne sais pas ou chercher ça peut être long
Ou donner le code complet peut être.

[SpaceFrog]

ou encore

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

joueur = (joueur===1)?0:1;

[Pikkoro359]

Salut Copiximp,

Merci aussi pour ta réponse SpaceFrog.

Voici le bout de code qui me pose problème, je pense que la boucle "for" n'est pas exacte mais je ne trouve pas ce qui pourrait bugué enfin si peut être mon histoire de removeChild et lastChild mais je sais pas. Je t'explique après le code, désolé pour ma réponse tardive.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
if ((nbAlluEnlevees == "") || (nbAlluEnlevees > 3) || (nbAlluEnlevees < 1)) {
                    alert("Veuillez entrer un chiffre compris entre 1 et 3");
                } else if (nbAllu < nbAlluEnlevees) {
                    alert("Veuillez choisir un chiffre inférieur");
                } else {
                    for (var i=nbAlluEnlevees-1; i>=0; i--) {
// On retire le dernier enfant, à chaque itération la fonction devrait enlever 1 image d'une allu mais ce n'est pas ce qui se passe
                        flammeElt.removeChild(flammeElt.lastChild);
                    }
                    nbAllu -= nbAlluEnlevees;
                }

En fait, quand j'appuie sur le bouton "Enlever" cela active donc la fonction "enlever()", il faut bien sûr que l'utilisateur mette avant une valeur dans le champ (il faut que cette valeur soit comprise entre 1 et 3), s'il saisie "1" dans ce champ normalement "1 image d'allumette" doit disparaître mais ce n'est pas ce qui se passe. Je t'explique.
Le problème quand je teste ce programme est que lorsque je tape dans le champ la valeur "1" en fait la fonction "enlever()" enlève une fois sur 2.
C'est à dire par exemple je démarre avec "2 images d'allumettes". Si je tape la valeur "1", il devrait enlever une allumette, or la 1ère fois ça ne marche pas il reste toujours 2 images, ensuite si je recommence alors là ça m'enlève bien une image, donc pour gagner je dois faire l'opération 4 fois alors que je ne devrais le faire que 2 fois. En plus de ça, il ne m'affiche pas qui a gagné.
Par contre chose qui est bizarre c'est que si je tape la première fois "2" dans le champ il enlève bien 2 images du 1er coup et m'affiche bien que le joueur 1 a gagné.

Merci

[Copiximp]

Salut Pikkoro359,

alors j'ai testé avec la partie du code que tu m'as fourni et tout fonctionne bien de mon côté. Le problème ne vient donc pas de ta boucle mais de ton image, plus particulièrement de ta ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

flammeElt.removeChild(flammeElt.lastChild);

Je pense que le problème vient de ton "lastChild" plus particulièrement, "lastChild" doit (1 fois sur 2) retourner un element vide. Je ne peux pas en être sur sans ton code complet mais si c'est bien ça essaye en remplaçant ton "lastChild" par un "lastElementChild".

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

flammeElt.removeChild(flammeElt.lastElementChild);

Si ça ne marche toujours pas je te propose de me donner tout ton code pour que je puisse essayer de mon côté avec le "flammeElt"

PS : n'hésites pas non plus à faire des console.log() ou alert() pour tester ce que lastChild te donne.

[Pikkoro359]

Merci Copiximp,

En effet ça fonctionne aussi de mon côté apparemment ça marche lorsque l'on tape "1" toutefois il ne m'affiche toujours pas quel joueur a gagné.
Par contre sur le programme complet ça donne toujours pas le résultat attendu, il doit y avoir autre chose mais je vois pas.
Je t'envoie en privé le code complet du programme si tu veux, par contre tu n'auras pas les images.

[Copiximp]

Merci pour le code complet c'est plus simple comme ça

Alors, voila plusieurs petits problèmes qui faisaient que ça ne marchait pas, tout d'abord pour ton problème de joueurs gagnant qui ne s'affichait pas, au début de ta fonction enlever() tu "recréais" ta variable nbAllu la réinitialisant avec le nombre entrer dans le champ pour initialiser. Supprimes donc ta ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var nbAllu = byId("nbAllu").value;

Ensuite, un autre problème qui pouvait faire bugger ton programme si tu rentrais plus de 10 allumettes au départ : tu ne caster pas tes variables en int quand tu les récupérais dans tes champs textes, du coup au moment des comparaisons comme "nbAllu < nbAlluEnlevees" le programme comparait deux chaînes de caractères et non deux entiers. Pour régler ça dans ta fonction initialiser :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
nbAllu = byId("nbAllu").value; // Remplaces cette ligne là qui récupère une chaîne de caractère dans nbAllu
nbAllu = parseInt(byId("nbAllu").value); // Par celle ci qui la cast en int

et de même dans ta fonction enlever :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var nbAlluEnlevees = byId("alluEnlevees").value; // Remplaces cette mauvaise ligne
var nbAlluEnlevees = parseInt(byId("alluEnlevees").value); // Par celle ci

Voila je crois que c'est tout, je te laisse essayer de ton côté, si il te reste des bugs n'hésites pas sinon mets la discussion en résolu

[Pikkoro359]

Merci Copiximp pour ta réponse et ton aide.
C'est vrai que j'avais pensé à parseInt et cette histoire de conversion de type mais au final je l'avais enlevé en me disant que ça servait à rien, je me suis trompé en effet.
Je vais tester ça tout à l'heure je te tiens au courant, en tout cas tu es un as.

[Pikkoro359]

Salut Copiximp,

Je réponds un peu tard mais j'étais occupé sur un autre dossier.
Merci encore pour ta réponse.
Il semblerait que ça fonctionne en tout cas ça a bien résolu le bug d'un coup sur 2 mais il réside toujours deux mini bugs.

I) En fait il semblerait que ce soit toujours le joueur 1 qui gagne la partie, c'est à dire que j'ai le joueur 1 et le joueur 0 en fait. Du coup je n'ai jamais eu la valeur "0" dans la variable "playeur" du coup mon "if" doit avoir un problème ?

Lors de l'affichage suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
if (nbAllu == 0) {
                        flammeElt.innerHTML = "<p>Le joueur " + playeur + " a gagné</p>";

Il m'affiche toujours : "Le joueur 1 a gagné", et jamais l'autre joueur.
En fait voici la règle que je dois appliquer "A chaque tour, un joueur enlève 1, 2 ou 3 allumette(s). Celui qui prend la dernière perd."


II) 2ème bug peut-être lié, si j'écris:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

flammeElt.innerHTML = "<p>Le joueur " + playeur+1 + " a gagné</p>";

C'est à dire que je rajoute "1" à la variable "playeur", au lieu de m'afficher "Le joueur 2 a gagné", il m'affiche "Le joueur 11 a gagné".
Il n'additionne pas les 2 entiers c'est peut être dû au innerHTML qui ne fait pas de calcul je ne sais pas.


III) Une toute dernière chose, on nous demande aussi cela "Les plus motivés peuvent essayer de faire jouer le joueur 2 automatiquement au hasard. Pour obtenir un nombre tirer au hasard entre 1 et 3 utiliser (Math.random()*3)+1", mais ce n'est pas obligatoire.
J'ai aucune idée de où mettre ce code et de comment l'écrire.

Merci à toi.

[Copiximp]

Salut,

alors voila pour tes problèmes la solution est toute simple, tout d'abord, le fait que ton joueur soit toujours 1 et pas 0 est dû au fait que tu recréé ta variable playeur à chaque début de fonction enlever() (comme pour nbAllu avant ). Du coup il te suffit d'enlever cette ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var playeur = 0;

de ta fonction enlever() et de la mettre avec les autres déclarations de variables

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var nbAllu;
var flammeElt = byId("flamme"); // Balise image de la Flamme
var enleverElt = byId("enlever");
var playeur = 0;

Et tu peux également ajouter "playeur = 0;" au début de ta fonction initialiser().

Pour ce qui est du deuxième bug, cela vient du fait que le programme croit que tu veux concaténer playeur et 1 pour éviter ça mets les entre paranthèses comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

flammeElt.innerHTML = "<p>Le joueur " + (playeur+1) + " a gagné</p>";

Enfin, pour ta dernière partie je regarderai ça dans la journée et te répondrai ce soir

---

EDIT

Finalement j'ai la réponse à ton dernier problème :
Tout d'abord, ajoutes deux variables à ton code (deux flags) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var nbAllu;
var flammeElt = byId("flamme"); // Balise image de la Flamme
var enleverElt = byId("enlever");
var playeur = 0;
var flagIA = false;
var flagFirst = true;

flagIA va te servir à savoir si une IA joue dans la partie (ce serait bête de ne plus pouvoir jouer à 2 ). Le flagFirst lui va te servir à distinguer le tour de l'IA de celui du joueur.

Tu vas donc devoir ajouter une checkbox pour demander à l'utilisateur si il veut jouer avec une IA :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<br/><input type="checkbox" id="cbox1" value="IA">Jouer avec une IA

Et vérifier si cette dernière est cochée au moment d'initialiser la partie :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
if (document.getElementById('cbox1').checked) flagIA = true;
else flagIA = false;

Ensuite au moment de cliquer sur ton bouton enlever tu vas d'abord passer par une autre fonction, ce qui donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
boutonEnlever.setAttribute("onClick", "tmp()"); // Dans ta fonction initialiser()
 
function tmp(){
      flagFirst = true;
      enlever();
}

La fonction tmp() permet de dire que c'est le joueur qui joue et non pas l'IA.

Finalement il ne te reste plus qu'à modifier deux petites parties de ton code, tout d'abord remplacer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var nbAlluEnlevees = parseInt(byId("alluEnlevees").value);

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
if (flagIA && !flagFirst){
           var nbAlluEnlevees = Math.round((Math.random()*2)+1);
           while (nbAlluEnlevees > nbAllu) nbAlluEnlevees = Math.round((Math.random()*2)+1);
           alert("l'IA retire "+nbAlluEnlevees+" allumettes");
}
else var nbAlluEnlevees = parseInt(byId("alluEnlevees").value);

Le if regarde si c'est le tour de l'IA et choisi un nombre à sa place (le Math.random que tu m'as donné est pour générer un nombre aléatoire entre 1 et 4 donc changes le bien )

Et enfin, il faut ajouter ces lignes à la fin de ta fonction enlever() pour donner la main à l'IA à la fin du tour du joueur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
if (flagIA && flagFirst){
         flagFirst = false;
         enlever();
}

Voila j'espère que mes explications ont été assez claires, sinon n'hésites pas à redemander

[Pikkoro359]

Salut Copiximp,

J'ai corrigé le code sous tes conseils et ça marche parfaitement.
Juste une chose que je voulais régler, quand je tape un "a" ou n'importe quoi qui n'est pas un chiffre dans le champ pour enlever les allumettes ça plante un peu du coup je voulais juste rajouter dans le "if" de la fonction "enlever()" un truc comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (nbAlluEnlevees == NaN)

mais en fait ça ne marche pas comment je peux spécifier que si c'est un NaN ça doit m'afficher d'entrer un chiffre dans une alerte? Peut être je peux faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (isNaN(nbAlluEnlevees)) {

Sinon pour le code contre l'IA c'est parfait, ça marche très bien.
Par contre si l'IA gagne il faudrait que je change la phrase finale qui dit : Le joueur 1 a gagné.

Merci encore, t'es vraiment trop fort.

[Copiximp]

Pour ce problème vu qu'il ny a que trois possibilités je te suggérais de faire un if comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if (nbAlluEnlevees != 1 || nbAlluEnlevees != 2 || nbAlluEnlevees != 3){
    // Ton code
}

C'est simple au moins

[Pikkoro359]

Ha oui c'est aussi bien, pas mal.
Merci beaucoup en tout cas, tu m'as bien aidé, t'es le meilleur.
Je vais mettre résolu

[Pikkoro359]

Je reviens vers toi Copiximp désolé.

Quand je mets ça comme code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (nbAlluEnlevees !=1 || nbAlluEnlevees != 2 || nbAlluEnlevees != 3) {

Je pensais que ça ne créerait pas de bugs mais en fait ça me refuse tout. C'est à dire que si je tape un "a" ça me demande de "taper un chiffre en 1 et 3" donc jusque là tout va bien, mais si je tape "1", "2" ou "3" ça me dit aussi dans une alerte que je dois "taper un chiffre compris entre 1 et 3" or c'est bien ce que j'ai tapé.
Bizarre non ?

[Copiximp]

Au temps pour moi Pikkoro, en effet je me suis trompé si tu veux que ça marche essaye plutot ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if (nbAlluEnlevees != 1 && nbAlluEnlevees != 2 && nbAlluEnlevees != 3){
    // Ton code
}

[Pikkoro359]

Salut Copiximp,

Merci pour ta dernière solution ça marche d'enfer, bon il reste encore un truc que j'ai pas réussi à implémenter ça ne marche qu'à moitié mais bon tant pis.
Je te remercie vraiment pour ton aide tu m'as grandement aidé.
Désolé de te répondre que maintenant, je n'avais pas vu ta réponse.

Bonne nuit