Bonjour à tous,

Je cherche à développer un jeu de Memory Cards, et pour ce faire avec ma méthode, j'aurais besoin de récupérer via JS l'information que le joueur a cliqué sur un bouton html (je pensais passer par une variable JS qui s'incrémente de +1 lorsque le joueur clique sur le bouton).

J'ai suivi plusieurs formations HTML/CSS et JS, mais je ne sais pas comment réaliser cette tâche et je n'ai pas trouvé de tutoriel sur ce point. Quelqu'un serait-il comment faire ou à défaut m'indiquer quelque chose traitant de mon problème?

-
Edité par PierrePetitjean 26 janvier 2020 à 16:36:44

Salut. Tu dis que tu penses utiliser une variable JS qui s'incrémente. Tu as essayé et il y a un problème?

Salut @kulturman, et merci de ta réponse.

Pour le moment (dans le cas de 4 cartes), j'ai fais un tableau 2*2 avec un ID pour chaque case que j'arrive à relier au CSS. Ce que je souhaiterais, c'est mettre un bouton (ou image) cliquable dans ces cases, et récupérer en JS le fait que l'utilisateur a cliqué par une incrémentation.

<table>
      <tr>
        <td Id="11">11</td>
        <td Id="12">12</td>
      </tr>
      <tr>
        <td Id="21">21</td>
        <td Id="22">22</td>
      </tr>
</table>
<script>
      function entieraleatoire(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }
      var nbrecarte = entieraleatoire(1, 3);
      if (nbrecarte == 1) {
        cartealeatoire = entieraleatoire(1, 4);
        if (cartealeatoire == 1) document.getElementById("11").style.backgroundColor='white';
        if (cartealeatoire == 2) document.getElementById("12").style.backgroundColor='white';
        if (cartealeatoire == 3) document.getElementById("21").style.backgroundColor='white';
        if (cartealeatoire == 4) document.getElementById("22").style.backgroundColor='white';
      }
      if (nbrecarte == 2) {

...

</script>

Faudrait, je pense rajouter (ou mettre à la place) des <button> sur les cases du tableau et incrémenter a (ou b ou c ou d) quand l'utilisateur clique sur la case 11 (ou 12 ou 21 ou 22). C'est sur cette manière de faire que je n'arrive pas à me documenter.. 

kulturman a écrit:

Salut. Tu dis que tu penses utiliser une variable JS qui s'incrémente. Tu as essayé et il y a un problème?

kulturman

Il faut que tu utilises les events listener.
https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener

Dans tes TD tu mets des <a> avec des id ou class en fonction de tes besoin pour les identifier. 

par exemple :

<table>
      <tr>
        <td id="11">< a class="selected">11</a></td>
        <td id="12">< a class="selected">12</a></td>      
      </tr>      
      <tr>
        <td id="21">< a class="selected">21</a></td>
        <td id="22">< a class="selected">22</a></td>
      </tr>
</table>

Pour le app.js 

const App = {

    init: () => {
        app.entierAleatoire();
        let selected = document.getElementByClassName('selected')
        let value = selected.getAttribute('class');
        selected.addEventListener('click', app.nbCarte(value));
    },


    entierAleatoire: (min, max) => {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    },


    nbCarte: (id) => {
        let nbrecarte = entieraleatoire(1, 3);
        if (nbrecarte === 1) {
            cartealeatoire = entieraleatoire(1, 4);
            document.getElementById(id).style.backgroundColor = 'white';
          
        }
    }
}

document.addEventListener('DOMContentLoaded', app.init);

Au delà du manque de connaissance (qui est normal au début), tu as énormément d'erreur dans ton code d'origine, je te conseil de revoir un cours histoire de les résoudre


PS : Je préviens j'ai pas testé mon code et je ne l'ai pas écris dans un IDE, donc ça risque de foirer

-
Edité par Mzalbil2 26 janvier 2020 à 18:21:39

bonjour , app.nbCarte return undefined ,

selected.addEventListener('click', app.nbCarte(value));

c'est égal à écrire :

selected.addEventListener('click', undefined );

parce que app.nbrCarte ne retourne rien ...