JavaScript: jeu de dé

Bonjour à tous,
Je dois refaire ce jeu : https://dice-game-100.netlify.app/ mais je bloque complètement sur JS, est-ce que quelqu'un pourrait m'expliquer pas à pas comment faire ?
Voici mon code html et css :

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

peut être qu'il y a des erreurs, j'ai très peu de connaissances.
merci d'avance pour votre aide


[Edit de _laurent] merci pour le codepen c'est top
Modifié par _laurent (15 May 2023 - 11:36)

Salut,

Que sont les règles du jeu ?

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

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 )

merci je vais faire une pause, je suis entrain de me noyer dans js

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,

voilà le jeu fonctionne, encore quelques petites choses à régler
la page doit être responsive, les images des boutons ne sont pas très bien placées

Je dois encore mettre une image à droite de player1 (cercle rouge) quand il est entrain de jouer, j'ai vu plusieurs façon de faire, vous me conseillez quoi ?

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