0

私が取り組んでいるブラウザベースのゲームでは、ユーザーが自分のユニットを表示できるようにしたいと考えています。ユーザーは、CSSプロパティ.pngを使用してレイヤー化された透明な画像で表される複数のユニットを制御できます。z-indexPNG の名前は MySQL データベースに保存されます。私が使用した単一のユニットを表示する方法は、絶対配置を使用してスプライトの 4 つのレイヤー (肌、服、髪、顔) すべてを配置し、z-index プロパティを設定することです。問題は、これを無数のユニットに使用できないことです。そうしないと、すべて同じ場所に配置されるためです。

ユニットを動的に配置して、行ごとに 5 つ、またはそれらの線に沿って何かを表示できるようにする必要があります。これが私がやろうとしていることの例です（悪い芸術を許してください）：

4

1 に答える 1

0

より良い構造のために、ユニットごとに div を用意する必要があります。ユニットの div には、4 つのレイヤーがあります。

1 つのユニットの HTML:

<div id="character1" class="character">
    <div class="charlayer1"></div>
    <div class="charlayer2"></div>
    <div class="charlayer3"></div>
    <div class="charlayer4"></div>
</div>

CSS:

.character {
    position: absolute;
}

#character1 {
    left: 60%;
    top: 200px;
}

.charlayer1, .charlayer2, .charlayer3, .charlayer4 {
    position: absolute;
    top:0;
    left:0;
}

.charlayer1 {z-index:-4;}
.charlayer2 {z-index:-3;}
.charlayer3 {z-index:-2;}
.charlayer4 {z-index:-1;}

これで、同じ html 構造を使用して複数のユニットを追加できますが、その ID と位置を変更できます。

それが役に立てば幸い！もっと詳しく説明できますが、レイヤーで正確に何をしたいのかを知る必要があります。

于 2012-07-23T13:17:43.497 に答える