数当てゲーム３

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

エディタ

プログラム

＃ 宣言
予想＝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]}」をテキスト設定。
　　　メッセージ２に「またチャレンジしてね☆」をテキスト設定。
　　ここまで。
ここまで。

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ