2

javascriptを使用していくつかのdivを行に表示しようとしています。これを行うために、私は次のJScodeを持っています：

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

1の場合は赤いdivブロックが表示され、2の場合は青いdivブロックが表示され、0の場合はブロックが表示されません。これはすべて大丈夫です。divは100x100pxで、生成される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 位置を追跡し、これをタイルに割り当てる必要があります。

実装方法に関係なく、アルゴリズム的に、独自の [i,j] 位置 (そこから x、y 座標と幅を計算できる) を「知っている」タイルを持つ 100x100 ピクセルの正方形の定義済みグリッドを持つことは非常に異なります。 nxm px タイルのグリッドを持つことに。

おそらく、i,j 位置ではなく、x/y 座標をタイル オブジェクトに渡すことを試すことができますか?

更新：これで遊ぶことに抵抗できませんでした.. 

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/

元の質問で要求した 50x50px のギャップとは対照的に、行の高さが固定されているため、50x100px の垂直方向の長方形になることに注意してください。

于 2013-03-03T00:37:11.523 に答える