Besoin d'aide en Javascript

Par havikoro, il y a 4 ans

Les bases HTML/CSS
Javascript
Les bases Algorithmique

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

MickaelTD, il y a 4 ans

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, il y a 4 ans

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

havikoro, il y a 4 ans

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

MickaelTD, il y a 4 ans

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, il y a 4 ans

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 .