11564 sujets

JavaScript, DOM et API Web HTML5

JavaScript: jeu de dé

Pages :
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 Smiley rolleyes
Modifié par Mathieuu (16 May 2023 - 16:02)
Modérateur
@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.
connecté
Modérateur
Bonjour,

1) On pourrait me semble-t-il assez facilement réduire le code à l'intérieur du <body> à 8 balises (il y en a actuellement une trentaine).

2) Utiliser Bootstrap ici, c'est comme prendre un TGV pour aller acheter ta baguette de pain le matin. À éviter ! Smiley cligne

Amicalement,
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 Smiley ohwell
Je sais que je suis un peu hors sujet mais je voulais réagir à la réponse de Mathieuu : Svelte en V3 ça a l'air d'être une tuerie. Je voulais me mettre aux web components mais au final j'ai du mal à en percevoir les avantages. Du coup je suis en train de me documenter sur Svelte.
Modifié par Olivier C (17 May 2023 - 08:42)
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.
connecté
Modérateur
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)
connecté
Modérateur
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 Smiley lol )
connecté
Modérateur
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 ! Smiley cligne

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 Smiley angryfire : ah bah tu as trouvé le temps que je fasse une belle réponse
Modifié par Mathieuu (23 May 2023 - 13:55)
J'ai résolu comme tu dis en utilisant les magic quote.
T'inquiètes pas, je n'ai pas encore fini, tu auras encore l'occasion de faire de belles réponses. Smiley smile
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
Pages :
Sujet clos
Aller à