Quel est le moyen le plus efficace de créer une grille cliquable avec html/js?

Question

J'essaie de mettre en place un genre de jeu dragueur de mines que je peux partager avec mon père sur le web. Comment est-ce que j'utiliserais une boucle pour créer cette grille et ferais chaque index à une certaine coordonnée que je peux manipuler? Merci tout le monde.

Answer 1

Vous pouvez utiliser un tableau multidimensionnel (un tableau de tableaux).

var gridWidth = 10; 
var gridHeight = 10; 
var grid = []; 
for(var y = 0; y < gridHeight; y++) 
{ 
    grid.push([]); 
    for(var x = 0; x < gridWidth; x++) 
    { 
     grid[y].push(0); 
    } 
} 

Vous avez maintenant une grille de 10x10, que vous pouvez accéder via réseau [x] [y]

Représentant ceci sur la page, en HTML, dépend du cadre que vous utilisez. Si vous voulez le faire avec javascript brut, vous pourriez peut-être sortir une table.

document.write('<table>'); 
var gridWidth = 10; 
var gridHeight = 10; 
var grid = []; 
for(var y = 0; y < gridHeight; y++) 
{ 
    document.write('<tr>'); 
    grid.push([]); 
    for(var x = 0; x < gridWidth; x++) 
    { 
     document.write('<td onclick="alert(\'clicked\');">'); 
     grid[y].push(0); 
     document.write('</td>'); 
    } 
    document.write('</tr>'); 
} 
document.write('</table>'); 

Answer 2

Cela vous donnera quelques événements de clic, rapportant la colonne et la ligne.

css:

td { 
    border: black solid 1px; 
} 

html:

<table class="table"></table> 

javascript:

$('.table').on('click', 'td', function() { 
    console.log($(this).attr('data-row')); 
    console.log($(this).attr('data-column')); 
}) 

var columns = 10, rows = 10 

function createGrid(columns, rows) { 
    var table = $('.table'); 

    for (var i = 0; i < rows; i++) { 
     var row = $('<tr>'); 
     table.append(row) 
     for (var j = 0; j < columns; j++) { 
      var cell = $('<td>') 
      cell.attr('data-row', i); 
      cell.attr('data-column', j) 
      row.append(cell); 
     } 
    } 
} 
createGrid(columns, rows);