数当てゲーム 📖

見た目にも楽しい（かもしれない）数当てゲーム

プログラム: (→大)
＃ 設定 目＝13。//サイコロの目のサイズ 目位置＝[[4],[0,8],[0,4,8],[0,2,6,8],[0,2,4,6,8],[0,2,3,5,6,8]] マス＝50。予想＝0。出目＝0。数字選択終了＝オフ。 黒色に線色設定。「bold 40px sans-serif」に描画フォント設定。 ＃ 画面作成 「何が出るかな？」のラベル作成し、メッセージ１に代入。改行作成。 「予想した数字をクリックして下さい」のラベル作成し、メッセージ２に代入。 改行作成。改行作成。 「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設定。 「勝負！」のボタン作成して、サイコロボタンに代入。改行作成。改行作成。 サイコロボタンの「disabled」にオンをDOM属性設定。 ＃ サイコロのスタイル設定 サイコロに{ 　"border-collapse":"separate",//隣接するセルのボーダーを重ねない 　"border-spacing":"2px",//セルのボーダーの間隔 　"ボーダー":"solid 3px {黒色}", 　"余白":"{目/2}px", 　"border-radius":"{目/2}px"//角丸 }をDOMスタイル一括設定。 ９回 　「#eye{回数-1}」に{ 　　"幅":"{目}px","高さ":"{目}px", 　　"line-height":"{目}px",//行高さ 　　"ボーダー":"なし", 　　"余白":"0px", 　　"背景色":白色, 　　"border-radius":"{目/2}px"//角丸 　}をDOMスタイル一括設定。 ここまで。 ＃ イベント C=0。//何が出るかなの回数カウンタ。 サイコロボタンをクリックした時には 　C=0。数字選択終了＝オン。 　サイコロボタンの「disabled」にオンをDOM属性設定。 　0.1秒タイマー開始した時には(T) 　　出目＝６の乱数に１を足す。 　　出目のサイコロ表示。 　　C=C+1。 　　もし、C=16ならば、 　　　Tのタイマー停止。 　　　1秒後には、 　　　　正誤判定。 　　　ここまで。 　　ここまで。 　ここまで。 ここまで。 描画中キャンバスをマウス押した時には、 　もし、数字選択終了＝オフならば、 　　もし、（マウスX＞マス*６）または（マウスY＞マス）でなければ、 　　　予想は（マウスX/マス+1）を切捨て。 　　　予想で盤描画。 　　　メッセージ１に「予想は{予想}です。」をテキスト設定。 　　　メッセージ２に「これで良ければサイコロを振って、勝負！」をテキスト設定。 　　　サイコロボタンの「disabled」にオフをDOM属性設定。 　　ここまで。 　ここまで。 ここまで。 ＃ 初期状態 １のサイコロ表示。 ０で盤描画。 ＃ 関数 ●（数の）サイコロ表示 　９回 　　「#eye{回数-1}」の「背景色」に白色をDOMスタイル設定。 　ここまで。 　もし、数が１ならば、目色は赤色。 　違えば、目色は黒色。 　(数)回 　　「#eye{目位置[数-1][回数-1]}」の「背景色」に目色をDOMスタイル設定。 　ここまで。 ここまで。 ●（数で）盤描画 　６回 　　もし、回数＝数ならば、「#99EEEE」に塗り色設定。 　　違えば、白色に塗り色設定。 　　[マス*(回数-1),0,マス,マス]へ四角描画。 　　黒色に塗り色設定。 　　[マス*(回数-1)+10,40]へ回数を文字描画。 　ここまで。 ここまで。 ●正誤判定 　もし、予想＝出目ならば、「正解！！🎉」と言う。 　違えば、「残念でした～😜」と言う。 　メッセージ１に「何が出るかな？」をテキスト設定。 　メッセージ２に「予想した数字をクリックして下さい」をテキスト設定。 　数字選択終了＝オフ。０で盤描画。 ここまで。