Was ist der effizienteste Weg, um ein anklickbares Gitter mit html/js zu erstellen?

Question

Ich versuche ein Minensucher-ähnliches Spiel aufzubauen, das ich mit meinem Vater über das Internet teilen kann. Wie würde ich eine Schleife verwenden, um dieses Gitter zu erstellen und jeden Index an einer bestimmten Koordinate zu machen, die ich manipulieren kann? Danke an alle.

Answer 1

Sie können ein mehrdimensionales Array (ein Array von Arrays) verwenden.

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); 
    } 
} 

Sie haben jetzt ein 10x10 Raster, die Sie über Grid zugreifen können [x] [y]

das Darstellen auf der Seite, in HTML, hängt von den Rahmenbedingungen Sie verwenden. Wenn Sie es mit rohen Javascript tun möchten, könnten Sie vielleicht eine Tabelle ausgeben.

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

Dadurch erhalten Sie einige Klickereignisse, die Spalte und Zeile rückmelden.

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);