Différencier 2 clics de sourie
Résolu
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,
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,
2 réponses
-
ModérateurBonjour,
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 traditionnellementif(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
-
Merci de ta réponse mais je n'en demandé pas temps^^
-
Modérateuroui je sais bien... mais j'étais inspiré.. :-)
N'oublie pas :
https://www.commentcamarche.net/infos/25917-marquer-un-fil-de-discussion-comme-etant-resolu/
-