Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2017/11/15 (水)

サイコロを転がすよ!

| 15:17 | サイコロを転がすよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - サイコロを転がすよ! - 雪乃☆雫のなでしこ日和 サイコロを転がすよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 マイナビ連載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://www.geocities.jp/snowdrops890/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://www.geocities.jp/snowdrops890/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://www.geocities.jp/snowdrops890/wnako3_test/11_dice_test.html

 結局、転がるだけですw

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20171115