JavaScript: jeu de dé

voici les règles :

Règles :
Le jeu comprend 2 joueurs sur un seul et même écran.
Chaque joueur possède un score temporaire (ROUND) et un score global (GLOBAL).
À chaque tour, le joueur a son ROUND initialisé à 0 et peut lancer un dé autant de fois qu'il le souhaite. Le résultat d’un lancer est ajouté au ROUND.

Lors de son tour, le joueur peut décider à tout moment de:
- Cliquer sur l’option “Hold”, qui permet d’envoyer les points du ROUND vers le GLOBAL. Ce sera alors le tour de l’autre joueur.
- Lancer le dé. S’il obtient un 1, son score ROUND est perdu et c’est la fin de son tour. Le premier joueur qui atteint les 100 points sur global gagne le jeu.

Salut,

il faut que tu découpes ton problème (faire un jeu) en sous problèmes, jusqu'à avoir des petits problèmes facilement réalisable.
La vu que tu as déjà proposé une interface, on peut s'en servir pour deviner les fonctionnalités et découper notre problème en sous problème : Qu'est ce qu'il se passe quand j'appuie sur un des boutons ?

Exemple pour illustrer : Si tu appuies sur le bouton "New Game" qu'est ce que je fais ? A priori cela doit remettre les infos à 0 :

//on declare une fonction qui remet les variables à 0 et qui change la valeur des scores  affichés dans le html
function initGame(){
  randomNumber = 0;
  roundScore = 0;
  activePlayer = 0;
  scores = [0, 0];
  
  document.getElementById("score-0").innerHTML=scores[0];
  document.getElementById("score-1").innerHTML=scores[1];
}

//on ajoute un eventListener qui fait que lorsque l'on clique sur le bouton new-game-btn on appelle la fonction initGame
document.getElementById("new-game-btn").addEventListener("click", initGame);

Globalement il faut que tu fasses la même chose pour le reste du jeu :
Qu'est ce qu'il se passe si tu appuies sur Roll Dice ?
Qu'est ce qu'il se passe si tu appuies sur Hold ?

Je dirais qu'au départ tu commences par faire une version simple du code pour chacun des boutons (en gros tu augmentes roundScore pour la première fonction et tu augmentes scores[0] pour l'autre fonction), puis ensuite tu devras rendre plus complexe chaque fonction (éventuellement en faisant des sous fonctions): pour gérer si le dès vaut 1, si c'est le joueur 1 ou 2 qui joue, si un des joueurs à atteint 100 et gagne la partie.

Bon courage

Edit : Suppression des let dans la fonction sinon ça n'agit pas sur les bonnes variables
Modifié par Mathieuu (16 May 2023 - 16:02)

@Mathieuu : tu as répondu plus rapidement que moi.


@MontBlanc :

Une chose que j'ai remarquée, il n'y a que 2 joueurs. Or, on peut imaginer qu'il y ait plus. Pour le moment, rester à 2 joueurs, ça permettra de mettre en place la logique du jeu.

Mathieuu a tout à fait raison à propos de morceler les différentes parties du code.

Il y en a qui ont déjà fait du JavaScript 'svelte' ?
Je ne sais pas pourquoi en voyant son code et faisant le petit bout de code js je me suis dit que cela correspondrait bien aux trucs que j'avais bien aimé en faisant le tuto svelte il y a quelques mois (ça simplifierai tous les getElementById qu'il y aura à faire)
Mais je ne sais pas si c'est compliqué à mettre en place (ou pas) en dehors de leur console de tuto

N’hésites pas à nous faire des retours au fur et à mesure que tu avances et ou rencontres des nouveaux problèmes.

Et n'essayes pas de faire un truc directement parfait : typiquement le petit bout de code que je te propose fonctionne mais n'est pas complet, en réalité tu auras plus que 2 champs à remettre à 0 pour faire une nouvelle partie, mais ça permet de faire un premier pas vers la solution du problème.

Bonjour,

Pour le html, on a 3 boutons (Nouveau, Lancer, Garder), une image (pour le dé) et 4 blocs de résultats. Je suggère donc de supprimer tous les <div> du code pen initial et de se contenter des huit balises ci-dessous :

<button>Nouveau</button>
<output>0</output>
<output>0</output>
<img alt="Dé" src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"></svg>'>
<button>Lancer</button>
<button>Garder</button>
<output>0</output>
<output>0</output>

EDIT: initialement, j'avais mis des aria-labels. Je viens de les supprimer car ils font éventuellement double-emploi lorsque c'est lu par un lecteur d'écran avec des ouput:nth-of-type(1)::before{content:"Joueur 1";}, ouput:nth-of-type(2)::before{content:"En cours";}, etc. qu'on devrait rajouter dans le css pour que ce soit compréhensible pour tout le monde.

Amicalement,
Modifié par parsimonhi (17 May 2023 - 14:10)

Bonjour,

Ce qui aurait pu être élégant (mettre les mentions "Joueur 1", "Joueur 2" et les deux "En cours" dans des pseudo-elements) est finalement pas si élégant que ça à l'usage.

En conséquence si on doit rajouter ces mentions dans le html, le code devient par exemple :

<button>Nouveau</button>
<label>Joueur 1 <output>0</output></label>
<label>En cours <output>0</output></label>
<img alt="Dé" src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"></svg>'>
<button>Lancer</button>
<button>Garder</button>
<label>Joueur 2 <output>0</output></label>
<label>En cours <output>0</output></label>

À noter que ce code contient 0 <div>, ce qui est bon signe.

Amicalement,

En faisant mumuse rapidement dans le "repl" de svelt (ici : https://svelte.dev/repl/ ) j'obtiens ça :

<script>
	let GameVisible = false;
	let Winner = false;
	let nbPlayer=0;
	let roundScore = 0;
	let activePlayer = 0;
	let scores = new Array(nbPlayer).fill(0);
	let dice=0;
  let backgroundColors = ["aqua","forestgreen","darkslategray","darkorange","midnightblue","yellow","lime","deeppink","blue","peachpuff"]
													
	function initGame(){
		roundScore = 0;
		activePlayer = 0;
		scores = new Array(nbPlayer).fill(0);
		dice=0;
		GameVisible= true;
		Winner = false;
	}
	
	//fonction random ici :  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
 
	function getRandomInt(min, max) { 
		min = Math.ceil(min);
		max = Math.floor(max);
		return Math.floor(Math.random() * (max - min) + min); // The maximum is exclusive and the minimum is inclusive
	}

	function rollDice(){
		dice = getRandomInt(1,7)
		roundScore += dice;

		if(dice==1)
		{
			roundScore=0;
			holdRoundScore();
		}
	}
	
	function holdRoundScore(){
		scores[activePlayer]+=roundScore;
		if(scores[activePlayer] >= 100) 
		{
			GameVisible= false;
			Winner= true;
		}
		else
		{
			roundScore = 0;
			activePlayer = (activePlayer+1)%nbPlayer;
		}
	}

</script>

Nombre de joueur : <input type=number bind:value={nbPlayer} min=1 max=10 on:change={initGame}>

{#if GameVisible}
<p style="background-color: {backgroundColors[activePlayer]}; color: {backgroundColors[(activePlayer+1)%10]};">Player { activePlayer +1 }</p>
<p>Score Total { scores[activePlayer] }</p>
<p>Score du round en cours { roundScore }</p>

<p>Valeur du dé : { dice }</p>
<button on:click={rollDice}> Roll dice</button>
<button on:click={holdRoundScore}> Hold</button>
{/if}
{#if Winner}
<h1>
	 VICTOIRE DU JOUEUR {activePlayer} avec un score de {scores[activePlayer]} points.
</h1>
<br><button on:click={initGame}> New Game ?</button> 
{/if}

Bon courage (et bon long weekend )

Bonjour,

MontBlanc a écrit :
je suis entrain de me noyer dans js

Tiens bon, il faut 25 ans pour maitriser. D'ici là, c'est normal que tu aies un peu de mal !

Ceci étant, le js pour cet exercice n'est pas très compliqué du point de vue de l'algorithme. Comme toujours, c'est la gestion des interfaces (comment modifier quelque chose à l'écran, comment récupérer une saisie de l'utilisateur) qui est le plus long à maitriser.

Si tu sèches un peu, un peu de code pour t'aider : https://jsfiddle.net/parsimonhi/39bpqkmr/

Amicalement,

bonjour à tous,
d'abord merci à tous pour vos messages.

je suis reparti de zéro en faisant différemment, la fonction roll dice s'exécute bien mais l'image
du dé ne s'affiche pas, je ne comprends pas où est mon erreur
mes images sont bien dans un dossier img, quelqu'un voit ce qui cloche ?

https://codepen.io/MontBlanc73/pen/LYgqVZe

Pour utiliser la syntaxe ${var} , il faut utiliser les magic quote :

  diceEl.src =`./img/dice-${dice}.png`;

La tu as utilisé des simples quotes et si tu regardes le code source tu peux voir que ce n'est pas interprété :

<img src="./img/dice-${dice}.png" alt="Playing dice" class="dice">

Si tu utilises des simples quotes c'est le symbole + pour concaténer des chaînes de caractères :

 diceEl.src ='./img/dice-'+dice+'.png';

Edit : ah bah tu as trouvé le temps que je fasse une belle réponse
Modifié par Mathieuu (23 May 2023 - 13:55)