créer une grille

Anonyme

6 août 2020 à 10:00:41

Bonjour je débute en javascript, j'ai déja pris un cours pour créer un jeu de demineur et maintenant j'aimerais créer un jeu de morpion mais je n'arrive pas a creer la grille :

///// VARIABLES DU JEU
nbLigne = 3
nbCol = 3

var grille = $('#grille');

///// LAUNCHER DU JEU


///// FONCTIONS DU JEU
function dessinerGrille() {
     //Boucle pour les lignes
     for (var nbLigne ) {
        // créer un objet HTML "ligne"
        var ligne = $('<tr></tr>');

        // Boucle pour les cellules
        for (var nbCol) {
            var cell = $('<td></td>');
        }

}

BrainError

6 août 2020 à 10:06:55

Salut,

Oublie JQuery, ça sert a rien. Vraiment.

function construireGrille(nbLigne, nbColone) {
    const nouvelleGrille = document.createElement('table');
    for(let i = 0; i < nbLigne, i++) {
        const nouvelleLigne = document.createElement('tr');
        nouvelleGrille.appendChild(nouvelleLigne);
        for(let j= 0; j < nbColone; j++) {
            const nouvelleCellule = document.createElement('td');
            nouvelleLigne.appendChild(nouvelleCellule);
        }
    }
    return nouvelleGrille;
}

document.body.appendChild(construireGrille(3, 3));

-
Edité par BrainError 6 août 2020 à 10:07:13

Anonyme

6 août 2020 à 10:13:37

ok mais je n'ai pas de grille qui se créé :

///// VARIABLES DU JEU
nbLigne = 3
nbCol = 3

///// LAUNCHER DU JEU


///// FONCTIONS DU JEU
function construireGrille(nbLigne, nbColone) {
    const nouvelleGrille = document.createElement('table');
    for(let i = 0; i < nbLigne; i++) {
        const nouvelleLigne = document.createElement('tr');
        nouvelleGrille.appendChild(nouvelleLigne);
        for(let j= 0; j < nbColone; j++) {
            const nouvelleCellule = document.createElement('td');
            nouvelleLigne.appendChild(nouvelleCellule);
        }
    }
    return nouvelleGrille;
}
 
document.body.appendChild(construireGrille(3, 3))

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jeu de morpion</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    <div id="gamezone">
        <p><button id="backmenu" class="button"><b><a href="index.html">Retour à l'accueil</a></b></button></p>
        <table id="grille"></table>
    </div>

    <script src="morpion.js"></script>

</body>
</html>

NadfriJS

7 août 2020 à 1:00:44

Salut, tu as bien mis des bordures à ton tableau via le CSS?

Par exemple:

table, th, td {
  border: 1px solid black;
}

Sinon ton tableau sera invisible d'autant plus s'il est vide.

-
Edité par NadfriJS 7 août 2020 à 1:01:09

La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

Anonyme

8 août 2020 à 16:16:21

c'est bon je m'en suis rendu compte entre-temps je pensais que comme en html le tableau s'affichait pardéfaut sans style en noir mais non :/