11484 sujets

JavaScript, DOM et API Web HTML5

JavaScript: jeu de dé

Pages :
(reprise du message précédent)

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
comment faire également pour mettre winner à la place de player quand le joueur atteint les 100points.

merci d'avance
Salut,

Pour mettre winner tu peux faire un getElementById sur name_${activePlayer} et remplacer le contenu (et en cascade il faut aussi que tu modifies la fonction que tu utilises au lancement de la nouvelle partie pour le re initialiser)

Pour le cercle à coté du joueur tu dois pouvoir le faire facilement avec un toggle d'une classe css qui affiche/cache l'element (i.e. une classe .invisible en display:none)
https://codepen.io/MontBlanc73/pen/LYgqVZe

winner s'affiche bien quand le joueur gagne la partie, mais je n'arrive pas à l'enlever dans la fonction init.

j'arrive à mettre un background color sur le player active mais pas cette image de point rouge upload/1685006848-61022-capture.jpg à côté du player active

merci pour votre aide, j'ai envie d'en finir...
Salut,

pour changer le texte de Player [1|2] à winner ! tu le fais avec ce code la : 
 document.getElementById(`name_${activePlayer}`).innerHTML = `<p>winner !</p>`;


Du coup pour changer le texte de winner ! à player [1|2] il faut que tu re modifie le innerHTML dans l'autre sens dans ta fonction init (qui s'appelle inti je sais pas trop pourquoi ?) : 
    name0El.innerHTML = `Player 1`;
    name1El.innerHTML = `Player 2`;
Mathieuu a écrit :
Salut,

pour changer le texte de Player [1|2] à winner ! tu le fais avec ce code la : 
 document.getElementById(`name_${activePlayer}`).innerHTML = `&lt;p&gt;winner !&lt;/p&gt;`;


Du coup pour changer le texte de winner ! à player [1|2] il faut que tu re modifie le innerHTML dans l'autre sens dans ta fonction init (qui s'appelle inti je sais pas trop pourquoi ?) : 
    name0El.innerHTML = `Player 1`;
    name1El.innerHTML = `Player 2`;


merci pour ton aide,

je dois encore mettre ce foutu point rouge à côté du joueur actif et j'en aurai terminé
parsimonhi a écrit :
Bonjour,

1) On pourrait me semble-t-il assez facilement réduire le code à l'intérieur du &lt;body&gt; à 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,


Bonjour, comme j'ai enlevé bootstrap, je galère à faire en sorte que ma page soit responsive...
https://codepen.io/MontBlanc73/pen/LYgqVZe
Tu dois pouvoir ça en css avec ça par exemple : 

.player_active::before {
 content:'????'  
}


Ensuite pour faire un truc un peu propre il doit falloir adapter pour que cela s'applique au nom du joueur plutôt que sur l'élément parent comme c'est le cas actuellement.

Edit : En envoyant le message il transforme le caractère en ???? , de base j'étais parti sur ce symbole la : https://symbl.cc/en/1F534/
Modifié par Mathieuu (26 May 2023 - 11:57)
Mathieuu a écrit :
Tu dois pouvoir ça en css avec ça par exemple : 

.player_active::before {
 content:'????'  
}


Ensuite pour faire un truc un peu propre il doit falloir adapter pour que cela s'applique au nom du joueur plutôt que sur l'élément parent comme c'est le cas actuellement.

Edit : En envoyant le message il transforme le caractère en ???? , de base j'étais parti sur ce symbole la : https://symbl.cc/en/1F534/


merci pour ton aide, tu m'auras appris pas mal de choses Smiley smile
Modérateur
Bonjour,

MontBlanc a écrit :
Bonjour, comme j'ai enlevé bootstrap, je galère à faire en sorte que ma page soit responsive...

Moi, c'est plutôt quand une page est sous bootstrap que je n'arrive à rien ! Je n'ai jamais compris comment les gens arrivaient à faire des pages sous bootstrap qui marchent vraiment ! Smiley cligne

Ici, déjà, je pense qu'utiliser un display grid css serait mieux que du flex (vu la présentation qu'on cherche à obtenir, ça me semble paradoxalement un poil plus compliqué ici d'utiliser du flex). Une idée peut être d'afficher le jeu sur 3 colonnes quand on a assez de place, puis passer à 2 colonnes avec moins de place, puis à 1 seule colonne sur les écrans étroits. Ça se fait me semble-t-il assez facilement avec des @media queries. Je t'avais donné un exemple (qui est responsive) et qui utilise un display grid css sur la balise body avec des @media queries. Je te remets le lien : https://jsfiddle.net/parsimonhi/39bpqkmr/

As-tu regardé son code ? As-tu essayé de faire marcher ce code dans une page de test en local chez toi ? Ton code html est un peu plus dodu que celui de mon exemple, ce qui finalement doit lui nuire quand tu essaies de faire du responsive. Retire donc toutes ces <div> de regroupement qui ne servent à rien ici (et qui dans le cas général ne servent à rien la plupart du temps d'après moi). Elles compliquent plutôt les choses, surtout si finalement tu décides d'utiliser un display:grid sur le body pour faire ta mise en page.

Amicalement,
Modifié par parsimonhi (27 May 2023 - 09:36)
Prévenir un modérateur
Pages :
Répondre au sujet
Aller à