Discussion :

[clickandgo]

Bonjour à tous,

Je n'arrive pas à récupérer la valeur de la variable "joueurActif" dans les fonctions présentes alors qu'elle est déclarée en haut et initialisée et renvoyée dans la fonction "initialiser()", de quoi cela vient il ? (j'ai un undefined signalé ligne 94 dans la fonction "remplirScoreCourant" ...)

Merci d'avance pour votre éclairage

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
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
115
116
import Joueur from './classes/Joueur.js'
 
const barreInfo = document.getElementById('barreInfo')
const cube = document.getElementById('cube')
const btnRoll = document.getElementById('btn-roll')
const btnNewGame = document.getElementById('btn-new-game')
const joueur1 = document.getElementById('joueur1')
const joueur2 = document.getElementById('joueur2')
const divScoreCourantJ1 = document.querySelector('#score-courant-joueur1 h4')
const divScoreTotalJ1 = document.querySelector('#score-total-joueur1 h4')
const divScoreCourantJ2 = document.querySelector('#score-courant-joueur2 h4')
const divScoreTotalJ2 = document.querySelector('#score-total-joueur2 h4')
var joueurActif
 
const currentJ1 = []
const currentJ2 = []
 
const angleArray = [
    [0, 0, 0],
    [-310, -362, -38],
    [-400, -320, -2],
    [135, -217, -88],
    [-224, -317, 5],
    [-47, -219, -81],
    [-133, -360, -53]
];
 
const tirage = () => {
    const randomAngle = Math.floor(Math.random() * 6) + 1
    /*ANIMATION */
    cube.style.animation = 'animate 1.4s linear';
    //console.log(randomAngle);
    cube.style.transform = 'rotateX(' + angleArray[randomAngle][0] + 'deg) rotateY(' + angleArray[randomAngle][1] + 'deg) rotateZ(' + angleArray[randomAngle][2] + 'deg)';
    cube.style.transition = '1s linear'
 
    cube.addEventListener('animationend', function (e) {
        cube.style.animation = '';
    })
 
    const resultatTirage = (randomAngle) => {
 
        switch (randomAngle) {
            case 1:
                return "Vous avez tiré le chiffre un !"
            case 2:
                return "Vous avez tiré le chiffre deux !"
            case 3:
                return "Vous avez tiré le chiffre trois !"
            case 4:
                return "Vous avez tiré le chiffre quatre !"
            case 5:
                return "Vous avez tiré le chiffre cinq !"
            case 6:
                return "Vous avez tiré le chiffre six !"
            default:
                return "Veuillez tirer le dè"
        }
    }
 
    return randomAngle
}
//Lancement du dé
btnRoll.addEventListener('click', () => {
    tirage()
    remplirScoreCourant(joueurActif)
})
 
//Nouvelle partie
btnNewGame.addEventListener('click', () => {
 
    initialiser(joueurActif)
    //Mise à zéro des champs et tableaux
    currentJ1.length = 0
    currentJ2.length = 0
 
    divScoreCourantJ1.textContent = 0
    divScoreTotalJ1.textContent = 0
    divScoreCourantJ2.textContent = 0
    divScoreTotalJ2.textContent = 0
 
})
 
const initialiser = (joueurActif) => {
    //Interroge la fonction contenue dans la classe Joueur
    //pour obtenir un premier joueur de façon aléatoire
    const j = new Joueur()
    joueurActif = j.premierJoueur
 
    console.log("joueur actif : " + joueurActif)
    return joueurActif
}
 
//Remplir tableau de score courant du joueur actif
const remplirScoreCourant = (joueurActif) => {
 
    console.log("Joueur actif depuis tirage du dé " + joueurActif)
    if (joueurActif == undefined) {
        alert("joueurActif est undefined")}
 
    //     currentJ1.push(tirage())
    //     //Calcul total joueur 1
    //     const scoreCourantJ1 = currentJ1.reduce((a, b) => a + b)
    //     divScoreTotalJ1.innerHTML = scoreCourantJ1
    //     divScoreCourantJ1.innerHTML = scoreCourantJ1
    //     console.log(currentJ1)
    //     console.log(scoreCourantJ1)
    // } else {
    //     //Calcul total joueur 2
    //     currentJ2.push(tirage())
    //     const scoreCourantJ2 = currentJ2.reduce((a, b) => a + b)
    //     divScoreTotalJ2.innerHTML = scoreCourantJ2
    //     divScoreCourantJ2.innerHTML = scoreCourantJ2
    //     console.log(currentJ2)
    //     console.log(scoreCourantJ2)
    // }
}

Classe Joueur.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
export default class Joueur {
 
    currentJ1 = []
    currentJ2 = []
 
    constructor(numJoueur, tblScoreCourant, tblScoreGlobal) {
        this.numJoueur = numJoueur
        this.tblScoreCourant = tblScoreCourant
        this.tblScoreGlobal = tblScoreGlobal
    }
 
    get scoreCourant() {
        return this.scoreCourant
    }
    get scoreGlobal() {
        return this.scoreGlobal
    }
    set numJoueur(numJoueur) {
        this._numJoueur = numJoueur
    }
    get numJoueur() {
        return this._numJoueur
    }
    set scoreCourant(scoreCourant) {
        this.scoreCourant = scoreCourant
    }
    set scoreGlobal(scoreGlobal) {
        this.scoreGlobal = scoreGlobal
    }
    set tblScoreCourant(tblScoreCourant) {
        this._tblScoreCourant = tblScoreCourant
 
    }
    get tblScoreCourant() {
        return this._tblScoreCourant
    }
 
    set tblScoreGlobal(tblScoreGlobal) {
        this._tblScoreGlobal = tblScoreGlobal
    }
 
    get tblScoreGlobal() {
        return this._tblScoreGlobal
    }
 
    //Détermine qui est le premier joueur par aléatoire
    get premierJoueur() {        
        this.numJoueur = Math.floor(Math.random() * 2 + 1)    
        barreInfo.innerHTML = `<h4>Le joueur ${this.numJoueur} commence la partie</h4>`       
        return this.numJoueur        
    }
}

[Archimède]

Ta fonction remplirScoreCourant est déclarée après

Code :

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

1
2
3
4
5
 
btnRoll.addEventListener('click', () => {
    tirage()
    remplirScoreCourant(joueurActif)
})

Le souci vient sans doute de là...

[clickandgo]

Bonjour et merci pour votre réponse mais ça ne change rien, de plus, je crois me rappeler que le script est lu deux fois et dans les deux sens non ?

[Archimède]

Re,
joueurActif est défini dans ta fonction initialiser() et elle n'est pas appelée dans tirage() donc à l'issue du passage dans remplirScoreCourant(joueurActif), il y a forcément un plantage puisque tu ne l'as pas défini ni même mis à zéro au départ par défaut.(var joueurActif)...

[clickandgo]

Bon, c'est solutionné :

Il fallait retirer joueurActif en tant que paramètre de la fonction initialiser (x2), maintenant tout fonctionne...

La dite fonction renvoyait bien la variable mais elle était apparemment interceptée ou réinitialisée au mauvais moment, va falloir que j'investigue le pourquoi car pour l'instant j'ai pas encore compris !

Si pour vous ça vous semble logique, n'hésitez pas à commenter (je suis débutant...)

Merci pour votre aide en tous cas !

[NoSmoking]

Bonjour,

Si pour vous ça vous semble logique, n'hésitez pas à commenter (je suis débutant...)

je te conseille de lire : Les fonctions sur MDN

...et si tu veux aller plus loin :Fonctions et portée des fonctions.

Cela va peut-être te paraitre abscons mais c'est de l’incontournable (surtout le 1st lien).
Tu y trouvera les explications à tes interrogations et notamment l'intérêt d'utiliser le retour d'une fonction pour initialiser une variable par exemple.

Un autre lien facile à lire : Fondamentaux JavaScript -> les Fonctions

PS : il doit en exister des milliers mais pour commencer cela devrait suffire