2

我正在尝试使用 javascript 连续显示一些 div。为此，我有以下 JScode：

var levels = [
    [
        [1,2,0,1,2,1]
    ]
];

如果为 1 则显示红色 div 块，如果为 2 则显示蓝色 div 块，如果为 0 则不显示任何块。这一切都好。div 为 100 x100px，它生成的 HTML 如下所示：

<div id="plane">
  <div class="tile tile1" style="left:0px; top:0px"></div>
  <div class="tile tile2" style="left:100px; top:0px"></div>
  <div class="tile tile1" style="left:300px; top:0px"></div>
  <div class="tile tile2" style="left:400px; top:0px"></div>
  <div class="tile tile1" style="left:500px; top:0px"></div>
</div>

由这部分 JS 代码完成：

this.getHTML = function () {
        return '<div class="tile tile'+this.type+'" style="left:'+this.x*100+'px; top:'+this.y*100+'px"></div>';
    };

如您所见，未显示 0 块。我遇到的问题是这个 0 块也是 100x100px，我希望它是 50x50px。所以只有 0 块 50x50px，所有其他的应该保持 100x100px 所以它会产生：

<div id="plane">
      <div class="tile tile1" style="left:0px; top:0px"></div>
      <div class="tile tile2" style="left:100px; top:0px"></div>
      <div class="tile tile1" style="left:250px; top:0px"></div>
      <div class="tile tile2" style="left:350px; top:0px"></div>
      <div class="tile tile1" style="left:450px; top:0px"></div>
    </div>

但是如何正确地做到这一点？我有点卡在这里。我尝试过调整 CSS 值，但这不起作用。

请看我的小提琴（点击 1 查看块）：http: //jsfiddle.net/mauricederegt/8aNL9/

亲切的问候

4

1 回答 1

1

把想法大声说出来..

在宽度/高度可变的情况下，如果图块必须知道（或计算）它自己的 x、y 坐标，它还必须“知道”它之前的所有图块 - 垂直和水平 - 否则您将面临问题你目前有。或者，生成循环必须跟踪“当前”x/y 位置并将其分配给图块。

不管它是如何实现的，在算法上，有一个 100x100px 正方形的预定义网格，其中的瓷砖“知道”它自己的 [i,j] 位置（从中可以计算出它的 x,y 坐标和宽度）是非常不同的拥有一个 nxm px 瓷砖网格。

也许您可以尝试将 x/y 坐标传递给 tile 对象，而不是它的 i,j 位置？

更新：忍不住玩这个.. 

loadLevel: function (newLevel) {
    level = newLevel;
    tiles = [];
    var html = [];
    var currentX = 0;
    var currentY = 0;

    for (var i = 0, lngi = levels[level].length; i < lngi; i++) {
        for (var j = 0, lngj = levels[level][i].length; j < lngj; j++) {
            if (levels[level][i][j] > 0) {
                var curIndex = tiles.length;
                tiles[curIndex] = new tile(levels[level][i][j], i, j, curIndex, currentX, currentY);
                html.push(tiles[curIndex].getHTML());
                currentX += tileWidth;
            }
            else if(levels[level][i][j] === 0) {
                currentX += blankWidth;
            }   
        }
        //Start a new row
        currentY += tileHeight;
        currentX = 0;
    }
    el.innerHTML = html.join('');
}

请参阅此小提琴以获取完整的代码清单..
http://jsfiddle.net/7Yprn/

请注意，行高是固定的，导致 50x100px 垂直矩形，而不是您在原始问题中请求的 50x50px 间隙：

于 2013-03-03T00:37:11.523 回答