と、いうわけで、昨日の続きです。
数当てゲームとして完成させる
必要な材料は大体そろっているので、組み合わせてゲームとして動くようにします。
ゲーム内容的にはテキストベースの場合と同じなんですが、まず予想した数字を選択して、それからサイコロを自分で振るという流れにしようと思ってます。
画面作成
サイコロと数字の盤はもうできています。
でも、なにをすべきか指示するメッセージが欲しいですよね。
テキストベースの場合、まず尋ねるのダイアログが上がり、そこにサイコロの出目を入力するように、メッセージがありますよね。
「何が出るかな？」のラベル作成し、メッセージ１に代入。改行作成。
「予想した数字をクリックして下さい。」のラベル作成し、メッセージ２に代入。
おっと……
いきなり行き詰まりますよ！
サイコロは、tableを「HTML設定」して作っているけど、HTML設定は、追加ではなくまるっと書き換えてしまうので、折角作成したラベルが消えちゃいます(´・ω・｀)
単純にラベルはspan、改行はbrなので、サイコロ作るHTMLで、tableの前にHTMLとして追加することももちろん出来るんですけど、なるべくなでしこでやっていきたいですよね（サイコロ自体をHTML設定で作っておいて何ですが；；；）
というわけで、「DOM要素作成」です。
ボタンなどのように「＊＊作成」という命令にはなっていないHTMLのDOM要素も、これで作れちゃいます。（作成するだけではダメで、「DOM子要素追加」がセット商品です）
なでしこ3マニュアル > plugin_browser/DOM要素作成
なでしこ3マニュアル > plugin_browser/DOM子要素追加
「table」をDOM要素作成し、サイコロへ代入。
DOM親要素へサイコロをDOM子要素追加。
サイコロに「
<tr><td id="eye0"></td><td id="eye1"></td><td id="eye2"></td></tr>
<tr><td id="eye3"></td><td id="eye4"></td><td id="eye5"></td></tr>
<tr><td id="eye6"></td><td id="eye7"></td><td id="eye8"></td></tr>
」をHTML設定。
「サイコロを振る」のボタン作成して、サイコロボタンに代入。
外枠のtableをサイコロという名前で「DOM要素作成」して「DOM子要素追加」することで、先に作ったラベルの下に追加出来ました。そしてサイコロtableの中に目の部分を「HTML設定」します。
あと、サイコロ振るボタン。
そして、予想を選択する数字盤のコードもくっつけて見た目は取りあえずこんなものかな？
動作
サイコロ振ったり、数字を選択したりという一番重要な部分はもう出来ているけど、全体を通してゲームらしい流れになるように。そして、変な操作をしても予定外のことが起きないようにしていく。細々としたこと、結構大事(｀・ω・´)
数字を選択するまではサイコロを振れないよう、ボタンを無効にする。
メッセージ出したところで絶対にありますよね～。順番間違えて押しちゃうとか。
フラグを用意して数字を選択するまではスルーするようにしてもいいんですが、そもそもボタンが押せないようになってる方が間違いないので、初期状態ではボタンを無効にして置いて、数字を選択したら押せるようにすることにします。
サイコロボタンの「disabled」にオンをDOM属性設定。
毎回disabledが綴りを調べないと書けないよ（ノД｀）
これは、HTMLのbuttonの属性の１つで、要素の操作を無効にするもので、オンにすると押しても動作しなくなります。（オフ(0)以外を設定すると全部オンになるっぽく思われます）
※disabledにすると色が薄くなったり、ボタンが凹むアクションが無くなったりするのが普通ですが、ボタンが標準状態の時と同様、見た目はCSSの設定に依存します。
選択したら、メッセージを変えて、サイコロを振るよう促す。
描画中キャンバスをマウス押した時のイベント内で、メッセージを書き換え、サイコロボタンも有効にする。
メッセージ１に「予想は{予想}です。」をテキスト設定。
メッセージ２に「これで良ければサイコロを振って、勝負！」をテキスト設定。
サイコロボタンの「disabled」にオフをDOM属性設定。
サイコロを振っている間は、数字を選択出来ないようにする。
数字選択終了のフラグを作る。
サイコロボタンを押したらオンにして、オンの場合はキャンバスをマウス押した時の処理をスルーするようにする。
サイコロボタンは再び無効にして何度も連続して押せないようにする。
サイコロボタンをクリックした時には
C=0。数字選択終了＝オン。 //ここ！
サイコロボタンの「disabled」にオンをDOM属性設定。
0.1秒タイマー開始した時には(T)
……（中略）
描画中キャンバスをマウス押した時には、
もし、数字選択終了＝オフならば、 //ここ！
もし、（マウスX＞マス*６）または（マウスY＞マス）でなければ、
予想は（マウスX/マス+1）を切捨て。
予想で盤描画。
……
正誤表示
もう普通に言うでいいかなｗ（急にてきとー；）
結果を発表したら、もろもろ元に戻して、続けてもっかい出来るようにしとく。
●正誤判定
もし、予想＝出目ならば、「正解！！🎉」と言う。
違えば、「残念でした～😜」と言う。
メッセージ１に「何が出るかな？」をテキスト設定。
メッセージ２に「予想した数字をクリックして下さい」をテキスト設定。
数字選択終了＝オフ。０で盤描画。
ここまで。
ちょっと絵文字も使ってみました～☆
ブラウザで動くので、絵文字が表示出来るのはもちろんのこと、絵文字を変数として使うことも出来るようですよ。楽しいですね♪
おわります？
見た目にも楽しい数当てゲームになったでしょうかねえ？
視覚的にサイコロがサイコロとして表示されるということを除くと、キー入力を伴わずマウスで数字を選択できるようにしたくらいですが、操作性は大事ですよね～☆
ゲーム自体はほんの数行のものがなんでこんなに長くなるんだよという感じですが、いちおう、ブラウザ用のplugin_browserのDOM操作や描画の機能をあれこれ使ってご紹介してみたつもりです。
他にも、ローカルストレージとかAJAX送信とかとかありますが、サイコロだけに６まで欲しい気もしますが、数当てゲームで一体何を保存し何をGET送信するというのか……；
せいぜい音声合成で出目を読上げてもらうくらいですかねえ？
ネタが尽きているので、それで無理矢理引っ張るかも？（笑）
やっぱり続きます
ローカルストレージの使い方。