なでしこさんで大石泉すきスロット
先週は、日曜の終わりまでにプログラムを書ききれず、逃げてしまった。
しかし、そのおかげで企画が決定して途中まで実装したプログラムがある。
そのため、今週はそれを使えば企画を考える手間が省け、有利だ。
早めに記事を書いて週末を楽に・動きやすくしておきたい……
まずはQiitaの記事をしょっぱなで書いて、あとはnoteの記事を……
ああ！また記事を書いていない状態で週末、制限時間残りわずかになってしまった！
いつもそうだ！誰もお前を愛さない！
やったこと
なでしこ3で『大石泉すきスロット』を作った。
ルール
「大」「石」「泉」「す」「き」に対応する5個のリール (ボタン) がある。
それぞれのボタンを押すことで、そのボタンの文字を止めることができる。
それぞれのリールの文字の順番はスタートするたびに変わるが、回っているあいだは一定である。
文字のパターンを見極めて、「大石泉すき」を揃えよう！
プログラム
大石泉すきスロット (なでしこ3貯蔵庫)
解説
揃える文字列の設定
目標文字列は「大石泉すき」。
文字リストは目標文字列を文字列分解。
リール数は文字リストの要素数。揃える文字列を設定し、その情報を取得する。
判定用の関数の用意
●(配列が)全部偽とは
配列の「every」を[{関数}論理NOT]でJSメソッド実行して戻す。
ここまで。every() 関数を用いて、「配列の要素が全部偽」であることを判定する関数を用意する。
これは、「リールが全部止まった」ことの判定に用いる。
リール状態用の変数の用意
リールリストは空配列。
位置リストは空配列。
回転中リストは空配列。
停止指示リストは空配列。
ボタンリストは空配列。
回転中は真。以下の変数を用意する。
リールリスト：各リール (ボタン) に表示する文字の順番を表す配列の配列
位置リスト：各リール (ボタン) にどの文字を表示するかを表す数値の配列
回転中リスト：各リール (ボタン) が回転しているかを表す真理値の配列
停止指示リスト：各リール (ボタン) の回転を停止する指示があった (ボタンが押された) かを表す真理値の配列
ボタンリスト：各リールを表すボタン (DOM部品) の配列
回転中：回転しているリールがあるかを表す真理値 (停止時の処理を二重に行わないために用いる)
画面の作成
DOM親要素に{
"行揃え": "中央",
"line-height": "normal",
}をDOMスタイル一括設定。
「{カッコ}{目標文字列}{カッコ閉}を揃えよう！」のラベル作成。
改行作成。
スタートボタンは「スタート」のボタン作成。
スタートボタンに{
"文字サイズ": "200%",
"余白": "0.75ex",
"margin-top": "1ex",
}をDOMスタイル一括設定。
改行作成。
Nで0から(リール数-1)まで繰り返す
文字リストを配列複製して配列シャッフルしてリールリストに配列追加。
位置リストに0を配列追加。
回転中リストに真を配列追加。
停止指示リストに偽を配列追加。
ボタンは空のボタン作成。
ボタンに{
"文字サイズ": "300%",
"幅": "3ex",
"高さ": "3ex",
}をDOMスタイル一括設定。
ボタンにNをDOMポケット設定。
ボタンをクリックした時には
定数の添字は対象のDOMポケット取得。
停止指示リスト@添字に真を代入。
ここまで。
ボタンリストにボタンを配列追加。
ここまで。
改行作成。
結果欄は「？」のラベル作成。
結果欄に{
"文字サイズ": "300%",
"ボックス表示": "inline-block",
"margin-top": "0.75ex",
"margin-bottom": "0.75ex",
}をDOMスタイル一括設定。
結果欄にオフをDOM可視設定。
改行作成。
成績欄は空のラベル作成。DOM部品を作成し、画面を構築する。
また、リール管理用の配列に要素を格納する。
先週引っかかったラベルの文字を大きくすると文字が上の部品に重なる現象の原因が、デフォルトの親部品に line-height で子要素の文字サイズにかかわらず行の高さを固定する設定がされていることだということがわかったため、その設定を上書きする対策を行った。
成績情報の用意
現在連続は0。
最高連続は0。
ローカルストレージキーは「ooisiizumisuki_slot-604f7e9e-1fc8-45b7-8db8-f26982b5b04f」。
もし、ローカルストレージ有効確認ならば
読込結果はローカルストレージキーをローカルストレージ読んで整数変換。
もし、論理NOT(それを非数判定)ならば
最高連続は読込結果。
ここまで。
ここまで。
成績欄に「現在：{現在連続}連続 / 最高：{最高連続}連続」をDOMテキスト設定。以下の変数を用意する。
現在連続：現在連続で成功させている回数を表す数値
最高連続：これまでに連続で成功させた最高の回数を表す数値
UUIDを使用した被りにくいキーを用意し、これを用いて最高連続回数をローカルストレージから読み出す。
(簡易エディタや貯蔵庫では同じドメインで様々なプログラムを実行することになるため、被りにくくしておくことは重要と考えられる)
スタートボタンの処理
スタートボタンをクリックした時には
もし、回転中リストが全部偽ならば
Nで0から(リール数-1)まで繰り返す
文字リストを配列複製して配列シャッフル。
リールリスト@Nはそれ。
位置リスト@Nは0。
回転中リスト@Nは真。
停止指示リスト@Nは偽。
ここまで。
回転中は真。
結果欄にオフをDOM可視設定。
ここまで。
ここまで。スタートボタンが押された際に行う処理を定義する。
処理は、リールが全て止まっている場合のみ行う。
以下の処理を行う。
各リールの文字の順番をシャッフルする
各リールの回転を開始する
前回の結果を隠す
リールの回転処理
0.2秒毎には
Nで0から(リール数-1)まで繰り返す
もし、回転中リスト@Nならば
位置リスト@Nは位置リスト@Nに1を足して(リールリスト@Nの要素数)で割った余り。
ボタンリスト@Nにリールリスト@N,(位置リスト@N)をDOMテキスト設定。
ここまで。
もし、停止指示リスト@Nならば
回転中リスト@Nは偽。
ここまで。
ここまで。
もし、回転中かつ(回転中リストが全部偽)ならば
回転中は偽。
定数の文字取得は関数(e,i) それはリールリスト@i,e。ここまで。
定数の停止結果は位置リストの「map」を[文字取得]でJSメソッド実行して配列只結合。
もし、停止結果が目標文字列と等しいならば
結果欄に「{目標文字列}！」をDOMテキスト設定。
現在連続を1増やす。
もし、ローカルストレージ有効確認かつ(現在連続が最高連続超)ならば
現在連続を文字列変換してローカルストレージキーにローカルストレージ保存。
ここまで。
違えば
結果欄に「残念！」をDOMテキスト設定。
もし、現在連続が最高連続超ならば
最高連続は現在連続。
ここまで。
現在連続は0。
ここまで。
結果欄にオンをDOM可視設定。
成績欄に「現在：{現在連続}連続 / 最高：{最高連続}連続」をDOMテキスト設定。
ここまで。
ここまで。各リールを回転させる処理を行う。
リールは、ボタンを押したら即停止するのではなく、押された次に行う切り替えまでで停止するようにした。
これにより、単に出したい文字が出たら止めるのではなく、各リールのパターンを覚えて出したい文字の数文字前の文字が出たら止めるようにする必要が生じ、より難しくなる。
また、全てのリールが止まったら、揃ったかどうかの判定処理を行う。
各リールに表示されている文字を集めて文字列にし、それが目標の文字列と一致しているかを判定する。
この操作ではリール内の位置だけでなく、それがどのリールかの情報も用いる。
しかし、なでしこ3の配列関数適用や配列マップでは、引数を1個(変換する要素)とる関数しか受け付けられないようである。
そこで、要素の添字も一緒に渡してくれる JavaScript の map() を用いた。
揃った場合は、現在の連続成功回数を1大きくする。
ハイスコアを更新した際に更新前のハイスコアがわかるよう、ここでは表示する最大成功回数は更新しない。
ただし、成功した段階でゲームを終了しても記録が残るよう、記録を更新した場合はローカルストレージに記録を書き込む。
揃わなかった場合は、必要に応じて最大成功回数の表示を更新し、連続成功回数を0にする。
まとめ
Webブラウザ上で動くなでしこ3で、「大石泉すき」を揃えるスロットゲームを作成した。
あらためて調査を行った結果、先週引っかかったラベルの文字を大きくすると上の部品に重なる問題の原因を発見し、対策を行うことができた。
何を作るのかが決まっていて、さらに途中までできているという普段より有利な条件であるにもかかわらず、結局記事を書くのが週末ギリギリになってしまった。本当に自分は愚かで頭が悪くてスケジューリングが下手くそだ。
コメント