如何使用循环使用二维数组作为 X 和 y 坐标？答案

【问题标题】：How Can I Use A 2 Dimensional Array As X and y Coordinates Using Loops?如何使用循环使用二维数组作为 X 和 y 坐标？
【发布时间】：2015-03-28 00:41:32
【问题描述】：

哈哈...有点奇怪的问题，但它是针对我正在制作的视频游戏的。我需要能够从一组文本地图中加载地图。所以对于这张地图，我有：

//MAPS
var map = new Array();

map[1,1] =  "####################";
map[1,2] =  "####################";
map[1,3] =  "####################";
map[1,4] =  "####################";
map[1,5] =  "####################";
map[1,6] =  "####################";
map[1,7] =  "####################";
map[1,8] =  "####################";
map[1,9] =  "####################";
map[1,10] = "####################";
map[1,11] = "####################";
map[1,12] = "####################";
map[1,13] = "########BBBB########";
map[1,14] = "####################";
map[1,15] = "####################";
map[1,16] = "#############BBBB###";
map[1,17] = "###BBBB#############";
map[1,18] = "####################";
map[1,19] = "####################";
map[1,20] = "BBBBBBBBBBBBBBBBBBBB";

好的...所以“#”字符意味着没有放置任何对象，基本上没有任何东西会在我最后运行时放置它们。

“B”字符将是我制作的方块对象。所以，我本能地投入了 for 循环：

//READING FROM MAPS
var block = new Array();

for (var o = 0; o <= 19; o ++) {
	for (var i = 0; i <= 19; i ++) {
		var n = map[1,o].charAt(i);
		if ( n == "B") {
		block[blockCount] = new Object((n*32),(o*32),32,32,"IMAGES/block.png");
		blockCount += 1;
		}
	}
}

好吧，看起来有点容易搞定，但当然，错误。游戏不会在浏览器中运行。如果我不能做类似的事情，我不知道该怎么做。如果代码本身不愚蠢，对我的问题有什么想法/解决方案吗？

感谢您的宝贵时间！ -Smy

【问题讨论】：

什么样的错误？文本映射如何工作？多行 # 和 B？

标签： javascript arrays for-loop multidimensional-array

【解决方案1】：

您在地图 ({}) 中使用的多维符号在 Javascript 中不起作用。
当你写：

map[1, 12] = 'some string';

其实你在做：

map[ (1 , 12) ] = 'some string' ;

使用 , 运算符，返回最后计算的表达式。
这里 (1, 12) === 12，所以这里就像你输入的一样：

map[12]= 'some string' ;

（可能还有其他一些错误，只是想强调一下。）

【讨论】：

啊，我明白了。那么我该如何以不同的方式编写地图呢？

【解决方案2】：

以下显示了如何构造二维数组显示。在此链接中：https://www.khanacademy.org/computer-programming/hunger-games/6623296612990976 [ 这是一个 KhanAcademy 程序，展示了如何使用数组映射来显示某些东西。][1]

var s = 'Possible spawn points';
var hunger_map = [ // This Is the Map
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,s,0,0,s,0,0,s,0,0,s,0,0,s],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,s,0,0,s,0,0,s,0,0,s,0,0,s],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,s,0,0,s,0,0,s,0,0,s,0,0,s],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    ];

var displayMap = function(themap){
for (var i = 0; i < themap.length;i++){ // I loop through the array like this
    for(var f = 0; f < themap[i].length;f++){
        switch(true){
            case themap[i][f] === 0: //Empty square
                fill(255, 255, 255); //color of the square
                break;
            case themap[i][f] === s: //Blue square
                fill(0, 255, 242); //color of the square
                break;
            default:
                fill(0, 255, 13); // pink so I can see the undefined thingy.
        }
rect(i*(width/themap.length),f*(height/themap[i].length),themap.length*(width/themap.length),themap.length*(height/themap[i].length)); //displays in khanacademy. Just look at the link, it will make more sense. 
    }
}
};

基本上，这种方法的优点是有一个坐标系，而且是一种显示不同颜色的快捷方式。

您可能很有创意，可以使用 createElement() 而不是 rect，并使用图像 src 切换填充语句。

要访问点 (0,0)，您只需键入 hunger_map[0][0] // returns 0 点 0,0 位于网格的左上角。

哦，而且，它不必是数字。用一个长字符串替换数字（和中间的逗号）。但是，在我看来，它更难阅读。

【讨论】：