Mutation de variable impossible entre deux fonctions ? (module)

**clickandgo** · 06/01/2023, 14h55

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() Ligne 36) 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

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" (valeur 1 ou 2) 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 joueurActif qui ne se fait pas dans les deux sens... J'ai tenté de l'importer aussi dans main.js: cela bloque en disant qu'elle est déjà importée...

Code fonctionnel à la date :
main.js :

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
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
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);
  console.log("Joueur actif depuis bouton btnRoll = " + 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";
  }
});

calculScores.js :

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
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import {resultatTirage} from "./tirages.js";
 
import {
  divScoreCourantJ1,
  divScoreCourantJ2,
  divScoreTotalJ1,
  divScoreTotalJ2,
  btnHold,
  btnRoll,
  divHistorique,
} from "../constants.js";
 
import {j1, j2} 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) => {
  //console.log(joueurActif+' '+resultatTirage)
 
  //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("");
};
 
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
  //     }
};

**mathieu** · 08/01/2023, 03h58

pouvez vous nous faire une archive avec les fichiers qui nous permettraient de voir le souci et de débuguer de notre côté ?

**clickandgo** · 09/01/2023, 11h59

Merci d'avoir répondu

Voici les liens Github :

git@github.com:Clickandgo-informatique/Evaluation2.git
https://github.com/Clickandgo-inform...valuation2.git

Le problème principal étant que la variable "joueurActif" à qui l'on attribue une nouvelle valeur dans la fonction "remplirScoreCourant" suivant condition (dans calculScores.js) n'est pas réexportée/mutée alors que c'est vital puisqu'elle permet de permuter entre les tours des joueurs (lorsqu"un joueur tire un "1", rendant tel ou tel joueur actif pour le reste du code...

La variable est bien mutée dans "remplirScoreCourant" mais elle n'est pas renvoyée vers la fonction btnRoll qui sert elle à lancer le dé et attribuer un résultat provisoire au joueur actif en rapellant la fonction "remplirScoreCourant"...
Autrement dit, au lancement du dé

Tout marchait bien jusqu'à ce que je fractionne le code en tant que modules... J'ai essayé de réexporter ladite variable actualisée pour la rendre disponible dans n'importe quel autre module mais le code bloque en me disant qu'elle a déjà été exportée... Du coup je ne vois pas l'interêt des modules si cela ne peut pas aller dans les deux sens !

J'avais pensé peut être de créér une classe JoueurActif avec getter et setter pour remplacer ladite variable sans avoir à l'exporter, qu'en pensez-vous ?

**mathieu** · 09/01/2023, 18h52

il n'y a rien à l'url indiqué et il n'y a pas de dépot dans ce compte.

**clickandgo** · 09/01/2023, 19h22

Je pense que c'est parceque le dépôt est privé car moi je le vois bien

Désolé pour vous, voici le dossier complet :

Evaluation_2.rar

**mathieu** · 09/01/2023, 20h17

déjà si vous avez fait un module qui s'appelle "calculScores", je pense que ce n'est pas à cet endroit que devrait se faire le changement de joueur mais plutot dans le module principal.
donc le code de bouton de lancement des dès ferait ça :

Code javascript :

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

1
2
3
4
5
	tirage();
 
	remplirScoreCourant(joueurActif);
 
	joueurActif = 3 - joueurActif; // passage au joueur suivant

ensuite du point du vue du code dans calculScores, vous n'importez pas joueurActif. donc dans la function remplirScoreCourant, la variable joueurActif correspond à l'argument de la fonction et non à la donnée venant du module principal.

**clickandgo** · 10/01/2023, 12h55

Bonjour Mathieu,

1/ Il m'est exigé/recommandé par mes futurs correcteurs de ne pas utiliser de code ou a minima dans les eventListeners et d'utiliser de préférence le principe des modules, raison pour laquelle on en est là

2/ J'ai réussi à faire fonctionner le code et la permutation entre joueurs mais en créant une classe dédiée "JoueurActif" et là, plus aucun problème !

3/ Apparemment il n'est pas possible d'exporter une variable mutée d'un module à l'autre lorsque celle-ci est elle même importée, donc ce n'est pas bi-directionnel ... (problème de scope du module ?)

Voici le code actualisé, on doit pouvoir faire mieux car suffixer chaque fois avec "getNumJoueur()" me paraît plutôt lourd bien que cela marche à merveille...
D'ailleurs à ce propos, utilisez-vous des getters/setters du genre "getMachin()" ou "get Machin()" ? car pour la deuxième option on provoque souvent une récursion et je n'ai pas trouvé d'autre solution que préfixer les variables par un underscore (mais là aussi c'est lourd ...)

Je suis maintenant dans la phase de recherche d'allégement du code / refactorisation, j'accepte encore tous vos conseils de pro

En tous cas merci beaucoup de votre patience et aide...

Main.js :

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
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
import Joueur from "./classes/Joueur.js";
import JoueurActif from "./classes/JoueurActif.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";
 
//Initialisation des variables des 2 joueurs
export const j1 = new Joueur(1, 0, 0);
export const j2 = new Joueur(2, 0, 0);
export var joueurActif = new JoueurActif();
 
//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.setNumJoueur(Math.floor(Math.random() * 2) + 1); 
  barreInfo.innerHTML = `<h4>Le joueur ${joueurActif.getNumJoueur()} 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.getNumJoueur());
});
 
//Lancement du dé
btnRoll.addEventListener("click", () => {
  btnHold.classList.remove("disabled");
  tirage();
  remplirScoreCourant(joueurActif);
  console.log("Joueur actif depuis bouton btnRoll = " + joueurActif.getNumJoueur());
  //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";
  }
});

calculScores.js :

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
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import {resultatTirage} from "./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) => {
  console.log(joueurActif.getNumJoueur()+' '+resultatTirage)
 
  //Si l'un des joueurs tire un "1" alors il perd son score courant
  if (joueurActif.getNumJoueur() === 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.setNumJoueur(2)
        console.log("Joueur actif depuis remplirScoreCourant : "+joueurActif.getNumJoueur())
        return joueurActif
  }
 
  if (joueurActif.getNumJoueur() === 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.setNumJoueur(1);
    console.log("Joueur actif depuis remplirScoreCourant : " + joueurActif);
    return joueurActif;
  }
 
  if (joueurActif.getNumJoueur() === 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.getNumJoueur() === 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("");
};
 
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
  //     }
};

Classe JoueurActif.js :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
export default class JoueurActif {
  constructor(numJoueur) {
    this.numJoueur = numJoueur;
  }
  setNumJoueur(numJoueur) {
    this.numJoueur = numJoueur;
  }
  getNumJoueur() {
    return this.numJoueur;
  }
}

Mutation de variable impossible entre deux fonctions ? (module)

JavaScript

Discussions similaires

Partager

Partager