2015-11-02 76 views
1

我想做一个类似于扫雷舰或战列舰的小游戏,我需要使用某种10x10网格。为了存储这个网格的信息,我计划使用一个10x10 2d数组。到目前为止,我的问题是我无法弄清楚如何访问,检查和更改阵列中各个位置的内容。我的问题是这样的。怎么样,或者什么是创建一个数组或其他东西来存储我需要的一系列整数的最佳方法,并在以后根据需要访问它们?如何/创建一个2d数组来存储整数,jQuery/javascript

我已经尝试了一些不同的方法来做到这一点,我的最后一次尝试的存在:

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

我打算有0表示这是一个未点击的空间,1表示一个点击空间中并未包含任何, 2表示包含对象的空间。

+2

所以,现在什么问题了吗?我认为你是正确的,访问矩阵中的元素是'coords [x] [y]' – Sean

+0

@Sean Web控制台说coords是未定义的,我认为我做错了什么。看看答案,看看我能不能把它运用起来。 – Matt

回答

2

我打算有0表示这是一个未点击的空间,1表示一个点击空间不包含任何东西,2表示包含对象的空间。

您需要两个MD数组:一个用于存储值0 1或2,另一个用于存储对象 - null或其他。

我到目前为止的问题是,我无法弄清楚如何访问,检查和更改数组的各个位置的内容。

下面是一个使用两个数组的示例:一个用于存储用户单击的状态,另一个用于存储相关对象。当用户点击零来更新其状态时,您可以使用objs阵列做些什么。我所做的只是在objs数组中存在关联对象时将clicked元素的innerHTML更改为2,否则将其更改为1。

//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>

+0

所有的答案都很有帮助,但是你给了我最全面的答案,以及一些额外的例子,这些例子真的帮助了我试图做的事情。谢谢! – Matt

1

您可以使用新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; 
    } 
} 
3

这里的初始化10×10的二维数组编号为0。

创建单个阵列和10个推入阵列它的一种方式。对于每个内部数组,请推动数字0(或任何您喜欢的值)。

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

2

试试这个。它将创建3行3列的二维数组。它也将分配所有元素为0,因为我使用了fill()。你可以使用行和列索引访问任何元素。在下面的例子中,我打印了第一行。

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

相关问题