【CSS】ブロック遊び【実験】
どうも！LSSです！！
【CSS】サイコロ回転【preserve-3d試してみた】 - Little Strange Software
から色々試しているCSSの立体表現ですが、立体を見ているとつい連想しちゃうのが、
マインクラフトです。
CSSでマインクラフトが作れる、というわけではありませんが、ごくごく小規模な、それっぽいブロックを並べる事ぐらいならできるかな？と試みてみました。
ブロック遊び
コード
<style>
@keyframes kaiten{
0%,30%{transform:rotateX(-10deg) rotateY(-10deg);}
100%{transform:rotateX(-10deg) rotateY(350deg);}
}
#gamen{
position:relative;
transform-style:preserve-3d;
width:300px;
height:300px;
overflow:hidden;
border:1px solid black;
}
#gameni{
position:absolute;
transform-style:preserve-3d;
width:300px;
height:300px;
animation:10s kaiten infinite alternate;
}
.cube{
position:absolute;
transform-style:preserve-3d;
width:50px;
height:50px;
}
.cube div{
position:absolute;
box-sizing:border-box;
width:100%;
height:100%;
}
.cbs1{transform:translateZ(25px);}
.cbs2{transform:rotateY(90deg) translateZ(25px);}
.cbs3{transform:rotateX(90deg) translateZ(25px);}
.cbs4{transform:rotateX(-90deg) translateZ(25px);}
.cbs5{transform:rotateY(-90deg) translateZ(25px);}
.cbs6{transform:rotateY(180deg) translateZ(25px);}
/*テクスチャ*/
.weed div{
border:1px solid #dddddd;
border-radius:5px;
}
.weed .cbs1,.weed .cbs2,.weed .cbs5,.weed .cbs6{
background-image:linear-gradient(#89cb9e 25%,brown 30%);
}
.weed .cbs3{
background-color:#89cb9e;
}
.weed .cbs4{
background-color:brown;
}
.stone div{
border:1px solid #dddddd;
background-color:#888888;
border-radius:5px;
}
.water div{
background-color:#0000ff80;
}
</style>
<div id="gamen">
<div id="gameni"></div>
</div>
<p>
<script>
txt='';
blks=[
[0,0,0,'weed'],
[1,0,0,'weed'],
[2,0,0,'weed'],
[3,0,0,'weed'],
[4,0,0,'weed'],
[5,0,0,'weed'],
[0,0,1,'water'],
[1,0,1,'water'],
[2,0,1,'water'],
[3,0,1,'stone'],
[4,0,1,'weed'],
[5,1,1,'weed'],[5,0,1,'stone'],
[0,0,2,'weed'],
[1,0,2,'weed'],
[2,0,2,'water'],
[3,0,2,'stone'],
[4,1,2,'weed'],[4,0,2,'stone'],
[5,1,2,'weed'],[5,0,2,'stone'],
[0,0,3,'weed'],
[1,0,3,'weed'],
[2,0,3,'water'],
[3,0,3,'water'],
[4,1,3,'weed'],[4,0,3,'stone'],
[5,2,3,'weed'],[5,1,3,'stone'],[5,0,3,'stone'],
[0,1,4,'weed'],[0,0,4,'stone'],
[1,1,4,'weed'],[1,0,4,'stone'],
[2,0,4,'weed'],
[3,0,4,'water'],
[4,0,4,'water'],
[5,1,4,'weed'],[5,0,4,'water'],
[0,1,5,'weed'],[0,0,5,'stone'],
[1,0,5,'weed'],
[2,0,5,'stone'],
[3,0,5,'stone'],
[4,1,5,'weed'],[4,0,5,'stone'],
[5,0,5,'weed']
];
for(i=0;i<blks.length;i++){
txt+='<div id="cb'+i+'" class="cube '+blks[i][3]+'" style="transform:translateX('+(blks[i][0]*50)+'px) translateY('+(200-blks[i][1]*50)+'px) translateZ('+(-blks[i][2]*50)+'px);">';
for(j=1;j<7;j++){
txt+='<div class="cbs'+j+'"></div>';
}
txt+='</div>';
}
gameni.innerHTML=txt;
</script>
JavaScriptを使用していますが
CSSのみでの表現は可能ですが、１ブロックあたり９行ぐらいのコード…とブロックが増えるとコード量がとんでもない事になるので、ブロックのコードの書き出しにJavaScriptを使う事で簡略化しました。
コード中にたくさん並んでいる、
[0,0,0,'weed'],
がひとつのブロックに相当します。（横座標・高さ・奥行き座標・ブロックの種類）
ブロックの種類として、「草」「石」「水」を用意しましたが、用意している部分は
草
.weed div{
border:1px solid #dddddd;
border-radius:5px;
}
.weed .cbs1,.weed .cbs2,.weed .cbs5,.weed .cbs6{
background-image:linear-gradient(#89cb9e 25%,brown 30%);
}
.weed .cbs3{
background-color:#89cb9e;
}
.weed .cbs4{
background-color:brown;
}
石
.stone div{
border:1px solid #dddddd;
background-color:#888888;
border-radius:5px;
}
水
.water div{
background-color:#0000ff80;
}
の部分で、同じように並べて種類を増やす事ができます。
（草ブロックだけ、面ごとの見た目を変えるために長くなっています^^;）
あとがき
ブログで使えるネタ、というわけではありませんが、「Web上で立方体を組み合わせて立体的な造形を作る事ができる」という事が確認できました、という内容ですｗ
CSSでの立体表現は「できるけれど向いているというわけでもない」という感じで、例えばこうして立方体を並べるのも、「400個程度ならいける」ような話を見かけました。
マイクラじゃなくても、ブログで使えるネタでなくても、なにかちょっとしたゲームに応用できたら面白いかもですね。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
