2017-11-15
サイコロを転がすよ!
http://news.mynavi.jp/series/nadeshiko/015/
乱数の使い方は、6回目のかずあてゲームでやったじゃーん・・・と思ったら、その乱数とゆうものを、いかにしてコンピューターで生成するのか的な、より突っ込んだ内容になってました。
うおおぉぅ、ナンカヨクワカラン・・・(*_*;;;
ケド、ちょっと賢くなった気がする(気のせい;)
いいんだい!
仕組みなんか知らなくたって、サイコロは作れるもね~(こら;)
とゆうわけで(?!)大好きなサイコロを転がしてみようと思う。
CSS3のanimationを使って、文字通り転がします。
って言っても3D(立方体)ではなく2D(正方形)ですケドね~。
単に要素に回転を掛けながら移動させるのは、例によってなでしこなくても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>CSS3てすと~アニメーションで転がす</H1> <HR> <div id="dice">*</div> <HR>
http://snowdrops.starfree.jp/wnako3_test/11_animation_test.html
#diceに設定したanimationプロパティでは「roll-dice」とゆうキーフレームに従って、1秒間かけて、最初から最後まで一定の速さで変化する的な指定になっています。
最初の状態(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);} /* 1st頂点 */ 40% {transform: translate(-250px,0px) rotate(270deg);} /* 1st着地点 */ 50% {transform: translate(-200px,-40px) rotate(360deg);} /* 2nd頂点 */ 60% {transform: translate(-150px,0px) rotate(450deg);} /* 2nd着地点 */ 70% {transform: translate(-100px,-20px) rotate(540deg);} /* 3rd頂点 */ 80% {transform: translate(-50px,0px) rotate(630deg);} /* 3rd着地点 */ 100%{transform: translate(0px,0px) rotate(720deg);} /* 終了位置 */ }
http://snowdrops.starfree.jp/wnako3_test/11_animation_test2.html
でも、地面から頂点までの指定が直線だから、なんか動きがカクカクしてんだよね~;
こうゆうのも、知恵とセンスが問われるところなんだろう・・・><
・・・でっ、取りあえずボタンを押したらサイコロが転がるプログラム。
<script type="なでしこ"> #----------------------------------------------------------------------- # サイコロ #----------------------------------------------------------------------- #-----宣言-------------------------------------------------------------- 出目は空配列。 サイコロ回転数=-1。 #---ダイス設定----- ダイスサイズ=80。ダイス線太=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。 違えば、角丸サイズ=0。 「#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設定。 ここまで。 ●サイコロ振 (回転回数)回 rは6の乱数。 出目[回数-1]はr+1。 ここまで。 サイコロ回転数=0。 「#dice」の「animation」に「roll-dice {回転秒数}s linear」をDOMスタイル設定。 サイコロ描画。 ここまで。 ●サイコロ描画 もし、(サイコロ回転数≧0)かつ(サイコロ回転数<回転回数)ならば、 「#dice」の「background」にダイス色[出目[サイコロ回転数]-1][0]をDOMスタイル設定。 「#dice」の「color」にダイス色[出目[サイコロ回転数]-1][1]をDOMスタイル設定。 「#dice」の「border」に「{ダイス線太}px solid 」&ダイス色[出目[サイコロ回転数]-1][2]をDOMスタイル設定。 「#dice」に出目[サイコロ回転数]をDOMテキスト設定。 サイコロ回転数=サイコロ回転数+1。 「サイコロ描画」を(回転秒数/回転回数)秒後。 違えば、 「#dice」の「animation」に空をDOMスタイル設定。 サイコロ回転数=-1。 ここまで。 ここまで。 #----------------------------------------------------------------------- </script> <H1>なでしこ3てすと~サイコロを振る</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
結局、転がるだけですw