Problème d'affichage dynamique JS

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
le_pere_benoit
Messages : 1
Enregistré le : 30 mars 2022, 21:57

Problème d'affichage dynamique JS

Message par le_pere_benoit » 30 mars 2022, 22:00

Bonjour à tous!

Voilà j'ai un exercice à faire où je dois créer un jeu de lancé de dé en JS avec un joueur 1 contre joueur 2. quand on lance le dé cela s'ajoute au score actuel sauf si on fait 1 le score retombe à zéro et on change de joueur. Il est possible de prendre le score actuel et l'ajouter au score total avec un bouton d'ajout afin de pas tout perdre quand on fait '1' puis on change de joueur. Je rencontre deux petits problèmes:

En arrivant sur la page ou en cliquant sur bouton "nouvelle partie" le lancé fonctionne mais le score actuel n'apparait pas pour le joueur avec la classe "active" au début. Quand je tombe sur '1' après quelques lancé (ou on clique sur ajouter score actuel au total) on change de joueur et là le score actuel devient dynamique... je comprends pas pourquoi il n'est pas dynamique dès le premier tour. De plus pour le joueur deux quand je veux ajouter le score actuel (donc celui tour en cours) du joueur au score total (de la partie donc) le score total du joueur 2 renvoie le paramètre NaN sur l'affichage du score... J'ignore malheureusement pourquoi..

Est-ce que l'un de vous sait pourquoi pourquoi? Je vous remercie beaucoup.

Voilà mon code:

HTML:

Code : Tout sélectionner

 <div class="table_joueur"> 

            <!-- Joueur 1 initialisation -->
            <div class="interface_joueur_1 active">
                <div class="joueur" name="joueur1" id="joueur_1">JOUEUR 1</div>
                <div class="scoreTotal" id="scoreTotal_1">22</div>
                <div class="score_hold">
                    <span class="actuel">Score actuel</span>
                    <span class="joueur_score_actuel" id="scoreActuel_1">10</span>
                </div>
                <!-- Vainqueur! -->
                <div class="vainqueur_j1" style="display: none;">Vainqueur!</div>
            </div>


            <div class="dice_zone">
                <img src="face_6.png"  alt="dé du jeu" class="faces_de" style=" margin-left: 50%;">
                <button class="btn btn-outline-danger lancer" id="lancerDe">lancer</button>
                <button class="btn btn-warning ajout_total" id="ajoutTotal">Ajout score</button>
            </div>


            <!-- Joueur 2 initialisation -->
            <div class="interface_joueur_2 ">
                <div class="joueur" name="joueur2" id="joueur_2">JOUEUR 2</div>
                <div class="scoreTotal" id="scoreTotal_2">40</div>
                <div class="score_hold">
                    <span class="actuel">Score actuel</span>
                    <span class="joueur_score_actuel" id="scoreActuel_2">15</span>
                </div>
                <!-- Vainqueur! -->
                <div class="vainqueur_j2" style="display: none;">Vainqueur!</div>
            </div>          
            <script src="script.js"></script>
        </div>
JavaScript:

Code : Tout sélectionner

/* Déclaration de toutes variable utilisées  var ou let? */
var scoreTotal;
var scoreActuel;

var tourActif;
var lanceDe;



refresh();

/*jet du dé avec l'event click (bouton jet de dé) */
document.querySelector('.lancer').addEventListener('click', function () {
    if(lanceDe){
        var face = Math.floor(Math.random() * 6)+ 1;

        var resultDe = document.querySelector('.faces_de');
        resultDe.style.display = 'block';
        resultDe.src = 'face_' + face +'.png';

        if(face !== 1){
            scoreActuel += face ;
            document.querySelector('#scoreActuel_' + tourActif).textContent = scoreActuel;
        } else {
            
            joueur_suivant();
            /* joueur suivant: fonction? variable pour alterner entre les joueurs? */
        }

    }
});

document.querySelector('.ajout_total').addEventListener('click' , function() {
    if(lanceDe){

        scoreTotal[tourActif] += scoreActuel;
        
        document.querySelector('#scoreTotal_'+ tourActif).textContent = scoreTotal[tourActif];

        if(scoreTotal[tourActif] >= 100){
            document.querySelector('#joueur_' + tourActif).textContent = 'VAINQUEUR !';
            document.querySelector('.faces_de').style.display = 'none';
            document.querySelector('.interface_joueur_' + tourActif).classList.add('vainqueur');
            document.querySelector('.interface_joueur_' + tourActif).classList.remove('active');
            
            //document.querySelector('.interface_joueur_' + tourActif).classList.add('vainqueur');
            //document.querySelector('.interface_joueur_' + tourActif).classList.remove('active');
            tourActif = false;
        }else{
            //joueur suivant
            joueur_suivant();
        }
    }

});

function joueur_suivant(){

    tourActif === 2 ? tourActif = 1: tourActif = 2;
    scoreActuel = 0;

    document.getElementById('scoreActuel_1').textContent = '0';
    document.getElementById('scoreActuel_2').textContent = '0';
    document.querySelector('.interface_joueur_1').classList.toggle('active');
    document.querySelector('.interface_joueur_2').classList.toggle('active');
    document.querySelector('.faces_de').style.display = 'none';
}

document.querySelector('.newgame').addEventListener('click', refresh);

/* fonction afin de soit initaliser la partie soit rafraichir le table des joueurs pour une nouvelle partie*/
function refresh(){

    scoreTotal = [0, 0];
    scoreActuel = 0;
    tourActif = 0;
    lanceDe = true;


    document.querySelector('.faces_de').style.display = 'none';
    document.getElementById('scoreTotal_1').textContent = '0';
    document.getElementById('scoreTotal_2').textContent = '0';
    document.getElementById('scoreActuel_1').textContent = '0';
    document.getElementById('scoreActuel_2').textContent = '0';
    document.getElementById('joueur_1').textContent = 'JOUEUR 1';
    document.getElementById('joueur_2').textContent = 'JOUEUR 2';
    document.querySelector('.interface_joueur_1').classList.remove('vainqueur');
    document.querySelector('.interface_joueur_2').classList.remove('vainqueur');
    document.querySelector('.interface_joueur_1').classList.remove('active');
    document.querySelector('.interface_joueur_2').classList.remove('active');

    document.querySelector('.interface_joueur_1').classList.add('active');

}

karlcrespo
Messages : 2
Enregistré le : 13 juil. 2023, 06:14

Re: Problème d'affichage dynamique JS

Message par karlcrespo » 13 juil. 2023, 06:23

Bonjour,
Il y a quelques erreurs dans votre code qui empêchent le score actuel de s'afficher correctement pour le joueur actif. Voici quelques modifications à apporter pour résoudre ces problèmes :

Initialisez la variable scoreActuel avec une valeur de 0 dans la fonction refresh() :
ini

Code : Tout sélectionner

function refresh() {
  scoreTotal = [0, 0];
  scoreActuel = 0; // Ajouter cette ligne
  tourActif = 1;
  lanceDe = true;
  // ...
}
Dans la fonction joueur_suivant(), changez la ligne tourActif === 2 ? tourActif = 1: tourActif = 2; en tourActif = tourActif === 2 ? 1 : 2; pour alterner correctement entre les deux joueurs.
Dans la fonction joueur_suivant(), changez la ligne document.getElementById('scoreActuel_1').textContent = '0'; en document.getElementById('scoreActuel_' + tourActif).textContent = '0'; pour réinitialiser le score actuel du joueur actif.
Dans la fonction ajout_total(), changez la ligne scoreTotal[tourActif] += scoreActuel; en scoreTotal[tourActif - 1] += scoreActuel; pour accéder correctement à l'élément du tableau scoreTotal correspondant au joueur actif.
bloxd io
Dans la fonction ajout_total(), changez la ligne document.querySelector('#scoreTotal_'+ tourActif).textContent = scoreTotal[tourActif]; en document.querySelector('#scoreTotal_'+ tourActif).textContent = scoreTotal[tourActif - 1]; pour afficher correctement le score total du joueur actif.
Voici le code modifié :

Code : Tout sélectionner

scheme
var scoreTotal;
var scoreActuel;

var tourActif;
var lanceDe;

refresh();

document.querySelector('.lancer').addEventListener('click', function () {
  if (lanceDe) {
    var face = Math.floor(Math.random() * 6) + 1;

    var resultDe = document.querySelector('.faces_de');
    resultDe.style.display = 'block';
    resultDe.src = 'face_' + face + '.png';

    if (face !== 1) {
      scoreActuel += face;
      document.querySelector('#scoreActuel_' + tourActif).textContent = scoreActuel;
    } else {
      joueur_suivant();
    }
  }
});

document.querySelector('.ajout_total').addEventListener('click', function () {
  if (lanceDe) {
    scoreTotal[tourActif - 1] += scoreActuel;
    document.querySelector('#scoreTotal_' + tourActif).textContent = scoreTotal[tourActif - 1];

    if (scoreTotal[tourActif - 1] >= 100) {
      document.querySelector('#joueur_' + tourActif).textContent = 'VAINQUEUR !';
      document.querySelector('.faces_de').style.display = 'none';
      document.querySelector('.interface_joueur_' + tourActif).classList.add('vainqueur');
      document.querySelector('.interface_joueur_' + tourActif).classList.remove('active');
      tourActif = false;
    } else {
      joueur_suivant();
    }
  }
});

function joueur_suivant() {
  tourActif = tourActif === 2 ? 1 : 2;
  scoreActuel = 0;
  document.getElementById('scoreActuel_' + tourActif).textContent = '0';
  document.querySelector('.interface_joueur_1').classList.toggle('active');
  document.querySelector('.interface_joueur_2').classList.toggle('active');
  document.querySelector('.faces_de').style.display = 'none';
}

document.querySelector('.newgame').addEventListener('click', refresh);

function refresh() {
  scoreTotal = [0, 0];
  scoreActuel = 0;
  tourActif = 1;
  lanceDe = true;

  document.querySelector('.faces_de').style.display = 'none';
  document.getElementById('scoreTotal_1').textContent = '0';
  document.getElementById('scoreTotal_2').textContent = '0';
  document.getElementById('scoreActuel_1').textContent = '0';
  document.getElementById('scoreActuel_2').textContent = '0';
  document.getElementById('joueur_1').textContent = 'JOUEUR 1';
  document.getElementById('joueur_2').textContent = 'JOUEUR 2';
  document.querySelector('.interface_joueur_1').classList.remove('vainqueur');
  document.querySelector('.interface_joueur_2').classList.remove('vainqueur');
  document.querySelector('.interface_joueur_1').classList.remove('active');
 La modification apportée à la ligne 5 de la fonction `refresh()` a été coupée. Voici le code complet avec cette modification :
function refresh() {
scoreTotal = [0, 0];
scoreActuel = 0;
tourActif = 1;
lanceDe = true;

document.querySelector('.faces_de').style.display = 'none';
document.getElementById('scoreTotal_1').textContent = '0';
document.getElementById('scoreTotal_2').textContent = '0';
document.getElementById('scoreActuel_1').textContent = '0';
document.getElementById('scoreActuel_2').textContent = '0';
document.getElementById('joueur_1').textContent = 'JOUEUR 1';
document.getElementById('joueur_2').textContent = 'JOUEUR 2';
document.querySelector('.interface_joueur_1').classList.remove('vainqueur');
document.querySelector('.interface_joueur_2').classList.remove('vainqueur');
document.querySelector('.interface_joueur_1').classList.remove('active');
document.querySelector('.interface_joueur_2').classList.remove('active');
document.querySelector('.interface_joueur_1').classList.add('active');
}

Copy

Code : Tout sélectionner

J'ai ajouté la ligne manquante à la fin de la fonction pour réinitialiser l'interface du joueur 1 en tant que joueur actif.

Répondre