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.

so, what's your problem now? I thought you are correct, to access the element in the matrix is coords[x][y] — Sean
– Sean, Commented Nov 2, 2015 at 1:40
@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. — Matt
– Matt, Commented Nov 2, 2015 at 2:14

DarkSigma · Accepted Answer · 2015-11-02 01:53:27Z

3

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

answered Nov 2, 2015 at 1:53

DarkSigma

4162 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ThisClark · Accepted Answer · 2015-11-02 13:56:37Z

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>

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!

marc_s · Accepted Answer · 2017-03-16 16:51:12Z

2

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

edited Mar 16, 2017 at 16:51

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Nov 2, 2015 at 5:39

Krupesh Kotecha

2,4123 gold badges23 silver badges40 bronze badges

Comments

FlyKite · Accepted Answer · 2015-11-02 01:49:45Z

1

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

answered Nov 2, 2015 at 1:49

FlyKite

133 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related