音を出します
音も大事ですよね～☆
やっぱりゲームは、音が出ないと！
かつて、消音でRPGをしていて、音が出ていれば一発で分かるナゾに延々ハマってた人が言う事じゃありませんが；（夜中だったんです）
効果音
オーディオ再生の命令を使えば、効果音でもＢＧＭでも鳴らす事ができます。
今回は、サイコロを振る音を効果音として鳴らしてみます。
サイコロ振る音は、こちらからお借りしました。
音＝「https://snowdrops89.github.io/audio/dice1.mp3」をオーディオ開く。
サイコロボタンをクリックした時には
音をオーディオ停止。
音をオーディオ再生。
…………
まず、準備として「オーディオ開く」
そして、なんで再生の前に停止かって言うと、オーディオ再生は再生しっぱなしで、最後まで再生し終わっても、オーディオ再生位置は曲の最後で止まっているからです。
一回目は鳴りますが、二回目以降は再生位置が曲の最後になっているため、鳴りません。
今のところなでしこのオーディオ命令は、再生と停止と一時停止のみの最低限で再生位置を自由に設定する事も、曲全体の長さを事前に取得することも出来ないので、再生の前に停止をして再生位置を０に戻しています。
音声合成
最近のゲームはみんなしゃべりますよねー。
というわけで、折角「話す」命令があるのだからしゃべらせたい！
もっとも、音声合成なので、あんまり日本語上手じゃありませんが……
取りあえず、昨日の挨拶でもしゃべらせてみる。
自分でそうして置いて何ですが、いちいち開始時に「言う」のダイアログ上がるの邪魔くさいしね。
{「声高」:2,「速度」:1.5}に話者詳細設定。
「数当てゲーム挨拶」を開く。
もし、それ＝未定義ならば、
「はじめまして！」と話す。
違えば、もし、それ＝オンならば、
「今日は負けないよ！」と話す。
違えば、
「今日は勝つ気でいるのかな？」と話す。
ここまで。
「言う」を「話す」に変えただけ！ カンタンですね☆
一応、話者詳細設定で、高い声で早く話すようにしています。そのほうがかわいい気がして（？）
注意点
ブラウザが音声合成API(Speech Synthesis API)に対応していること、日本語読み上げ用のエンジンが入ってることが必要です。
Officeの入ってないwin7標準には英語のエンジンしか入っておらず、日本語が「話」せなくて、なんとかするのにえらく苦労したことを覚えていますが、今はwin10の時代ですから標準ではるかさんがいるものと思われます。（あとGoogleChromeは自前で各種言語のエンジンを用意してるっぽく、中国語でもフランス語でも「話」します）
あれ、話さない？ と思ったら、話者一覧取得してみれば、何語が話せるか分かるので確認してみて下さい。あと、音量もね！ｗｗｗ（自分だよ！(/ω＼)）
ちなみに音声合成APIに非対応のブラウザだと、エラーになって、プログラム全部が実行出来なくなるから困ったもんだ＞＜
でも、「最新版のChrome/Safari/Edge/Firefoxでは問題なく動きます」とのこと。
見た目ももっと、ぽくしたい
例えば、簡易エディタで作ってる時には、予想を選択する数字盤は、サイコロの下側に表示されていますが、nako3storageにアップしたら、一番上に表示されます。
単に用意されてるキャンバスと作業用のdivの位置関係が逆だからなんですが、こうゆうの、気になりますよね～（細かい；）
サイコロは真ん中らへんに表示されて欲しいとか、その他もろもろ、自由にレイアウトしたいですよね～。
思うに、そもそもプログラムのことがよく分からないドシロウトにとって、見た目に「ぽい」ものが自分で作れるっていうのは、とても楽しくて、モチベーションに繋がるものだと思う。
そうゆう意味ではビジュアルプログラミング系が強いのかも知れないけど、なでしこｖ１も、GUIを備えたwindowsアプリケーションが日本語で簡単に作る事が出来て、それが楽しくてはまったんだよね～。
ともかく、そうゆうわけで、ぽい感じに仕上げていきたい。
センスが皆無だけど、どこまで行っても所詮は数当てゲームだけど、頑張るっっ。
※この先は、HTMLやCSSのことが分かっている方は、読み飛ばすか、こいつバカだな～と、生温かく見守ってやって下さい。
絶対位置指定の呪文
なでしこｖ３で、見た目をどうこうしようとすると、結局のところなでしこっていうよりCSSのことになっちゃう＞＜
でも、ｖ１のGUI部品で、○○についてで色々な設定をするのと同じように、HTML5のDOMに対して「DOMスタイル一括設定」で色々設定していく感じです。
とりあえず、左(x)と上(y)で自由にレイアウトしたいよね！ という時に必要なのが、この呪文。
"position": "absolute", //絶対位置へ配置。
これを指定する事で、
"左": "30px",
"top": "10px"
のように、位置を指定出来るようになります。
なんで「左」はあるのに「上」はないのか……
さすがの私も、topの綴りが分からなくなったりはしないので、別にいいんですが。
母艦（？）を作る
ただし、これだけだと、左とtopの位置は、ウィンドウ全体の左上からの位置になっちゃう。
自前のＨＴＭＬならそれでＯＫな場合もあるとは思いますが、簡易エディタやブログ上とかに差し込んで動かそうと思ったりした場合には困りますよね～。
absoluteは、「親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります」ということラシイ。
というわけで、relativeにしたボックスの中にabsoluteのボックスを入れ子にしてやれば、その子要素はみんな、absoluteを付けてやれば、そのボックスの左上を0,0にして位置指定が出来るんだよね～。
なでしこと言えば母艦だから、この入れ子の箱に「母艦」と名前をつけてやる＾＾
母艦幅＝360。母艦高＝400。
HTML＝「<div id="nako_base"><div id="nako_bokan"></div></div>」
DOM親要素にHTMLをHTML設定。
「#nako_base」に{
"position": "relative", //相対位置へ配置。
"幅": "{母艦幅}px",
"高さ": "{母艦高}px",
"ボーダー": "5px ridge #999999",
"box-sizing": "content-box" //余白とボーダーを幅と高さに含めない。
}をDOMスタイル一括設定。
「#nako_bokan」に{
"position": "absolute", //絶対位置へ配置。
"幅": "{母艦幅}px",
"高さ": "{母艦高}px",
"overflow": "hidden", //はみ出た部分は非表示。
"box-sizing": "border-box", //余白とボーダーを幅と高さに含める。
}をDOMスタイル一括設定。
「#nako_bokan」のDOM要素取得して、それを母艦に代入。
母艦へDOM親要素設定。
こんな感じ？
母艦という名前が付いているのは中の箱ですが、母艦のサイズを後から変えたい時は、忘れずに両方の箱を同じに合わせないとダメなのでご注意です。
キャンバスを作る
こうなるとキャンバスも、簡易エディタで用意してくれているキャンバスではなく、母艦の中に配置したいですよね。
作るのは普通に「DOM要素作成」と「DOM子要素追加」で出来るのですが、注意点としては、幅と高さをDOMスタイル設定するだけじゃ無く、widthとheightをDOM属性設定して、サイズを合わせておかなきゃなのです。でないと、みょーんと引き延ばされたり、変な事になっちゃいますです（初期値が300*150みたいです）
そして、スタイル設定では、「100px」みたいに単位を付けて文字列で指定するのに対して、属性の方は数値で設定です。
しかも、属性の方は、幅、高さなどの日本語が使えません。
ややこやしい……
分かっていても、色々まちがう～ヽ（；´Д｀）ノ
マス＝50。
「canvas」をDOM要素作成し、数字盤へ代入。
母艦へ数字盤をDOM子要素追加。
数字盤の「width」にマス*6をDOM属性設定。
数字盤の「height」にマスをDOM属性設定。
数字盤に{
"position": "absolute", //絶対位置へ配置。
"幅": "{マス*6}px","高さ": "{マス}px",
"左": "30px","top": "10px"
}をDOMスタイル一括設定。
数字盤へ描画開始。
黒色に線色設定。「bold 40px sans-serif」に描画フォント設定。
０で盤描画。
こんな感じ？
そして、描画開始を忘れず！
線色や塗り色、フォントの設定は、現在の描画中キャンバスに対して行われるので、描画開始をした後で行う。
動作確認
細々とした設定や、変更点については割愛です。
おわります
いやー、予想外にがんばりましたねー。
頑張っても、やっぱり数当てゲームは数当てゲームですねー。
しかも、ローカルストレージの用途がてきとー過ぎてイマイチです（明らかにいらない機能orz）
とりあえず、内容はともかく見た目をそれっぽくするという今日の目標は達成出来たと思います。
使うと楽しいplugin_browserの命令を、十分な説明は出来ませんが、色々とご紹介だけはできたかなーと思います。
みなさんも是非、もっといいもの作って発表して下さいね～☆
●なでしこｖ３用
●ｖ１もｖ３も投稿出来ます