サイコロ３と言えば、自律神経完全破壊！……ではなく。
サイコロと言えば数当てゲームです！
数当てゲームについては、oza-jvさまが13日目の記事で実に丁寧な解説をして下さり、14日目には音まで出るようになっていて（ｖ１）、なんだかめちゃくちゃネタ被り感がありますが、今回わたしがやっていこうと思うのは、ｖ３での簡単なUIの作成やイベントの追加です。
ちょっとこういうのが加わるだけで、一気にゲームっぽさがアップして、ご満悦なのです♪
oza-jvさまご自身が最後に、わたしの角丸サイコロと組み合わせたら、見た目も楽しい数当てゲームになりそうと仰って下さっていますので、平にご容赦頂いてやっていきますですよ☆
というわけで、数当てゲームについては既知のものとしてやっていきますので、是非先に上記の記事（特に１３日目）をお読み下さい！（また説明丸投げ）
まずは練習
なでしこ3マニュアル > plugin_browser/DOM部品操作
なでしこ3マニュアル > plugin_browser/DOM操作
ボタンの作成
ボタンを作るのは、とっても簡単。
「挨拶」のボタン作成。
こんだけ！
たったこれだけで、挨拶、という文字の入った一般的なボタンが現れます♪
（見た目はブラウザや、サイトに設定されているCSSに依存するので、変えたい場合はDOMスタイル設定などで頑張ります）
イベントの設定
もちろんこれだけでは単にボタンが出るだけで、なんにもできません。
それで、ボタンに名前をつけて、そのボタンをクリックした時には何をするのかというプログラムを設定する必要があります。
「挨拶」のボタン作成して、挨拶ボタンに代入。
挨拶ボタンをクリックした時には、
「こんにちは！」と言う。
ここまで。
マニュアルに、同等のサンプルがありますので、それでお試ししてみて下さい。
ボタンをクリックしたらサイコロを振る
同様にして、サイコロ振るボタンを作り、それをクリックした時にサイコロを振るようにしてやれば、サイコロを振るたびにプログラムを実行し直す必要は無いわけです。
簡易エディタだと、エディタの実行ボタンを押すか、自分で設置したサイコロ振るボタンを押すかで、どっちもボタンを押すという行為なので別に大差ない感じですが、HTML埋め込みや、ブログのガジェットなんかにした場合には、プログラムの再実行は画面の再読込になりますから全然違います。
出目＝0。
C＝0。//何が出るかなの回数カウンタ。
「サイコロを振る」のボタン作成して、サイコロボタンに代入。
サイコロボタンをクリックした時には
C=0。
0.1秒タイマー開始した時には(T)
出目＝６の乱数に１を足す。
出目のサイコロ表示。
C=C+1。
もし、C=8ならば、Tのタイマー停止。
ここまで。
ここまで。
こんな感じ？（部分）
ボタンのイベントの中に、サイコロを振るタイマーを突っ込んだだけですね。
数当てをマウスで行いたい
いちいち数字をキー入力するのは面倒ですよね～？
ポチポチッと選択して回答したいもんです。
ボタンを６つ並べてもいいんですけど、今回はあえて、canvas上の座標を取得して判断してみる。
canvasに描画
サイコロ１でcanvasに描画したことを思い出しつつ、50×50のマス目を繰り返しで四角描画して、数字を入れてく。
マス＝50。黒色に線色設定。
「bold 40px sans-serif」に描画フォント設定。
６回
白色に塗り色設定。
[マス*(回数-1),0,マス,マス]へ四角描画。
黒色に塗り色設定。
[マス*(回数-1)+10,40]へ回数を文字描画。
ここまで。
マス目のサイズは変数にしたケド、文字描画の位置調整が決め打ちで、意味ないっていうね（＾▽＾；
文字描画で指定する位置は左下。正確にはalphabetic(アルファベットのベースライン)の左端のようです。ｖ１とは異なるのでご注意です。
（文中で文字サイズを変更してもベースが揃っているから位置調整しなくて良いのは助かりますね☆）
イベント
クリックは、マウスのボタンを押して離すというのがセットになっているイベントなので、座標は取れないため、マウス押した時のイベントを使います。
描画中キャンバスをマウス押した時には、
もし、（マウスX＞マス*６）または（マウスY＞マス）でなければ、
予想は（マウスX/マス+1）を切捨て。
予想を言う。
ここまで。
ここまで。
座標はマウスXとマウスYに取得されます。
マス目の範囲外を押した時には無視するようにします。
範囲内なら、マス目は全て横並びにしたので、マウスXの価をマス目の幅で割れば、どれを押したのかが分かりますよね～☆
関数
押したところは見た目でそれと分かるように色を変えたいですよねー☆
いちばん楽な方法として、描画の部分を関数にして、マウス押すたびまるっと描き換えることにしました。
引数に押した数字を与えて、その回だけ塗り色を変えます。
●（数で）盤描画
６回
もし、回数＝数ならば、青色に塗り色設定。
違えば、白色に塗り色設定。
[マス*(回数-1),0,マス,マス]へ四角描画。
黒色に塗り色設定。
[マス*(回数-1)+10,40]へ回数を文字描画。
ここまで。
ここまで。
つづきます
引っ張るようなアレでは全くないのですが、思ったよりも長くなったのと、時間切れ気味なので、続きはまた明日orz
全部組み合わせて、ちゃんとゲームとして動くようにします。