2017-11-15
サイコロを転がすよ！
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://snowdrops.starfree.jp/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://snowdrops.starfree.jp/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://snowdrops.starfree.jp/wnako3_test/11_dice_test.html
結局、転がるだけですｗ