[編集モード] 数当てゲーム

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

＃ 設定
目＝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]へ回数を文字描画。
　ここまで。
ここまで。

●正誤判定
　もし、予想＝出目ならば、「正解！！🎉」と言う。
　違えば、「残念でした～😜」と言う。

メッセージ１に「何が出るかな？」をテキスト設定。
　メッセージ２に「予想した数字をクリックして下さい」をテキスト設定。
　数字選択終了＝オフ。０で盤描画。
ここまで。

デバッグ × キャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] 数当てゲーム

素材のアップロード