Mutation de variable impossible entre deux fonctions ?

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Clickandgo
Messages : 2
Enregistré le : 04 janv. 2023, 15:07

Mutation de variable impossible entre deux fonctions ?

Message par Clickandgo » 04 janv. 2023, 15:26

Bonjour à tous,

Dans le code ci-dessous concernant un petit jeu de dés, si lors d'un tirage le joueur tombe sur un "1" alors il doit céder son tour, j'ai donc tenté de réattribuer la valeur "joueurActif" (calculscores.js...remplirScoreCourant()) et s'en suit un return de ladite variable pour l'exploiter/actualiser dans les autres fonctions... Or la variable ne change pas comme elle le devrait dans la fonction "btnRoll" mais si dans la fonction "remplirScoreCourant"... Ce qui fait que le numéro de joueur actif n'est pas actualisé interdisant la permutation de tour de joueur...
En dehors de ce problème le code fonctionne parfaitement...
Merci d'avance pour vos lumières :)

Main.js :

Code : Tout sélectionner

import Joueur from "./classes/Joueur.js";
import {tirage} from "./functions/tirages.js"
import {
  angleArray,btnHold,btnNewGame,btnRoll,checkHistorique,divHistorique,divScoreCourantJ1,divScoreCourantJ2,divScoreTotalJ1,divScoreTotalJ2} from "./constants.js";
import { calculScoresTotaux, afficherHistorique,currentJ1,currentJ2,historique,remplirScoreCourant} from "./functions/calculScores.js";

export var joueurActif;

//Initialisation des variables des 2 joueurs
export const j1 = new Joueur(1, 0, 0);
export const j2 = new Joueur(2, 0, 0);

//Au démarrage de la page
window.onload = () => {
  barreInfo.innerHTML = `<h4>Appuyer sur le bouton "nouvelle partie" pour commencer</h4>`;
  btnHold.classList.add("disabled");
  btnRoll.classList.add("disabled");
  checkHistorique.checked = false;
};

//Détermine qui est le premier joueur par aléatoire
function premierJoueur() {
  joueurActif = Math.floor(Math.random() * 2) + 1;  
  barreInfo.innerHTML = `<h4>Le joueur ${joueurActif} commence la partie</h4>`;
  return joueurActif;
}
const initialiser = () => {
  //Obtenir un premier joueur de façon aléatoire
  premierJoueur();
  //Mise à zéro des champs et tableaux
  currentJ1.length = 0;
  currentJ2.length = 0;
  historique.length = 0;

  divScoreCourantJ1.textContent = 0;
  divScoreTotalJ1.textContent = 0;
  divScoreCourantJ2.textContent = 0;
  divScoreTotalJ2.textContent = 0;
};

btnNewGame.addEventListener("click", () => {
  //Nouvelle partie
  initialiser();
  btnRoll.classList.remove("disabled");
  console.log("Joueur actif depuis btnNewGame = " + joueurActif);
});

//Lancement du dé
btnRoll.addEventListener("click", () => {
  btnHold.classList.remove("disabled");
  tirage();
  remplirScoreCourant(joueurActif);
  //Si l'option est sélectionnée l'historique de
  // la partie est affiché
  if (checkHistorique.checked === true) {
    divHistorique.style.display = "block";
    afficherHistorique();
  } else {
    divHistorique.style.display = "none";
  }
  console.log("Joueur actif depuis bouton btnRoll = " + joueurActif);
});
calcuScores.js:

Code : Tout sélectionner

import { resultatTirage } from "../functions/tirages.js";

import {
  divScoreCourantJ1,
  divScoreCourantJ2,
  divScoreTotalJ1,
  divScoreTotalJ2,
  btnHold,
  btnRoll,
  divHistorique,
} from "../constants.js";

import { j1, j2,joueurActif } from "../main.js";

//historique de la partie
export const historique = [];
export const currentJ1 = [];
export const currentJ2 = [];
var scoreCourantJ1 = 0;
var scoreCourantJ2 = 0;
var scoreTotalJ1 = 0;
var scoreTotalJ2 = 0;

export const calculScoresTotaux = (joueurActif) => {
  //     const calculJ1 = scoreCourantJ1 + scoreTotalJ1
  //     const calculJ2 = scoreCourantJ2 + scoreTotalJ2
  //     //Calcul score total du joueur 1 tant qu'inférieur à 100
  //     if (joueurActif == 1 && calculJ1 < 100) {
  //         scoreTotalJ1 += scoreCourantJ1
  //         divScoreTotalJ1.textContent = scoreTotalJ1
  //         divScoreCourantJ1.textContent = 0
  //         currentJ1.length = 0
  //         joueurActif = 2
  //         return joueurActif
  //     }
  //     //Si joueur 1 obtient 100 points il gagne
  //     if (joueurActif == 1 && calculJ1 == 100) {
  //         alert("Le joueur 1 a gagné la partie")
  //         btnHold.disabled = true
  //         btnRoll.disabled = true
  //     }
  //     //Calcul score total du joueur 2 tant qu'inférieur à 100
  //     if (joueurActif == 2 && calculJ2 < 100) {
  //         scoreTotalJ2 += scoreCourantJ2
  //         divScoreTotalJ2.textContent = scoreTotalJ2
  //         divScoreCourantJ2.textContent = 0
  //         currentJ2.length = 0
  //         joueurActif = 1
  //         return joueurActif
  //     }
  //     if (joueurActif == 2 && calculJ2 == 100) {
  //         alert("Le joueur 2 a gagné la partie")
  //         btnHold.disabled = true
  //         btnRoll.disabled = true
  //     }
};

export const remplirScoreCourant = (joueurActif) => {
  //Si l'un des joueurs tire un "1" alors il perd son score courant
  if (joueurActif === 1 && resultatTirage === 1) {
    j1.setScoreCourant(0);
    //vidage tableau de score courant
    currentJ1.length = 0;
    divScoreCourantJ1.textContent = 0;
    barreInfo.innerHTML = `Le joueur 1 cède son tour avec un total provisoire de ${scoreTotalJ1} points, doit obtenir ${
      100 - scoreTotalJ1
    } pour gagner.`;
        joueurActif = 2
        console.log("Joueur actif depuis remplirScoreCourant : "+joueurActif)
        return joueurActif
  }

  if (joueurActif === 2 && resultatTirage === 1) {
    j2.setScoreCourant(0);   
    //vidage tableau de score courant
    currentJ2.length = 0;
    divScoreCourantJ2.textContent = 0;
    barreInfo.innerHTML = `Le joueur 2 cède son tour avec un total provisoire de ${scoreTotalJ2} points, doit obtenir ${
      100 - scoreTotalJ2} pour gagner.`;
      joueurActif = 1;
      console.log("Joueur actif depuis remplirScoreCourant : " + joueurActif);
    return joueurActif;
  }

  if (joueurActif === 1 && resultatTirage > 1) {
    currentJ1.push(resultatTirage);
    scoreCourantJ1 = currentJ1.reduce((a, b) => a + b, 0);
    divScoreCourantJ1.textContent = scoreCourantJ1;
    j1.setScoreCourant (scoreCourantJ1);
    barreInfo.innerHTML = `Le joueur 1 a tiré un ${resultatTirage}.`;

    console.log("score courant J1 = " + j1.getScoreCourant());
  }
  if (joueurActif === 2 && resultatTirage > 1) {
    currentJ2.push(resultatTirage);
    scoreCourantJ2 = currentJ2.reduce((a, b) => a + b, 0);
    j2.setScoreCourant(scoreCourantJ2)
    divScoreCourantJ2.textContent = scoreCourantJ2;
    barreInfo.innerHTML = `Le joueur 2 a tiré un ${resultatTirage}.`;
    console.log("score courant J2 = " + j2.getScoreCourant());
  }
};

export const afficherHistorique = () => {
  //On inverse le tableau d'historique
  const rows = historique.reverse().map((row) => {
    return `<p>${row}</p>`;
  });
  divHistorique.innerHTML = rows.join("");
};
Modifié en dernier par Clickandgo le 05 janv. 2023, 11:35, modifié 1 fois.

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Mutation de variable impossible entre deux fonctions ?

Message par webmaster » 05 janv. 2023, 09:31

Bonjour

Le code source est long et sans possibilité de tester en live c'est pas évident.

Mais je ne comprends pas cette partie dans

Code : Tout sélectionner

btnRoll.addEventListener("click", () => {
  remplirScoreCourant(joueurActif);
La fonction remplirScoreCourant retourne une valeur mais elle n'est pas exploitée. Le retour ne sert donc a rien.
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Clickandgo
Messages : 2
Enregistré le : 04 janv. 2023, 15:07

Re: Mutation de variable impossible entre deux fonctions ?

Message par Clickandgo » 05 janv. 2023, 11:16

Bonjour et merci d'avoir répondu

"btnRoll.addEventListener" fait appel à "tirage()" puis "remplirScoreCourant" qui alimente un tableau (currentJ1 ou currentJ2) de tirages consécutifs que réalise le joueur actif, ce tableau est remis à zéro si le joueur tire un "1" ou bien additionné au score global si le joueur le décide en utilisant le bouton "hold" (fonctionnalité désactivée pour l'instant mais qui marche parfaitement...).

Je renseigne le joueur actif dans remplirScoreCourant car sinon je n'ai aucune réaction ni résultat de tirage attribué...

Pour résumer :
La fonction remplirScoreCourant() contenue dans calculScores.js est sensée retourner le nouveau joueur actif si le tirage donne un "1" et mettre à jour la variable globale "joueurActif" cependant, cette mise à jour ne se fait pas et lorsque le prochain joueur désigné appuie sur le btnRoll (main.js) grâce au console.log je peux voir que joueurActif n'a malheureusement pas changé de valeur ou bien l'on m'indique que joueurActif est read-only ...

J'ai tout essayé, notamment de laisser remplirScoreCourant sans paramètre, plus rien ne se passe...
Je ne sais donc pas ce que je fais de mal, tout marchait bien jusqu'à ce que je décide de fractionner le code sur plusieurs pages...
La mutation se fait bien dans 'remplirScoreCourant' contenue dans calculScores.js mais pas lorsque lon l'appelle depuis btnRoll...

J'ai l'impression que cela à voir avec l'exportation de la variable qui ne se fait pas dans les deux sens...

Code fonctionnel à la date :
main.js :

Code : Tout sélectionner

import Joueur from "./classes/Joueur.js";
import {tirage} from "./functions/tirages.js"
import {
  angleArray,
  btnHold,
  btnNewGame,
  btnRoll,
  checkHistorique,
  divHistorique,
  divScoreCourantJ1,
  divScoreCourantJ2,
  divScoreTotalJ1,
  divScoreTotalJ2,
} from "./constants.js";
import {
  calculScoresTotaux,
  afficherHistorique,
  currentJ1,
  currentJ2,
  historique,
  remplirScoreCourant,
} from "./functions/calculScores.js";


export var joueurActif;

//Initialisation des variables des 2 joueurs
export const j1 = new Joueur(1, 0, 0);
export const j2 = new Joueur(2, 0, 0);

//Au démarrage de la page
window.onload = () => {
  barreInfo.innerHTML = `<h4>Appuyer sur le bouton "nouvelle partie" pour commencer</h4>`;
  btnHold.classList.add("disabled");
  btnRoll.classList.add("disabled");
  checkHistorique.checked = false;
};

//Détermine qui est le premier joueur par aléatoire
function premierJoueur() {
  joueurActif = Math.floor(Math.random() * 2) + 1;  
  barreInfo.innerHTML = `<h4>Le joueur ${joueurActif} commence la partie</h4>`;
  return joueurActif;
}
const initialiser = () => {
  //Obtenir un premier joueur de façon aléatoire
  premierJoueur();
  //Mise à zéro des champs et tableaux
  currentJ1.length = 0;
  currentJ2.length = 0;
  historique.length = 0;

  divScoreCourantJ1.textContent = 0;
  divScoreTotalJ1.textContent = 0;
  divScoreCourantJ2.textContent = 0;
  divScoreTotalJ2.textContent = 0;
};

btnNewGame.addEventListener("click", () => {
  //Nouvelle partie
  initialiser();
  btnRoll.classList.remove("disabled");
  console.log("Joueur actif depuis btnNewGame = " + joueurActif);
});

//Lancement du dé
btnRoll.addEventListener("click", () => {
  btnHold.classList.remove("disabled");
  tirage();
  remplirScoreCourant(joueurActif);
  //Si l'option est sélectionnée l'historique de
  // la partie est affiché
  if (checkHistorique.checked === true) {
    divHistorique.style.display = "block";
    afficherHistorique();
  } else {
    divHistorique.style.display = "none";
  }
  console.log("Joueur actif depuis bouton btnRoll = " + joueurActif);
});
calculScores.js:

Code : Tout sélectionner

import { resultatTirage } from "../functions/tirages.js";

import {
  divScoreCourantJ1,
  divScoreCourantJ2,
  divScoreTotalJ1,
  divScoreTotalJ2,
  btnHold,
  btnRoll,
  divHistorique,
} from "../constants.js";

import { j1, j2,joueurActif } from "../main.js";

//historique de la partie
export const historique = [];
export const currentJ1 = [];
export const currentJ2 = [];
var scoreCourantJ1 = 0;
var scoreCourantJ2 = 0;
var scoreTotalJ1 = 0;
var scoreTotalJ2 = 0;

export const remplirScoreCourant = (joueurActif) => {
  //Si l'un des joueurs tire un "1" alors il perd son score courant
  if (joueurActif === 1 && resultatTirage === 1) {
    j1.setScoreCourant(0);
    //vidage tableau de score courant
    currentJ1.length = 0;
    divScoreCourantJ1.textContent = 0;
    barreInfo.innerHTML = `Le joueur 1 cède son tour avec un total provisoire de ${scoreTotalJ1} points, doit obtenir ${
      100 - scoreTotalJ1
    } pour gagner.`;
        joueurActif = 2
        console.log("Joueur actif depuis remplirScoreCourant : "+joueurActif)
        return joueurActif
  }

  if (joueurActif === 2 && resultatTirage === 1) {
    j2.setScoreCourant(0);   
    //vidage tableau de score courant
    currentJ2.length = 0;
    divScoreCourantJ2.textContent = 0;
    barreInfo.innerHTML = `Le joueur 2 cède son tour avec un total provisoire de ${scoreTotalJ2} points, doit obtenir ${
      100 - scoreTotalJ2} pour gagner.`;
      joueurActif = 1;
      console.log("Joueur actif depuis remplirScoreCourant : " + joueurActif);
    return joueurActif;
  }

  if (joueurActif === 1 && resultatTirage > 1) {
    currentJ1.push(resultatTirage);
    scoreCourantJ1 = currentJ1.reduce((a, b) => a + b, 0);
    divScoreCourantJ1.textContent = scoreCourantJ1;
    j1.setScoreCourant (scoreCourantJ1);
    barreInfo.innerHTML = `Le joueur 1 a tiré un ${resultatTirage}.`;

    console.log("score courant J1 = " + j1.getScoreCourant());
  }
  if (joueurActif === 2 && resultatTirage > 1) {
    currentJ2.push(resultatTirage);
    scoreCourantJ2 = currentJ2.reduce((a, b) => a + b, 0);
    j2.setScoreCourant(scoreCourantJ2)
    divScoreCourantJ2.textContent = scoreCourantJ2;
    barreInfo.innerHTML = `Le joueur 2 a tiré un ${resultatTirage}.`;
    console.log("score courant J2 = " + j2.getScoreCourant());
  }
};

export const afficherHistorique = () => {
  //On inverse le tableau d'historique
  const rows = historique.reverse().map((row) => {
    return `<p>${row}</p>`;
  });
  divHistorique.innerHTML = rows.join("");
};

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Mutation de variable impossible entre deux fonctions ?

Message par webmaster » 05 janv. 2023, 11:50

Il n'y a pas d'exportation de variable en JS.
Il faut écrire
joueurActif=remplirScoreCourant(joueurActif)
pour utiliser le return

L'incompréhension vient du nommage des variables.
Il faut éviter d'appeler les variables internes (et les paramètres) d'une fonction comme les variables du corps du script

Sans tester c'est difficile d'être sûr, mais je chercherai par la.
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre