Partage
  • Partager sur Facebook
  • Partager sur Twitter

Probleme de JS tic tac toe

JeremyTaverne1
11 octobre 2017 à 15:12:21

Bonjour les openclassroomer 

J'ai un petit problème sur mon code js il ne veut pas m'indiquer le message de victoire si le joueur 1 ou 2 a gagné 

$(document).ready(function() {

  var oldcolor;
  var oldbackground;
  var joueur = 'j1';
  var score_joueur1 = 0;
  var score_joueur2 = 0;


function setMessage(msg) {
    document.getElementById("msg").innerHTML = msg;
}
  $('td').hover(
    function(){
      oldcolor = $(this).css('color');
      oldbackground = $(this).css('background');
      $(this).css({
        'background' : '#CCB579',
        'color'      : '#CC8279'
      });
    },
    function(){
      $(this).css({
        'color' : oldcolor,
        'background' : oldbackground
      });
    }
  );

  $('td').click(
    function() {
      if($(this).html() =='') {
        if (joueur == 'j1') {
          $(this).html('X');
          $(this).css({
            'color'      : '#CC8279'
          });
          setMessage("Le joueur 2 Doit jouer");

          joueur = 'j2';
        } else {
          $(this).html('O');
          $(this).css({
            'color'      : '#CC8279'
          });
          setMessage("Le joueur 1 doit jouer");
          joueur = 'j1';
        }
      }else alert('La casse est déja cochée !!');
  });


  function winner () {
    if (
            ($('#a1').html() == $('#a2').html() && $('#a1').html() == $('#a3').html() && $('#a1').html() != '') ||
            ($('#a4').html() == $('#a5').html() && $('#a4').html() == $('#a6').html() && $('#a4').html() != '') ||
            ($('#a7').html() == $('#a8').html() && $('#a7').html() == $('#a9').html() && $('#a7').html() != '') ||
            ($('#a1').html() == $('#a4').html() && $('#a1').html() == $('#a7').html() && $('#a1').html() != '') ||
            ($('#a2').html() == $('#a5').html() && $('#a2').html() == $('#a8').html() && $('#a2').html() != '') ||
            ($('#a3').html() == $('#a6').html() && $('#a3').html() == $('#a9').html() && $('#a3').html() != '') ||
            ($('#a3').html() == $('#a5').html() && $('#a3').html() == $('#a7').html() && $('#a3').html() != '') ||
            ($('#a1').html() == $('#a5').html() && $('#a1').html() == $('#a9').html() && $('#a1').html() != ''))
      {    
          setMessage("bonjour");
           {
                  score_joueur1 ++;
                  $(".center").text(score_joueur1 + ' - ' +score_joueur2);
           }

      }


  }

});

voici mon JS 

<!DOCTYPE html>
<html>
<head>
	<title>Morpion</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
	<h1 class="titre">TIC TAC TOE</h1>
	<button onclick="fonctionCommencer()">Commencer la partie</button>
	<script> 
		function fonctionCommencer() {
		var Joueur1 = prompt('Veuillez choisir le joueur 1','Roger');
		if (Joueur1 != null) {
    	document.getElementById("joueur1").innerHTML =
    	"Joueur 1 :" + Joueur1 + "";
		}
		var Joueur2 = prompt('Veuillez choisir le joueur 2','Bernard');
		if (Joueur2 != null) {
    	document.getElementById("joueur2").innerHTML =
    	"Joueur 2 :" + Joueur2 + "";
		}
	}
	</script>
	
	 <h2 id="joueur1"></h2>
	 <h2 id="joueur2"></h2>
	 <h2 id ="msg"></h2>
	 <table width="24%" border="1.75">
	 	<tr>
	 		<td id="a1"></td>
	 		<td id="a2"></td>
	 		<td id="a3"></td>
	 	</tr>
	 	<tr>
	 		<td id="a4"></td>
	 		<td id="a5"></td>
	 		<td id="a6"></td>
	 	</tr>
	 	<tr>
	 		<td id="a7"></td>
	 		<td id="a8"></td>
	 		<td id="a9"></td>
	 	</tr>
	 </table>
</body>
</html>

et ceci mon html 

Merci bien :) 

  • Partager sur Facebook
  • Partager sur Twitter
LCaba
  • Javascript
11 octobre 2017 à 18:13:12

Salut,

Tes lignes 13 à 28 peuvent (et doivent !) être remplacées par une ligne de CSS !

Ensuite, ta fonction winner() n'est jamais appelée. Tu doit l'appeler à chaque tour de jeu (en tout cas, à chaque tour à partir du 5e, puisque personne ne peut avoir gagner avant). Du coup, faut lui trouver un autre nom genre checkForWinner().

Par contre ta façon de vérifier les score, ça fonctionne, mais ça ne va pas du tout. Tu dois pas te servir de l'affichage pour vérifier qui a joué quoi. C'est hyper lourd, tu parcours le DOM 40 fois dans ta condition !!! 

Il faut que tu sépares l'affichage et les données c'est important.

Par exemple tu peux utiliser un tableau de 9 entrées par exemple, tout simplement

  • Partager sur Facebook
  • Partager sur Twitter
Cabinet vétérinaire à Angers
JeremyTaverne1
11 octobre 2017 à 18:20:19

Je comprends tres bien mais je comprends pas la ligne de  css dans le html ou le js 

De plus je dois appeler la fonction checkforWinner() quand parce que je comprends pas du tout le javascript je viens d'apprendre a peine le javascript et le prof nous lance dans ca sans rien nous expliquer ! :/

Je dois rendre ca pour samedi à 00h00 :/

  • Partager sur Facebook
  • Partager sur Twitter
LCaba
  • Javascript
12 octobre 2017 à 0:10:42

Tes lignes 13 à 28 servent à changer la couleur du fond du td au survol de la souris. Le pseudo élément :hover fait ça en une seule ligne (dans ton fichier CSS) :

td:hover {
  background-color: #CCB579;
  color: #CC8270;
}


C'est pas une question de javascript, c'est une question d'algorithme qui n'a rien à voir avec le langage que tu utilises pour programmer. La question est : à quel moment dans le jeu dois-tu vérifier si quelqu'un à gagner ? la réponse est : à chaque fois qu'un joueur vient de jouer.

T'as une bonne base : tu as trouvé comment faire jouer chaque joueur l'un après l'autre, comment vérifier si 3 pions sont alignés. Donc pour quelqu'un qui débute tu t'en sors plutôt bien. En ajoutant l'appel à la fonction checkForWinner() au bon endroit ton jeu est fonctionnel. Restera plus qu'à optimiser le code ;)

  • Partager sur Facebook
  • Partager sur Twitter
Cabinet vétérinaire à Angers
JeremyTaverne1
12 octobre 2017 à 11:16:13

Il marche enfin j'ai rajouté quelque truc mais j'ai essayé avec le css ca ne marche pas :/

J'ai donc gardé comme c'etait maintenant j'ai un petit problème pour afficher le score et pour qu'après une victoire je ne plus recliquer sur une case :)

Sinon merci bien pour tes conseils c'est très gentils :) 

  • Partager sur Facebook
  • Partager sur Twitter
LCaba
  • Javascript
12 octobre 2017 à 12:38:56

Pour le CSS, si ça marche pas, c'est que t'as fait une erreur. T'as bien mis ça dans le fichier style.css ? t'as bien actualisé ta page en ignorant le cache (Ctrl+F5) pour charger la version modifiée ? 

Franchement, c'est pas possible d'utiliser du jQuery pour faire un hover.

Et si tu as besoin de désactiver l'effet de survol pour les cases déjà occupé, ça se fait aussi en CSS, le script n'intervient que pour modifier la class. Dans l'exemple suivant, le survol est désactivée pour la case en bas à droite : https://jsfiddle.net/k13vuhf8/

Pour gérer la fin de partie, il te faut 2 variables : un nombre pour compter le nombre de tours, et un booléen pour savoir si la partie est en cours.

Au début de la partie, ton booléen vaut true, et dans ta fonction checkForWinner() tu change sa valeur pour false si quelqu'un a gagné.

Tu incrémentes le nombre de tour après chaque tour valide.

Enfin, avant chaque tour de jeu (au début de ta fonction click) tu vérifies la valeur du booleen et le nombre de tour. Si le booleen vaut false ou si le nombre de tour vaut 9, tu sort de la fonction pour ignorer le click.

-
Edité par LCaba 12 octobre 2017 à 14:41:18

  • Partager sur Facebook
  • Partager sur Twitter
Cabinet vétérinaire à Angers
JeremyTaverne1
12 octobre 2017 à 23:03:12

J'ai réussis mais pas comme ca j'ai initialiser une variable et si cette variable est = 0 alors on peut jouer dès qu'il y'a un vainqueur la valeur prends 1 et donc ne peut plus jouer mais merci quand même

Maintenant juste à mettre un peu de css bootstrap un bouton rejouer reinitialiser et le score et ca serait bon :) 

Merci quand même de ton aide :) 

  • Partager sur Facebook
  • Partager sur Twitter
LCaba
  • Javascript
12 octobre 2017 à 23:35:11

Une variable qui vaut 0 ou 1 ça fait la même chose qu'un booléen qui vaut false ou true. Donc si, t'as fait pareil, mais en utilisant un type de variable inapproprié. ça marche, mais ton code est moins clair.

As-tu pensé à détecter les matchs nuls ? faut pas oublier que c'est le résultat le plus courant au morpion

-
Edité par LCaba 12 octobre 2017 à 23:35:40

  • Partager sur Facebook
  • Partager sur Twitter
Cabinet vétérinaire à Angers
JeremyTaverne1
13 octobre 2017 à 0:20:31

Oui oui merci en tout je vais essayer d'afficher le score et ca sera bon :) 

  • Partager sur Facebook
  • Partager sur Twitter
LCaba
  • Javascript
13 octobre 2017 à 7:38:03

Ce que t'appelle le score c'est d'avoir qui a gagné ? Ou alors tu compte la points d'une petite à l'autre ?
  • Partager sur Facebook
  • Partager sur Twitter
Cabinet vétérinaire à Angers
JeremyTaverne1
13 octobre 2017 à 23:48:12

Je compte les points :)
  • Partager sur Facebook
  • Partager sur Twitter
LCaba
  • Javascript
13 octobre 2017 à 23:56:36

Ok. Hésite pas à poster de nouveau si tu rencontres une difficulté.
  • Partager sur Facebook
  • Partager sur Twitter
Cabinet vétérinaire à Angers
HanaeNina
26 mars 2019 à 23:50:12

Bonjour, sur le jeu "tic tac toe" j'avais +3000 wins, +1000 losers et +8000 points par erreur j'ai réinitialisé mon compte et j'ai tout perdu maintenant j'ai 0 wins 0 losers et 0 points et je suis vraiment très dégoutée, s'il vous plaît puis-je récupérer mes gains et mes points?. J'aimerais bien que vous puissiez m'aider :(.
  • Partager sur Facebook
  • Partager sur Twitter