How/Best way to create a 2d array to store integers, JQuery/javascript

Question

I'm trying to make a small game similar to minesweeper or battleship and I need to use some kind of 10x10 grid. To store information for this grid I was planning to use a 10x10 2d array. My problem so far is that I can't figure out how to access, check, and change the contents of the individual locations of the array. My questions is this. How, or what is the best way to create an array or something else to store the series of integers I need and later access them as necessary?

I've tried some different ways to do this, with my last attempt being:

var row1 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var row2 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var row3 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var row4 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var row5 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var row6 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var row7 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var row8 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var row9 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var row10= [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var coords = [row1, row2, row3, row4, row5, row6, row7, row8, row9, row10];

I intended to have 0 signify an unclicked space, 1 signify a clicked space that didn't contain anything, and 2 signify a space that contained an object.

• Sean: so, what's your problem now? I thought you are correct, to access the element in the matrix is coords[x][y]
• Matt: @Sean web console says coords is undefined, I assumed I was doing something wrong. Taking a look at the answers and seeing if I can get it to work.

Answer 1

Here's a way to initialize a 10x10 2D array with the number 0.

Create a single array and push 10 arrays into it. For each of those inner-arrays, push the number 0 (or whatever value you like).

var grid = [];
for (var i = 0; i < 10; i++) {
 grid.push([]);
 for (var j = 0; j < 10; j++) {
 grid[i].push(0);
 }
}
document.write(grid.join("<br>"));

Answer 2

I intended to have 0 signify an unclicked space, 1 signify a clicked space that didn't contain anything, and 2 signify a space that contained an object.

You need two MD arrays: one for storing values 0 1 or 2, and one for storing your objects - null or otherwise.

My problem so far is that I can't figure out how to access, check, and change the contents of the individual locations of the array.

Below is an example that uses two arrays: one to store the state of the user clicks, and another to store the related objects. When a user clicks zero to update its state, it's up to you to do something with the objs array. All I've done is change the clicked element's innerHTML to 2 when the associated object exists in the objs array, or 1 when it doesn't.

//all elements are unclicked
var ints = [
 [0,0,0,0],
 [0,0,0,0],
 [0,0,0,0],
 [0,0,0,0]
];
//objects exist where not null
var objs = [
 [7,null,null,1],
 [null,7,null,null],
 [1,null,8,8],
 [2,null,2,null]
];
//the game is the parent container
var game = $('#game');
//fill the game with rows and columns of clickable html
for(var i = 0; i < objs.length; i++) {
 $(game).append('<div class="row">');
 for(var j = 0; j < objs[i].length; j++) {
 //store i and j indices in data attributes - used in click event
 $(game).append('<div data-i="' + i + '" data-j="' + j + '" class="column">' + ints[i][j] + '</div>'); 
 }
 $(game).append('</div>');
}
//onclick - look for object in objs array (they are not null when present)
$('.column').click(function() {
 var i = $(this).data('i');
 var j = $(this).data('j')
 //update inner html
 if(objs[i][j] !== null) {
 $(this).html('2');
 } else {
 $(this).html('1');
 }
});

.column {
 display: inline-block;
 width: 20px;
 padding: 5px;
 margin: 3px;
 cursor: pointer;
 cursor: hand;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="game"></div>

• Matt: All answers were helpful, but you gave me the most comprehensive one, as well as some extra examples that really helped me with what I am trying to do. Thanks!

Answer 3

Try this. It will create two dimensional array with 3 rows and 3 columns. It will also assign all elements with 0 as I used fill(). And you can access any element using row and column index. In the following example I have printed first row.

var arr = new Array(3).fill(new Array(3).fill(0));
document.write(JSON.stringify(arr[0]));

Answer 4

You can use new Array() to create an array.

var coords = new Array(10);
for (var row = 0; row < 10; row++) {
 coords[row] = new Array(10);
 for (var col = 0; col < 10; col++) {
 coords[row][col] = 0;
 }
}