用JS矩阵形成一个网格

Question

一位朋友和我正在为浏览器制作一个上帝​​般的游戏。这是非常早期的阶段，但我的代码已经有问题了！

Stack Overflow上的某个人建议使用'矩阵'（我认为这就是他所说的）来组织可以构建的图块。我现在有阅读和编辑瓷砖内容的系统，但我不知道我该怎么布局的网格格式像这样的矩阵：

• 瓦1瓦2，瓦片3
• 瓦4，5瓦，瓦片6
• 瓦7，8瓦，瓷砖9

这将是理想的，如果这样的工作，不管有多少行和列有。

这里是我到目前为止的代码：

var WoodHut = "Woodcutter's hut"; 
var TownHall = "TownHall"; 
var Mine = "Iron Mine"; 

var tiles = []; 
var rowCount = 15; 
var columnCount = 15; 

// Assign the none string to all tiles. 
for (var r = 0; r < rowCount; r++) 
{ 
    tiles[r] = []; 
    for (var c = 0; c < columnCount; c++) 
    { 
     var currentRow = tiles[r]; 
     currentRow[c] = "--none--"; 
    } 
} 
// NOTE TO SELF: Arrays are 0-based! 
// access row 4, column 2. 
// console.log(tiles[3][1]); 

// Assign something to row 5 column 3. 
// tiles[4][2] = WoodHut 

function Build(locX, locY, type){ 
    this.locX = X 
    this.locY = Y 
    this.type = type; 
    tiles[X][Y] = type; 
} 

function TownMap(){ 
    // HOW DO I DO THIS??????? 
    } 

因此，在总结，我希望能够调用TownMap()并在警告或控制台日志显示的区域值的网格。

任何反馈将是伟大的！提前致谢！

Answer 1

哇我正在做同样的事情，只是我在2周前开始。 任何我们可以联系的方式？

我会告诉你我是如何做的网格：

function setup() { 
    // Create Grid 
    var grid = $('#grid'); 
    for (var i = 0; i < tileCount; i++) { 
    var tile = document.createElement('div'); 
    tile.id = "t" + (i + 1); 
    tile.className = "tile"; 
    tile.onclick = function() { 
     deselect(); 
     activeTile = $(this); 
     $(this).addClass("active"); 
     tilePopup(this); 
    }; 
    grid.append(tile); 
    } 

    //Create Menu 
    var menu = $('#menu'); 
    for (var i = 0; i < buildings; i++) { 
    var building = document.createElement('div'); 
    building.id = "b" + (i + 1); 
    //building.className = "building"; 
    building.innerHTML = "Building " + (i + 1); 
    building.style.background = "url('images/buildings/" + building.id + ".png') 0 26px/100% auto no-repeat"; 
    building.onclick = function() { 
     build(this.id); 
    }; 
    menu.append(building); 
    } 
} 

CSS：

#grid { 
    position: absolute; 
    width: 800px; 
    height: 800px; 
    left: 400px; 
    -moz-transform: rotate(-45deg) skew(15deg, 15deg); 
    -webkit-transform: rotate(-45deg) skew(15deg, 15deg); 
    -ms-transform: rotate(-45deg) skew(15deg, 15deg); 
    transform: rotate(-45deg) skew(15deg, 15deg); 
    background-image: url("images/ground.jpg"); 
    background-size: 100% 100%; 
} 

.tile { 
    float: left; 
    width: 10%; 
    height: 10%; 
    outline: 1px ridge rgba(121, 121, 121, 0.8); 
    transition: 1s; 
}