なでしこさんでゲーム「2択de大石泉すき」
あーあ……今週もいつの間にか残り数時間だよ……
なんでなかなか書けないんだろう……
やっぱり自分はクソ頭が悪くてクソ無能でクズすぎるんだ……
……と嘆いたところで、クソ頭が悪くてクソ無能でクズすぎることは変わらない……
とりあえず目の前の締切に向けて何か書かなくちゃ……
まあ、またなんか適当なものを雑に作ってごまかすか……
IchigoJam だと実機で動作確認してスクリーンショットを撮るべきな気がして、そのコストがかかるから、今回はなでしこでやろう……
※IchigoJamはjig.jpの登録商標です。
ルール
2択で1文字ずつ選んで、「大石泉すき」を完成させよう！
間違った文字を選んでしまうと、即失格だから気をつけよう！
プログラム
2択de大石泉すき (なでしこ3貯蔵庫)
解説
画面を切り替える処理
全体枠は「div」のDOM部品作成。
それの「行揃え」に「中央」をDOMスタイル設定。
それにDOM親部品設定。
タイトル画面は「div」のDOM部品作成。
カウント画面は「div」のDOM部品作成。
ゲーム画面は「div」のDOM部品作成。
結果画面は「div」のDOM部品作成。
画面リストは[タイトル画面, カウント画面, ゲーム画面, 結果画面]。
●(画面に)画面切替とは
画面リストを反復
変数の表示方法は「なし」。
もし、対象が画面と等しいならば
表示方法は「ブロック」。
ここまで。
対象の「ボックス表示」に表示方法をDOMスタイル設定。
ここまで。
ここまで。
タイトル画面に画面切替。各画面用の枠 (div) を用意し、関数1個で指定した画面だけを表示できるようにする。
各画面の作成
タイトル画面にDOM親部品設定。
「2択de大石泉すき」のラベル作成。
それの「文字サイズ」に「200%」をDOMスタイル設定。
2回、改行作成。
『「大」「石」「泉」「す」「き」の各文字を素早く選ぼう！』のラベル作成。
改行作成。
「間違えると即失格だから、気をつけてね！」のラベル作成。
2回、改行作成。
スタートボタンは「スタート」のボタン作成。
カウント画面にDOM親部品設定。
カウントラベルは空のラベル作成。
それの「文字サイズ」に「500%」をDOMスタイル設定。
ゲーム画面にDOM親部品設定。
左ボタンは空のボタン作成。
それの「文字サイズ」に「400%」をDOMスタイル設定。
それの「幅」に「2.5ex」をDOMスタイル設定。
それの「高さ」に「2.5ex」をDOMスタイル設定。
空のラベル作成。
それの「ボックス表示」に「inline-block」をDOMスタイル設定。
それの「幅」に「3ex」をDOMスタイル設定。
右ボタンは空のボタン作成。
それの「文字サイズ」に「400%」をDOMスタイル設定。
それの「幅」に「2.5ex」をDOMスタイル設定。
それの「高さ」に「2.5ex」をDOMスタイル設定。
結果画面にDOM親部品設定。
結果ラベルは空のラベル作成。
それの「文字サイズ」に「300%」をDOMスタイル設定。
2回、改行作成。
結果詳細ラベルは空のラベル作成。
2回、改行作成。
リトライボタンは「リトライ」のボタン作成。
空のラベル作成。
それの「ボックス表示」に「inline-block」をDOMスタイル設定。
それの「幅」に「1ex」をDOMスタイル設定。
タイトルボタンは「タイトルに戻る」のボタン作成。部品を並べ、それぞれの画面を作成する。
変数の用意
問題リストは[
["大", "犬", "太", "人", "ナ"],
["石", "右", "厂", "ナ", "口"],
["泉", "白", "水", "梟"],
["す", "ナ", "む", "る", "十"],
["き", "さ", "キ", "木", "る", "ぎ"]
]。
カウントは3。
開始時刻は0。
次問題は0。
左正解フラグは偽。
正解選択肢は空。
誤答選択肢は空。ゲームの状態を表す変数を用意する。
それぞれの変数の意味は以下の通り。
問題リスト：出題する文字の配列
カウント：ゲーム開始前のカウントの値
開始時刻：ゲームを開始した時刻 (タイム測定用)
次問題：次に出題する文字の位置
左正解フラグ：出題中の問題の正解は左のボタンか
正解選択肢：正解として表示している文字
誤答選択肢：不正解として表示している文字
問題リストの各要素が、それぞれの問題で使用する文字のリストを表す。
使用する文字のリストは、最初の要素に正解の文字を、その後の要素に不正解の文字を格納する。
出題処理
●出題とは
定数の問題データは問題リスト@次問題。
正解選択肢は問題データ@0。
誤答選択肢は問題データ@(1から((問題データの要素数)-1)までの乱数範囲)。
左正解フラグは(2の乱数)が0と等しい。
もし、左正解フラグならば
左ボタンに正解選択肢をDOMテキスト設定。
右ボタンに誤答選択肢をDOMテキスト設定。
違えば
右ボタンに正解選択肢をDOMテキスト設定。
左ボタンに誤答選択肢をDOMテキスト設定。
ここまで。
次問題を1増やす。
ここまで。現在の問題を出題し、解答を受け付ける準備をする。
具体的には以下の処理を行う。
現在の問題のデータを問題リストから取得する
問題のデータから選択肢を取得する
正解にするボタンを決め、ボタンの表示を設定する
次の問題の位置を更新する
解答処理
●正解時処理とは
もし、次問題が(問題リストの要素数)未満ならば
出題。
違えば
定数の完了時刻はシステム時間ミリ秒。
定数のタイムは(完了時刻－開始時刻)÷1000。
結果ラベルに「クリア！」をDOMテキスト設定。
結果詳細ラベルに"{タイム}秒で「大石泉すき」を選択できました！"をDOMテキスト設定。
結果画面に画面切替。
ここまで。
ここまで。
●誤答時処理とは
結果ラベルに「失格！」をDOMテキスト設定。
結果詳細ラベルに"「{正解選択肢}」のかわりに「{誤答選択肢}」を選んでしまいました！"をDOMテキスト設定。
結果画面に画面切替。
ここまで。正解、および不正解のときの処理を行う。
正解のときは、次の問題があれば出題し、なければクリアタイムを計算して結果を表示する。
不正解のときは、失格の結果を表示する。
カウント処理
●カウント開始とは
カウント画面に画面切替。
カウントは3。
カウントラベルにカウントをDOMテキスト設定。
1秒毎には(タイマーID)
カウントを1減らす。
もし、カウントが0超ならば
カウントラベルにカウントをDOMテキスト設定。
違えば
タイマーIDのタイマー停止。
ゲーム画面に画面切り替え。
次問題は0。
出題。
開始時刻はシステム時間ミリ秒。
ここまで。
ここまで。
ここまで。ゲーム開始前のカウントを行う。
タイマーを使用して1秒ごとにカウントダウンし、カウントが0になるタイミングで出題を開始する。
ボタンの処理
{関数}カウント開始でスタートボタンをクリックした時。
{関数}カウント開始でリトライボタンをクリックした時。
左ボタンをクリックした時には
もし、左正解フラグならば
正解時処理。
違えば
誤答時処理。
ここまで。
ここまで。
右ボタンをクリックした時には
もし、左正解フラグならば
誤答時処理。
違えば
正解時処理。
ここまで。
ここまで。
タイトルボタンをクリックした時には
タイトル画面に画面切替。
ここまで。それぞれのボタンを押したときの処理を行う。
タイトル画面
「スタート」ボタン：カウント画面に遷移し、カウントを開始する
カウント画面
ボタンは無い
ゲーム画面
左ボタン / 右ボタン：文字を選ぶ
結果画面
「リトライ」ボタン：カウント画面に遷移し、カウントを開始する
「タイトルに戻る」ボタン：タイトル画面に遷移する
改造のアイデア
これらの実装は、読者への宿題とする。
ハイスコアを記録・表示する
キーボードでの操作に対応する
問題のバリエーションを増やす
デザインを改善する
まとめ
なでしこで、2個のボタンから正しい「大石泉すき」の文字をなるべく早く選ぶゲームを作ることができた。
コメント