数当てゲーム３ 📖

音を出したり、さらに見た目を「ぽく」したりして完成させる

プログラム: (→大)
＃ 宣言 予想＝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", 　"背景色": "#FFDDDD", 　"overflow": "hidden",　　　　//はみ出た部分は非表示。 　"box-sizing": "border-box",　//余白とボーダーを幅と高さに含める。 }をDOMスタイル一括設定。 「#nako_bokan」のDOM要素取得して、それを母艦に代入。 母艦へDOM親要素設定。 ＃ 画面作成 ＃＃数字盤 マス＝50。 「canvas」をDOM要素作成し、数字盤へ代入。 母艦へ数字盤をDOM子要素追加。 数字盤の「width」にマス*6をDOM属性設定。 数字盤の「height」にマスをDOM属性設定。 数字盤に{ 　"position": "absolute",　　　//絶対位置へ配置。 　"幅": "{マス*6}px","高さ": "{マス}px", 　"左": "30px","top": "10px" }をDOMスタイル一括設定。 数字盤へ描画開始。 黒色に線色設定。「bold 40px sans-serif」に描画フォント設定。 ０で盤描画。 ＃＃サイコロ 目＝13。//サイコロの目のサイズ 目位置＝[[4],[0,8],[0,4,8],[0,2,6,8],[0,2,4,6,8],[0,2,3,5,6,8]] 音＝「https://snowdrops89.github.io/audio/dice1.mp3」をオーディオ開く。　//https://taira-komori.jpn.org/ 「div」をDOM要素作成して、サイコロパネルに代入。 母艦へサイコロパネルをDOM子要素追加。 サイコロパネルに{ 　"position": "absolute",　　　//絶対位置へ配置。 　"幅": "240px","高さ": "200px", 　"左": "{(母艦幅-240)/2}px","top": "140px" 　"背景色":"#339933", }をDOMスタイル一括設定。 「table」を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設定。 サイコロに{ 　"position": "absolute",　　　//絶対位置へ配置。 　"border-collapse":"separate",//隣接するセルのボーダーを重ねない 　"border-spacing":"2px",//セルのボーダーの間隔 　"ボーダー":"solid 3px {黒色}", 　"余白":"{目/2}px","背景色":白色, 　"左": "90px","top": "70px" 　"border-radius":"{目/2}px"//角丸 }をDOMスタイル一括設定。 ９回 　「#eye{回数-1}」に{ 　　"幅":"{目}px","高さ":"{目}px", 　　"line-height":"{目}px",//行高さ 　　"ボーダー":"なし", 　　"余白":"0px", 　　"背景色":白色, 　　"border-radius":"{目/2}px"//角丸 　}をDOMスタイル一括設定。 ここまで。 １のサイコロ表示。 サイコロパネルへDOM親要素設定。 「勝負！」のボタン作成して、サイコロボタンに代入。 サイコロボタンの「disabled」にオンをDOM属性設定。 ＃＃メッセージ 「div」をDOM要素作成して、メッセージパネルに代入。 母艦へメッセージパネルをDOM子要素追加。 メッセージパネルに{ 　"position": "absolute",　　　//絶対位置へ配置。 　"幅":"{母艦幅-60}px","高さ":"55px", 　"左": "30px","top": "70px" 　"余白": "10px","背景色": "#FFEEEE", 　"box-sizing": "border-box"　//余白とボーダーを幅と高さに含める。 }をDOMスタイル一括設定。 メッセージパネルへDOM親要素設定。 「何が出るかな？」のラベル作成し、メッセージ１に代入。改行作成。 「予想した数字をクリックして下さい。」のラベル作成し、メッセージ２に代入。 ＃＃コイン コイン＝5。 「div」をDOM要素作成して、コインパネルに代入。 母艦へコインパネルをDOM子要素追加。 コインパネルに{ 　"position": "absolute",　　　//絶対位置へ配置。 　"左": "10px","top": "{母艦高-50}px" }をDOMスタイル一括設定。 コインパネルへDOM親要素設定。 「コイン：」のラベル作成。 コインのエディタ作成して、コインエディタに代入。 「枚」のラベル作成。 コインエディタに{ 　"幅": "50px","高さ": "25px","余白":"6px", 　"行揃え": "右","背景色": 黒色, 　"色": "#FFFF66","文字サイズ": "22px", 　"font-weight": "bold",　//文字太さ 　"border-radius":"5px"　//角丸 }をDOMスタイル一括設定。 ＃＃ローカルストレージ削除 母艦へDOM親要素設定。 「忘れる」のボタン作成して、クリアボタンに代入。 クリアボタンに{ 　"position": "absolute",　　　//絶対位置へ配置。 　"幅": "60px","高さ": "30px","文字サイズ":"12px", 　"左": "{母艦幅-68}px","top": "{母艦高-38}px" }をDOMスタイル一括設定。 クリアボタンをクリックした時には 　「あなたのことを忘れます」で二択。 　もし、それがはいならば、「数当てゲーム挨拶」をローカルストレージキー削除。 ここまで。 #挨拶 時は「{今}」の２だけ文字左部分を整数変換。 もし、(時≧０)かつ(時＜４)ならば、挨拶＝「ねむいよう。」 違えば、もし、(時≧４)かつ(時＜１１)ならば、挨拶＝「おはようございます。」 違えば、もし、(時≧１１)かつ(時＜１８)ならば、挨拶＝「こんにちわ。」 違えば、もし、(時≧１８)かつ(時≦２３)ならば、挨拶＝「こんばんわ。」 {「声高」:2,「速度」:1.5}に話者詳細設定。 「数当てゲーム挨拶」を開く。 もし、それ＝未定義ならば、 　「はじめまして！」と話す。 違えば、もし、それ＝オンならば、 　「{挨拶}。今日は負けないよ！」と話す。 違えば、 　「{挨拶}。今日は勝つ気でいるのかな？」と話す。 ここまで。 ＃イベント C=0。//何が出るかなの回数カウンタ。 サイコロボタンをクリックした時には 　音をオーディオ停止。 　音をオーディオ再生。 　コイン＝コイン－１。 　コインをコインエディタにテキスト設定。 　C=0。数字選択終了＝オン。 　サイコロボタンの「disabled」にオンをDOM属性設定。 　0.1秒タイマー開始した時には(T) 　　出目＝６の乱数に１を足す。 　　出目のサイコロ表示。 　　C=C+1。 　　もし、C=26ならば、 　　　Tのタイマー停止。 　　　1秒後には、 　　　　正誤判定。 　　　ここまで。 　　ここまで。 　ここまで。 ここまで。 描画中キャンバスをマウス押した時には、 　もし、数字選択終了＝オフならば、 　　もし、（マウスX＞マス*６）または（マウスY＞マス）でなければ、 　　　予想は（マウスX/マス+1）を切捨て。 　　　予想で盤描画。 　　　メッセージ１に「予想は{予想}です。」をテキスト設定。 　　　メッセージ２に「これで良ければ、勝負！」をテキスト設定。 　　　サイコロボタンの「disabled」にオフをDOM属性設定。 　　ここまで。 　ここまで。 ここまで。 ＃ 関数 ●（数の）サイコロ表示 　９回 　　「#eye{回数-1}」の「背景色」に白色をDOMスタイル設定。 　ここまで。 　もし、数が１ならば、目色は赤色。 　違えば、目色は黒色。 　(数)回 　　「#eye{目位置[数-1][回数-1]}」の「背景色」に目色をDOMスタイル設定。 　ここまで。 ここまで。 ●（数で）盤描画 　６回 　　もし、回数＝数ならば、「#99EEEE」に塗り色設定。 　　違えば、白色に塗り色設定。 　　[マス*(回数-1),0,マス,マス]へ四角描画。 　　黒色に塗り色設定。 　　[マス*(回数-1)+10,40]へ回数を文字描画。 　ここまで。 ここまで。 ●正誤判定 　もし、予想＝出目ならば、 　　「正解！！🎉」と言う。 　　オンで終了処理。 　違えば、 　　「残念でした～😜」と言う。 　　もし、コイン＝０ならば、オフで終了処理。 　　違えば、ゲーム続行。 　ここまで。 ここまで。 ●ゲーム続行 　メッセージ１に「何が出るかな？」をテキスト設定。 　メッセージ２に「予想した数字をクリックして下さい」をテキスト設定。 　数字選択終了＝オフ。０で盤描画。 ここまで。 ●(勝敗で)終了処理 　「数当てゲーム挨拶」に勝敗を保存。 　メッセージ＝「ゲームオーバーです。,残念でした！,何度やっても同じだよー。{改行}あなたの勝ちです。,おめでとう！,今回は負けないよ。」をCSV取得。 　メッセージ[勝敗][0]を話す。 　「{メッセージ[勝敗][0]}{改行}もう一度やる？」で二択。 　　もし、それがはいならば、 　　　メッセージ[勝敗][2]を話す。 　　　コイン＝5。コインをコインエディタにテキスト設定。 　　　ゲーム続行。 　　違えば、 　　　「また遊んでね」を話す。 　　　メッセージ１に「{メッセージ[勝敗][1]}」をテキスト設定。 　　　メッセージ２に「またチャレンジしてね☆」をテキスト設定。 　　ここまで。 ここまで。