【Merry】ブロックで作ったクリスマスツリー【Christmas】

　どうも！LSSです！！

ちょうど一年前の記事、
【Merry】聖なる夜に【Christmas】
と同様、この記事限定の背景仕様でお送りします。

年に一度の特別な日。

今年はどんなネタで行こうかな、と考えていました。

クリスマスツリー（ブロック製）

スライダーを左右に動かすと、違う角度から眺める事ができます^^

以前の記事の追加改変です

little-strange.hatenablog.com

↑の記事から、ブロックの種類を増やし、木・葉・星を表現してみました。（星はちょっとどうよ？って気がしなくもない）

↓少々長いですが、コードを表示してみたい方はクリックしてみてください。（このコードはブロックの仕組みのみで、このページの特殊装丁はまた別ですが。）

コードを表示する

<style>
#gamen{
position:relative;
transform-style:preserve-3d;
width:100%;
height:500px;
overflow:hidden;
border:1px solid black;
}
#gameni{
position:absolute;
transform-style:preserve-3d;
width:100%;
height:500px;
transform:rotateX(-10deg) rotateY(-10deg);
}
.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;}
.snow div{
border:1px solid #dddddd;
border-radius:5px;
}
.snow .cbs1,.snow .cbs2,.snow .cbs5,.snow .cbs6{
background-image:linear-gradient(#ffffff 25%,brown 30%);
}
.snow .cbs3{background-color:#ffffff;}
.snow .cbs4{background-color:brown;}
.stone div{
border:1px solid #dddddd;
background-color:#888888;
border-radius:5px;
}
.water div{
background-color:#0000ff80;
}
.leaf div{
background-image:repeating-conic-gradient(#00400000 45deg,#00400080 90deg 180deg);
background-size:15px 15px;
}
.wood .cbs1,.wood .cbs2,.wood .cbs5,.wood .cbs6{
background-image:repeating-linear-gradient(90deg,black 3%,brown 5% 20%,black 23%);
}
.wood .cbs3,.wood .cbs4{background-image:radial-gradient(#ffffaa 30%,black 35%,#ffffaa 36% 66%,black 71%,#ffffaa 72% 100%);}
.star div{
background-image:repeating-conic-gradient(from 60deg,#ffff0000,#ffff00ff 45deg,#ffff0000 90deg);
}
</style>
<div id="gamen">
<div id="gameni"></div>
</div>
<p><input id="rg3d" style="width: 100%;" max="360" min="-360" type="range" value="-10" /></p>
<p>
<script>
txt='';
blks=[
[0,0,0,'weed'],
[1,0,0,'snow'],
[2,0,0,'weed'],
[3,0,0,'snow'],
[4,0,0,'snow'],
[5,0,0,'weed'],
[0,0,1,'water'],
[1,0,1,'water'],
[2,2,1,'leaf'],[2,0,1,'water'],
[3,4,1,'leaf'],[3,3,1,'leaf'],[3,2,1,'leaf'],[3,0,1,'stone'],
[4,2,1,'leaf'],[4,0,1,'snow'],
[5,1,1,'snow'],[5,0,1,'stone'],
[0,0,2,'snow'],
[1,0,2,'snow'],
[2,4,2,'leaf'],[2,3,2,'leaf'],[2,2,2,'leaf'],[2,0,2,'water'],
[3,7,2,'star'],[3,6,2,'leaf'],[3,5,2,'leaf'],[3,4,2,'leaf'],[3,3,2,'wood'],[3,2,2,'wood'],[3,1,2,'wood'],[3,0,2,'stone'],
[4,4,2,'leaf'],[4,3,2,'leaf'],[4,2,2,'leaf'],[4,0,2,'stone'],
[5,1,2,'snow'],[5,0,2,'stone'],
[0,0,3,'weed'],
[1,0,3,'weed'],
[2,2,3,'leaf'],[2,0,3,'water'],
[3,4,3,'leaf'],[3,3,3,'leaf'],[3,2,3,'leaf'],[3,0,3,'water'],
[4,2,3,'leaf'],[4,1,3,'snow'],[4,0,3,'stone'],
[5,1,3,'stone'],[5,0,3,'stone'],
[0,1,4,'snow'],[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,'snow'],[5,0,4,'water'],
[0,1,5,'snow'],[0,0,5,'stone'],
[1,0,5,'weed'],
[2,0,5,'stone'],
[3,0,5,'stone'],
[4,1,5,'snow'],[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('+(400-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;
rg3d.addEventListener('input',function(){gameni.style.transform='rotateX(-10deg) rotateY('+rg3d.value+'deg)';},false);
</script>

そんなクリスマスイブ

雪びゅんびゅんな去年のネタに比べると、ちょっと大人しめでしたね。

なにか飛んでるような気がしますか？

多分、気のせいでしょう^^

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^