javascript - 使用 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

哇，我也在做同样的事情，只是我两周前开始做的。有什么联系方式吗？

我将向您展示我是如何制作网格的：

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