雪乃☆雫のなでしこ日和

サイコロを転がすよ！

なでしこ３, サイコロ | 15:17 |

　マイナビ連載１５回目は、サイコロと擬似乱数についてでした。

http://news.mynavi.jp/series/nadeshiko/015/

　乱数の使い方は、６回目のかずあてゲームでやったじゃーん・・・と思ったら、その乱数とゆうものを、いかにしてコンピューターで生成するのか的な、より突っ込んだ内容になってました。

　うおおぉぅ、ナンカヨクワカラン・・・（＊＿＊；；；

　ケド、ちょっと賢くなった気がする（気のせい；）

　いいんだい！

　仕組みなんか知らなくたって、サイコロは作れるもね～（こら；）

　とゆうわけで（？！）大好きなサイコロを転がしてみようと思う。

　CSS3のanimationを使って、文字通り転がします。

　って言っても３Ｄ（立方体）ではなく２Ｄ（正方形）ですケドね～。

　単に要素に回転を掛けながら移動させるのは、例によってなでしこなくてもCSSだけで可能でした。

<script type="なでしこ">
#-----------------------------------------------------------------------
# サイコロを転がしたい
#-----------------------------------------------------------------------
</script>

<style type="text/css">
<!--
#dice {
	margin:auto; width:50px; height:50px; background:#FF9999;
	animation:roll-dice 1s linear;
}
@keyframes roll-dice{
	0% {transform: translate(-350px,0px) rotate(0deg);}     /* 初期位置 */
	100%{transform: translate(0px,0px) rotate(360deg);}     /* 終了位置 */
}
 -->
</style>

<H1>ＣＳＳ３てすと～アニメーションで転がす</H1>
<HR>
<div id="dice">＊</div>
<HR>

http://www.geocities.jp/snowdrops890/wnako3_test/11_animation_test.html

　#diceに設定したanimationプロパティでは「roll-dice」とゆうキーフレームに従って、１秒間かけて、最初から最後まで一定の速さで変化する的な指定になっています。

　最初の状態(0%)と最後の状態(100%)を指定しただけで、このよーに転がります！

　キーフレームは、アニメーションの開始（0%）から完了(100%)までを自由に区切って、それぞれの時点のスタイルを設定することになっていて、細かく区切って指定すると、ただ転がすだけじゃなく、こんなふうにして弾ますこともできました。

@keyframes roll-dice{
	0% {transform: translate(-350px,-100px) rotate(45deg);}     /* 初期位置 */
	10% {transform: translate(-350px,0px) rotate(90deg);}       /* 落下地点 */
	25% {transform: translate(-300px,-60px) rotate(180deg);}    /* １ｓｔ頂点 */
	40% {transform: translate(-250px,0px) rotate(270deg);}      /* １ｓｔ着地点 */
	50% {transform: translate(-200px,-40px) rotate(360deg);}    /* ２ｎｄ頂点 */
	60% {transform: translate(-150px,0px) rotate(450deg);}      /* ２ｎｄ着地点 */
	70% {transform: translate(-100px,-20px) rotate(540deg);}    /* ３ｒｄ頂点 */
	80% {transform: translate(-50px,0px) rotate(630deg);}       /* ３ｒｄ着地点 */
	100%{transform: translate(0px,0px) rotate(720deg);}         /* 終了位置 */
}

http://www.geocities.jp/snowdrops890/wnako3_test/11_animation_test2.html

　でも、地面から頂点までの指定が直線だから、なんか動きがカクカクしてんだよね～；

　こうゆうのも、知恵とセンスが問われるところなんだろう・・・＞＜

　・・・でっ、取りあえずボタンを押したらサイコロが転がるプログラム。

<script type="なでしこ">
#-----------------------------------------------------------------------
# サイコロ
#-----------------------------------------------------------------------
#-----宣言--------------------------------------------------------------
出目は空配列。
サイコロ回転数＝-1。

#---ダイス設定-----
ダイスサイズ＝８０。ダイス線太＝１。角丸＝オン。
ダイス色＝[
["#FFBBBB","#CC3333","#330000"],
["#BBFFBB","#33CC33","#003300"],
["#BBBBFF","#3333CC","#000033"],
["#FFBBFF","#CC33CC","#330033"],
["#FFFFBB","#CCCC33","#333300"],
["#BBFFFF","#33CCCC","#003333"]
]// "地色","文字色" ,"線色"

#---ダイスアニメーション設定-----
回転秒数＝0.8。
回転回数＝回転秒数*10。
初期位置＝「-350px,0px」
終了位置＝「200px,240px」
初期角度＝0。
終了角度＝1080。

#-----メイン------------------------------------------------------------
「#play」の「onclick」に「サイコロ振」をDOMイベント設定。
サイコロ初期化。

#-----------------------------------------------------------------------
●サイコロ初期化
　　ダイス文字サイズ＝ダイスサイズ/3*2。
　　もし、角丸＝オンならば、角丸サイズ＝ダイスサイズ/4。
　　違えば、角丸サイズ＝０。

　　「#dice」の「margin」に「auto」をDOMスタイル設定。
　　「#dice」の「width」に「{ダイスサイズ}px」をDOMスタイル設定。
　　「#dice」の「height」に「{ダイスサイズ}px」をDOMスタイル設定。
　　「#dice」の「text-align」に「center」をDOMスタイル設定。
　　「#dice」の「line-height」に「{ダイスサイズ}px」をDOMスタイル設定。
　　「#dice」の「font-size」に「{ダイス文字サイズ}px」をDOMスタイル設定。
　　「#dice」の「border-radius」に「{角丸サイズ}px」をDOMスタイル設定。

　　「#dice」の「transform」に「translate({終了位置}) rotate({終了角度}deg)」をDOMスタイル設定。
　　サイコロ回転設定＝「@keyframes roll-dice{波カッコ}
	0%  {波カッコ}transform: translate({初期位置}) rotate({初期角度}deg);{波カッコ閉じ}     /* 初期位置 */
	100%{波カッコ}transform: translate({終了位置}) rotate({終了角度}deg);{波カッコ閉じ}     /* 終了位置 */
{波カッコ閉じ}」
　　「#style」にサイコロ回転設定をDOM_HTML設定。
ここまで。

●サイコロ振
　　（回転回数）回
　　　　ｒは６の乱数。
　　　　出目[回数-1]はｒ＋１。
　　ここまで。
　　サイコロ回転数＝０。
　　「#dice」の「animation」に「roll-dice {回転秒数}s linear」をDOMスタイル設定。
　　サイコロ描画。
ここまで。

●サイコロ描画
　　もし、(サイコロ回転数≧０)かつ(サイコロ回転数＜回転回数)ならば、
　　　　「#dice」の「background」にダイス色[出目[サイコロ回転数]-1][0]をDOMスタイル設定。
　　　　「#dice」の「color」にダイス色[出目[サイコロ回転数]-1][1]をDOMスタイル設定。
　　　　「#dice」の「border」に「{ダイス線太}px solid 」&ダイス色[出目[サイコロ回転数]-1][2]をDOMスタイル設定。
　　　　「#dice」に出目[サイコロ回転数]をDOMテキスト設定。
　　　　サイコロ回転数＝サイコロ回転数＋１。
　　　　「サイコロ描画」を（回転秒数/回転回数）秒後。
　　違えば、
　　　　「#dice」の「animation」に空をDOMスタイル設定。
　　　　サイコロ回転数＝-1。
　　ここまで。
ここまで。
#-----------------------------------------------------------------------
</script>

<H1>なでしこ３てすと～サイコロを振る</H1>
<HR>
<style id="style"></style>
<div id="base" style="margin:auto; height:400px;">
  <button id="play">サイコロを振る</button>
  <div id="dice"></div>
</div>
<HR>

http://www.geocities.jp/snowdrops890/wnako3_test/11_dice_test.html

　結局、転がるだけですｗ

ツイートする