Question

我和朋友正在为浏览器制作类似神的游戏。这是非常早期的阶段，但我的代码已经出现问题了！

Stack Overflow上有人建议使用'矩阵'（我认为这就是他所说的）来组织你可以构建的磁贴。我现在有一个用于读取和编辑磁贴内容的系统，但我不知道如何以这样的网格格式布置矩阵：

瓷砖1，瓷砖2，瓷砖3
瓷砖4，瓷砖5，瓷砖6
tile 7，tile 8，tile 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()并在警报或控制台日志中显示一个tile值网格。

任何反馈都会很棒！提前谢谢！

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

用JS矩阵形成网格

1 个答案: