Bonjour je dois créer un jeu domino avec 2 joueurs :
par défaut c'est le joueur 1 qui commence , il doit lancer des D et si il tombe sur le chiffre 1 il perde et il donne le relais au joueur 2 , le joueur 2 fait pareil si il tombe aussi sur le chiffre 1 il perd et il donne le relais au joueur 1 .
je voulais pas rentrer des régles de tout le jeu mais je suis déja coincé sur ce point la je ne sais pas comment faire le passage d'un joueur 1 au joueur 2 avec le même boutton et si je suis pobligé de créer des classes et des objets pour ce genre de jeu genre (class joueur et class jeu) et initialiser ces classes en objets genre (joueur 1 , joueur2)...etc
je vous laisse le code que j'ai commencé je sais qu'il ne ressemble pas trop à grand chose mais j'ai tout essayé je suis nouveau sur le Js .

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<div id="carr" class="carr">
  <div id='joueur1Score' class="nbr">00</div>
  <div id="joueur2Score" class="nbr">00</div>
</div> <br><br>
<div>
  <button id="lancer">Lancer</button>
</div>
<script src="js.js"></script>
</body>
</html>

Css

body {
  margin-top: 50px;
  display: grid;
  justify-content: center;
}

.carr {
  display: flex;
  flex-direction: row;
  justify-content: center;
  justify-content: space-between;
  background-color: aliceblue;
  width: 500px;
}

.nbr {
  font-size: 100px;
}

button {
  width: 100px;

}

Js

var roll = document.getElementById('lancer')
function rand(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

class Joueur {
  constructor (id , tour){
    this.id=id
    this.score=0
    this.tour=tour
  }
}

let joueur1 = new Joueur('joueur1Score', true)
let joueur2 = new Joueur('joueur2Score', false)

let joueursList = [joueur1,joueur2]

for (let i=0 ; i < joueursList.length ; i++){
    if (joueursList[i].tour==true) { 
      var carr = document.getElementById(joueursList[i].id)
      function lancer() {
          nbrAleatoire = rand(1,7)
          carr.innerHTML= nbrAleatoire
        if (nbrAleatoire==1) { 
          console.log(('perdu'));
          joueursList[i].tour=false
          console.log(joueursList[i].tour);
        }
      }
      roll.addEventListener('click', lancer)

    }
}

Ce que je veux

Comment switcher d'un joueur à l'autre quand le 1e joueur tombe sur le numero 1 .
Et si c'est obligé de passer par des classes et des objets ou pas sur ce genre de jeu

Ce que j'obtiens

Décrivez vos éventuelles erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

5 réponses


Bon y'a surement mieux mais c'est fonctionnel

function rand(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

class Joueur {
  constructor(id, tour) {
    this.id = id;
    this.score = 0;
    this.tour = tour;
  }
}

const joueur1 = new Joueur("joueur1Score", false);
const joueur2 = new Joueur("joueur2Score", false);
const joueursList = [joueur1, joueur2];

// ON RECUP LE NOMBRE DE JOUEURS
const totalPlayers = joueursList.length;
// ON RECUPERE LE PREMIER JOUEUR POUR LE PREMIER TOUR DE JEUX
const firstPlayer = joueursList.find((joueur, index) => index === 0 && joueur) || joueursList[0];
// ON DECLARE UNE VARIABLE QUI SERVIRA A ASSIGNER LE PLAYER ACTIF
let player;
// VARIABLE PERMETTANT DE DEFENIR SUR QUELLE MANCHE ON EST
let firstTour = 0;

function lancer() {
  // AU PREMIER LANCER ON ASSIGNE LE PREMIER JOUEUR
  if (firstTour == 0) player = firstPlayer;
  // ON ASSIGNE LE TOUR DU JOUEUR ACTIF A TRUE AFIN QU'IL PUISSE DEMARRER A JOUER
  player.tour = true;
  // SI IL PEUT JOUER
  if (player.tour == true) {
    // ON RECUPERE L'ID DE L'ELEMENT HTML CORRESPONDANT AU JOUEUR
    const carr = document.getElementById(player.id);
    // ON BALANCE UN NOMBRE ALEATOIRE
    nbrAleatoire = rand(1, 7);
    // ON AFFICHE LE NOMBRE DANS L'HTML
    carr.innerHTML = nbrAleatoire;
    // ON CUMULE SON SCORE POUR L'AFFICHER PLUS TARD ( SI TU SOUHAITES FAIRE UN TOTAL SCORE SUR X PARTIES )
    player.score += nbrAleatoire;
    // SI ON TOMBE SUR 1
    if (nbrAleatoire == 1) {
      // IL A PERDU ET ON PASSE SON TOUR A FALSE AFIN QU'IL NE PUISSE PLUS JOUER
      player.tour = false;
      // ON ASSIGNE UN NOUVEAU JOUEUR
      // ON VERIF SI LE JOUEUR ACTIF EST LE PREMIER JOUEUR
      if (player.id == firstPlayer.id) {
        // SI C'EST LE CAS LE NOUVEAU JOUEUR EST LE DERNIER DANS LE TABLEAU 
        // ( FONCTIONNE ICI SUR UN TABLEAU PREDEFINI(TAILLE CONNU) A REVOIR SUR UN TABLEAU DONT ON NE CONNAIT PAS LA TAILLE A L'AVANCE )
        player = joueursList[totalPlayers - 1] || joueursList[1];
        // ON AJOUTE 1 AU TOUR AFIN QU'IL NE REPRENNE PAS LE PREMIER JOUEUR EN DEBUT DE FONCTION
        firstTour++;
      } else {
        // SI CE N'EST PAS LE PREMIER JOUEUR ON ASSIGNE DE NOUVEAU LE PREMIER JOUEUR
        player = firstPlayer;
        // ON AJOUTE 1 AU TOUR AFIN QU'IL NE REPRENNE PAS LE PREMIER JOUEUR EN DEBUT DE FONCTION
        firstTour++;
      }
    }
  }
}

const roll = document.getElementById("lancer");

roll.addEventListener("click", lancer);

ou une version plus simple si tu pars du principe que tu code tout en dure.

function rand(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

class Joueur {
  constructor(id, tour) {
    this.id = id;
    this.score = 0;
    this.tour = tour;
  }
}

const joueur1 = new Joueur("joueur1Score", false);
const joueur2 = new Joueur("joueur2Score", false);

// ON DECLARE UNE VARIABLE QUI SERVIRA A ASSIGNER LE PLAYER ACTIF
let player;
// VARIABLE PERMETTANT DE DEFENIR SUR QUELLE MANCHE ON EST
let firstTour = 0;

function lancer() {
  // AU PREMIER TOUR ON ASSIGNE LE PREMIER JOUEUR
  if (firstTour == 0) player = joueur1;
  // ON ASSIGNE LE TOUR DU JOUEUR ACTIF A TRUE AFIN QU'IL PUISSE DEMARRER A JOUER
  player.tour = true;
  // SI IL PEUT JOUER
  if (player.tour == true) {
    // ON RECUPERE L'ID DE L'ELEMENT HTML CORRESPONDANT AU JOUEUR
    const carr = document.getElementById(player.id);
    // ON BALANCE UN NOMBRE ALEATOIRE
    nbrAleatoire = rand(1, 7);
    // ON L'AFFICHE LE NOMBRE DANS L'HTML
    carr.innerHTML = nbrAleatoire;
    // ON CUMULE SON SCORE POUR L'AFFICHER PLUS TARD
    player.score += nbrAleatoire;
    // SI ON TOMBER SUR 1
    if (nbrAleatoire == 1) {
      // IL A PERDU ET ON PASSE SON TOUR A FALSE AFIN QU'IL NE PUISSE PLUS JOUER
      player.tour = false;
      // ON ASSIGNE UN NOUVEAU JOUEUR
      // ON VERIF SI LE JOUEUR ACTIF EST LE PREMIER JOUEUR
      if (player.id == joueur1.id) {
        // SI C'EST LE CAS LE NOUVEAU JOUEUR EST LE JOUEUR 2 
        player = joueur2;
        // ON AJOUTE 1 AU TOUR AFIN QU'IL NE REPRENNE PAS LE PREMIER JOUEUR EN DEBUT DE FONCTION
        firstTour++;
      } else {
        // SI CE N'EST PAS LE PREMIER JOUEUR ON ASSIGNE DE NOUVEAU LE PREMIER JOUEUR
        player = joueur1;
        // ON AJOUTE 1 AU TOUR AFIN QU'IL NE REPRENNE PAS LE PREMIER JOUEUR EN DEBUT DE FONCTION
        firstTour++;
      }
    }
  }
}

const roll = document.getElementById("lancer");

roll.addEventListener("click", lancer);

Bon courage pour la suite.

havikoro
Auteur

ah oui ça marche ton code super je vais essayer de bien comprendre pour voir si je peux faire pareil ou autrement merci :)

havikoro
Auteur

et juste un dernier soucis comment je peux réinitialiser le jeux avec un boutton new game j'ai essayé de faire un événement new game mais je n'arrive pas et je voulais pas utiliser le reload page je pense que ce n'est pas le but d'actualiser la page

Si je me base sur le tout dernier bout de code je ferai un truc comme ça

// Tu change tes constantes en let
const joueur1 = new Joueur("joueur1Score", false); ==> **let** joueur1 = new Joueur("joueur1Score", false);
const joueur2 = new Joueur("joueur2Score", false); ==> **let** joueur2 = new Joueur("joueur2Score", false);

// Tu récup le bouton pour lancer une fonction sur le clic
const newGameButton = document.getElementById(newGame)
newGameButton.addEventlisterner('click' , restartGame)

function restartGame() {
    // Tu remet les tours à 0 pour que dans la fonction lancer ca recommence bien sur le joueur 1
    firstour = 0
    joueur1 = new Joueur("joueur1Score", false); // Tu reset les datas des 2 joueurs
    joueur2 = new Joueur("joueur2Score", false);
    lancer() // tu réexecute ta fonction
}

J'ai pas testé mais je penses que ca devrait le faire. Tiens nous au courant. Bon courage.

havikoro
Auteur

ah super ça a marché sauf que moi je n'ai pas utilisé le gameTour++ je ne sais pas pk j'ai du mal avec ça mais j'ai fait autrement je t'envoie mon projet en gitHub si tu veux voir .
https://github.com/havikoro2004/gameD
PS : j'ai ignoré le dossier node_modules si tu es intéréssé de voir tu peux télécharger les dépendant avec npm update.
Merci bcp en tout cas .