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