Différencier 2 clics de sourie

Résolu/Fermé

unknow69250 Messages postés 10 Date d'inscription vendredi 1 mars 2019 Statut Membre Dernière intervention 9 mars 2019 - 4 mars 2019 à 18:50
jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 - 4 mars 2019 à 20:35

Bonsoir, je suis actuellement une formation de développeur web.
Dans le cadre de mon apprentissage on me demande (par groupe de 3) de créer un morpion.
Nous n'en somme qu'à l'état d'ébauche du projet et mon groupe s'est réparti les taches de bases.
Je suis chargé de faire apparaître les "x" ou les "o" selon les différents clics de la sourie.
Comme nous n'en somme qu'au début du projet impossible de tester mon code pour savoir s'il marche.
Aussi je m'adresse à vous pour que vous puissiez m'indiquer si mon code et valide ou non, et si non, pourquoi.

Mon code JS :

var clic =0;

function cliquer (onclick) {
clic=clic+1 }

if (clic%2=0)
{ console.log('x') }
else
{ console.log('o') }

Merci d'avance pour vos réponse.
Je sais qu'utiliser des modulos n'est sans doute pas la façon la plus simple de procéder mais c'est celle qui m'est venue naturellement à l'esprit.
cordialement,

A voir également:

Différencier 2 clics de sourie
2 comptes whatsapp - Guide
Word numéro de page 1/2 - Guide
2 ecran pc - Guide
Jdownloader 2 - Télécharger - Téléchargement & Transfert
Fusionner 2 pdf - Guide

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
Modifié le 4 mars 2019 à 20:08

Bonjour,

Sur le principe.. ton code est juste.

Voici un exemple de ce qui peut être fait :


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>TEST</title>
    <style>
     table{
       width:150px;
       height:150px;
     }
     table td{
       width:50px;
       height:50px;
       text-align:center;
     }
     
     td.odd{
       background-color:#ffaa11;
     }
     td.even{
       background-color:#123fff;
     }
     
    </style>
 </head>
  <body>
    
    <table id="tbl"></table>
    
    <script type="text/javascript">
      var clic = 'X'; 
      var  HTMLTableElement = document.getElementById('tbl');
      function initGame(){
      
        for(var l = 0 ; l<=2 ; l++){
          var HTMLTableRowElement = HTMLTableElement.insertRow();
          for(var c = 0 ; c<=2 ; c++){
             var newCell = HTMLTableRowElement.insertCell(c);
             newCell.id = 'td_' + l + '_' + c ;
             newCell.onclick = function(){placeSymbole(this);};
             newCell.className = (c+l)%2 ? 'odd' : 'even';
          }
        }
      }

      function placeSymbole(elm){
        cell = elm.id;
        console.log('Joueur a cliqué sur la cellule : ',cell);
        if(elm.innerHTML == ""){
          elm.innerHTML = (clic == "X" ) ? "X" : "O"; //ecriture ternaire (sorte de IF/ELSE )
          clic = (clic == "X" ) ? "O" : "X"; //ecriture ternaire (sorte de IF/ELSE )
          verifGagne();
        }else{
          alert('Vous ne pouvez pas modifier une cellule déjà remplie !');
        }
      }
      
      function verifGagne(){
         var lignes = HTMLTableElement.getElementsByTagName ("tr");
         //on boucle sur chaque ligne
         for (l=0; l<lignes.length ; l++){
           var Maligne = lignes[l];
           var cells  = Maligne.getElementsByTagName('TD');
           if(cells[0].innerHTML !="" && cells[0].innerHTML == cells[1].innerHTML && cells[1].innerHTML == cells[2].innerHTML ){
             console.log('Les 3 cellules sont identiques');
             alert (' Le joueur : ' + cells[0].innerHTML + ' a gagné !');
           }
         }
         
         //faut ensuite faire la même chose pour les colonnes
         
         
         
         // puis faudra vérifier les diagonales
         
         
         
         
         
      }
      
      
      // Lancement du jeu
      initGame();
    </script>
  </body>
</html>

NB: J'ai laissé la vérification des colonnes et des diagonales à ta charge

NB² : J'ai utilisé l'écriture ternaire pour certains IF
par exemple :

 elm.innerHTML = (clic == "X" ) ? "X" : "O"; //ecriture ternaire (sorte de IF/ELSE )
  clic = (clic == "X" ) ? "O" : "X"; //ecriture ternaire (sorte de IF/ELSE )

Qui peut s'écrire plus traditionnellement

if(clic == "X" ){
  elm.innerHTML =  "X";
  clic = "O"; 
}else{
  elm.innerHTML= "O";
  clic =  "X";
}

C'est juste pour la "beauté du code et la réduction du nombre de lignes à écrire...

Voilou

Réponse 2 / 2

unknow69250 Messages postés 10 Date d'inscription vendredi 1 mars 2019 Statut Membre Dernière intervention 9 mars 2019
4 mars 2019 à 20:28

Merci de ta réponse mais je n'en demandé pas temps^^

jordane45 Messages postés 38139 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
4 mars 2019 à 20:35

oui je sais bien... mais j'étais inspiré.. :-)

N'oublie pas :
https://www.commentcamarche.net/infos/25917-marquer-un-fil-de-discussion-comme-etant-resolu/

Discussions similaires

Comment changer le sens de la souris avec un double écran ?

Great Teacher Onizuka SAISON 2

Je tiens combien de temps avec 2Go d'internet ?

Windows defender: avertissement de sécurité

A3 paysage en deux A4...est-ce possible?

Discussions similaires

Newsletters