サイコロ１　～canvasにサイコロを描画するよ！～

6867 ワード
canvas なでしこ 日本語プログラミング言語 HTML5 なでしこ3 HTML5 テキストリンク

　ゲームを作るなら乱数！　乱数と言えばサイコロ！
　サイコロ……好き❤

一番簡単なサイコロ

６の乱数に１を足して表示。

　Aの乱数とすると、０からA-1までのいずれかの整数が返ります。０スタートなので、サイコロにするには１を足してやります。そんだけ！

なでしこ3マニュアル > plugin_math/乱数

　サイコロについては、マイナビにクジラ飛行机様の記事がありますので是非お読み下さい！（丸投げか；）

ゼロからはじめてみる日本語プログラミング「なでしこ」
　第6回　数当てゲームを作ってみよう
　第15回　サイコロとさまざまな擬似乱数

絵が欲しい

　でもでも、ただ数字が表示されたって面白くないから、やっぱりサイコロらしい絵が欲しいですよね～。見た目的に。
　カッコいい画像でも用意して表示させればいいだけなんですけど、カッコいい画像が用意出来ないｖ３の描画命令をお試ししたい。

なでしこ3マニュアル > plugin_browser/描画

　描画の命令は、なでしこv1とは大分変わっていますのでご注意です。
　個人的に言うと、引数の付け方なんかはｖ３の方が使いやすい。

canvasを使う

　なでしこv3では、HTML5のcanvasが使えます。
　簡易エディタだと、元からcanvasが用意されていて、何もしなくても簡単にお試し出来ます☆
　でももし自分で用意したHTMLでやりたい場合は、ちょっと準備が必要です。

canvasの設置

　無い袖は振れず無いキャンバスに描画は出来ないので、設置します。
　HTMLに直接タグを設置してもいいし、なでしこでHTML設定することも出来ます。

DOM親要素に「<canvas id="dice_canvas"></canvas>」をHTML設定。

※なでしこから操作するためのIDを振ります。

描画開始

　HTMLにcanvasは１つだけとは限らないので、IDを指定して描画開始します。（DOM要素取得して、それへ描画開始でもOK）

「#dice_canvas」へ描画開始。

　簡易エディタでは、canvasがはじめから用意されていて、描画開始も行われているので、すぐに描画命令を使うことが出来るんですね☆

サイコロに必要なのは□と○

　平面ならばサイコロって、外枠の四角と、あとは目の円が描ければいいだけ。
　四角描画は、左上の座標と四角の幅と高さを配列で指定、円描画は中点の座標の配列と半径を指定するだけ☆
　目に当たる、円の中点の座標が問題だよね。
　こんな感じか……

X＝30。Y＝20。辺長＝60。マス＝辺長/4。目半径＝辺長/10。

黒色に線色設定。白色に塗り色設定。３に線太さ設定。
[X,Y,辺長,辺長]に四角描画。　　　　　　//枠線

黒色に線色設定。黒色に塗り色設定。1に線太さ設定。
[X+マス*1,Y+マス*1]に目半径の円描画。　//左上　2,3,4,5,6
[X+マス*3,Y+マス*1]に目半径の円描画。　//右上　4,5,6
[X+マス*1,Y+マス*2]に目半径の円描画。　//左中　6
[X+マス*2,Y+マス*2]に目半径の円描画。　//中点　1,3,5
[X+マス*3,Y+マス*2]に目半径の円描画。　//右中　6
[X+マス*1,Y+マス*3]に目半径の円描画。　//左下　4,5,6
[X+マス*3,Y+マス*3]に目半径の円描画。　//右下　2,3,4,5,6

　まだサイコロじゃありません。
　取りあえず必要の目を全部描いてみた。（賢い皆々様ならお試しするまでも無くお分かりでしょうが、Ｈみたいな形になってます）
　出目が１なら中点に、２なら左上と右下（または右上と左下）に...と描いていけば良さそう。

もしもし

　簡単なのは条件分岐で６目分並べることかな？
　こんなふうに。

X＝30。Y＝20。辺長＝60。マス＝辺長/4。目半径＝辺長/10。

黒色に線色設定。白色に塗り色設定。３に線太さ設定。
[X,Y,辺長,辺長]に四角描画。　　　　　　//枠線

黒色に線色設定。黒色に塗り色設定。1に線太さ設定。
((６の乱数)+1)のサイコロ描画
●（数の）サイコロ描画
　もし、数が１ならば、
　　[X+マス*2,Y+マス*2]に目半径の円描画。　//中点
　違えば、もし、数が２ならば、
　　[X+マス*1,Y+マス*1]に目半径の円描画。　//左上
　　[X+マス*3,Y+マス*3]に目半径の円描画。　//右下
　違えば、もし、数が３ならば、
　　[X+マス*1,Y+マス*1]に目半径の円描画。　//左上
　　[X+マス*2,Y+マス*2]に目半径の円描画。　//中点
　　[X+マス*3,Y+マス*3]に目半径の円描画。　//右下
　違えば、もし、数が４ならば、
　　[X+マス*1,Y+マス*1]に目半径の円描画。　//左上
　　[X+マス*3,Y+マス*1]に目半径の円描画。　//右上
　　[X+マス*1,Y+マス*3]に目半径の円描画。　//左下
　　[X+マス*3,Y+マス*3]に目半径の円描画。　//右下
　違えば、もし、数が５ならば、
　　[X+マス*1,Y+マス*1]に目半径の円描画。　//左上
　　[X+マス*3,Y+マス*1]に目半径の円描画。　//右上
　　[X+マス*2,Y+マス*2]に目半径の円描画。　//中点
　　[X+マス*1,Y+マス*3]に目半径の円描画。　//左下
　　[X+マス*3,Y+マス*3]に目半径の円描画。　//右下
　違えば、もし、数が６ならば、
　　[X+マス*1,Y+マス*1]に目半径の円描画。　//左上
　　[X+マス*3,Y+マス*1]に目半径の円描画。　//右上
　　[X+マス*1,Y+マス*2]に目半径の円描画。　//左中
　　[X+マス*1,Y+マス*3]に目半径の円描画。　//左下
　　[X+マス*3,Y+マス*2]に目半径の円描画。　//右中
　　[X+マス*3,Y+マス*3]に目半径の円描画。　//右下
　ここまで。
ここまで。

　うーん、わかりや…す……？
　……てか、長っ！
　いろいろとムダっぽい；
　ま、なにしろこうゆうコトだろう。

配列

　もっと短く書ける賢い方法はないかなあ……？
　と、いうわけで……

　前のコードとかを眺めていると気付くけど、サイコロの目の位置って、３×３のテーブルみたいなコトだよね。（気付きたいので、計算上は必要無いけど、＊１も書いてあるｗ）

1 2 3
1 1,1 2,1 3,1
2 1,2 2,2 3,2
3 1,3 2,3 3,3

　[2,1]と[2,3]は使われていない。
　この目の位置の座標を各数ごと配列にして、繰り返しでそれを参照して描画するように関数を作ったら、描画の命令はいっこで良くなった（喜）

X＝30。Y＝20。辺長＝60。マス＝辺長/4。目半径＝辺長/10。

目位置＝[[[2,2]],[[1,1],[3,3]],[[1,1],[2,2],[3,3]],[[1,1],[1,3],[3,1],[3,3]],[[1,1],[1,3],[2,2],[3,1],[3,3]],[[1,1],[1,2],[1,3],[3,1],[3,2],[3,3]]]

((６の乱数)+1)のサイコロ描画。
●（数の）サイコロ描画
　黒色に線色設定。白色に塗り色設定。３に線太さ設定。
　[X,Y,辺長,辺長]に四角描画。
　もし、数が１ならば、目色は赤色。
　違えば、目色は黒色。
　目色に線色設定。目色に塗り色設定。1に線太さ設定。
　（数）回
　　[X+マス*目位置[数-1][回数-1][0],Y+マス*目位置[数-1][回数-1][1]]に目半径の円描画。
　ここまで。
ここまで。

動作確認

　実行ボタンを押すたびに、サイコロを振ります。
　もっと賢い手立てがあるかな？
　わたしの知恵では、こんなところ。

まとめ

　サイコロと言いつつサイコロの説明は丸投げにして、canvasを使って描画することとか書こうとしたけど、たいして説明にもなってない（汗）
　そしてむしろ、配列の比重が大きくなった気もする。
　条件分岐とか配列とか繰り返しとか関数とかとかの説明はこちら（丸投げ；）

文法について

つづきます

　サイコロの角を丸めたい……
　なでしこ３には、角丸四角がないんですよね～(´・ω・｀)
　何か良い手立てはあるかな？（Javascriptなら出来るよとかはナシで）
　と、ゆうわけで今度はCSSを使ってサイコロ描きます。
　canvasやCSSを覚えると、ぽい！　ものが作れるようになって楽しいんだよね～♪

次の記事：『サイコロ２　～CSSを使って角丸サイコロを作るよ！～』

UIViewのautoresizingMask
HashMapの面接問題を知っておく必要があります