Différencier 2 clics de sourie

Résolu

unknow69250 Messages postés 10 Statut Membre -
jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention - 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,

Afficher la suite

A voir également:

Différencier 2 clics de sourie
Faire 2 colonnes sur word - Guide
Sourie d'ordinateur - Guide
Atterrissage artemis 2 - Guide
2 écrans - Guide
Télécharger aptoide 4.2 2 - Télécharger - Téléchargement & Transfert

2 réponses

jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

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 Statut Membre

Merci de ta réponse mais je n'en demandé pas temps^^
0
1. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
  
  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/
  
  0

Différencier 2 clics de sourie

2 réponses

Discussions similaires

Newsletters