コピペで脱出ゲームを作る~入力装置を作る・後編~

第13回入力装置を作る・後編

はい、どうも
前回言ったとおり今回は決まった順番で押すボタン・電卓のように数字ボタンがある入力装置・碁盤の目に並べられた白黒切り替わるボタンを決まった配置にするやつをやって行きたいと思います

え~、どうぞ!
まずは決まった順番で押すボタンですね
今回は二つのボタンで左・右・左・右・右・左の順番に押すのが正解にしています

さて一行目で判定用の変数を作って、classはいいとして25行目・41行目以降のボタンのontouchend内を見ていきましょう

コメントにも書いてますが正しい順番で押した時変数sayuuの値を1増やしています
そして67行目の決定ボタンontouchendで変数sayuuの値をもとに正誤判定をしているわけです

特に難しいことはないと思いますが、この手の装置はプレイヤー視点で今がどの状態かわからないという点に留意してください
どんなに間違えても間違えた次に最初から正しい順にやり直せばうまくいくのですが、プレイヤーはリセットされているかわからないのでやり直さないということです

リセットボタンがない場合、多くのプレイヤーは視点変更をしてリセットという感覚ではないでしょうか?
なので装置に視点変更するSpriteに変数sayuuを0にするという内容を加えておくのがいいと思います
リセットボタンを作る場合でも念のため視点変更でリセットは入れておきましょう

今回は二つボタンでしたが三つでも四つでも同じように出来るでしょう
ついでに右にいくつ、左にいくつ……と繰り返すタイプのダイアル錠や額縁の四隅を順番にクリックして開けるようなものにも応用できると思います


ということで次
碁盤の目に並べた~略です

判定用の変数二つとClassを作るとこまではいいですね
33行目今回の肝、for文です、コメントにも書いてますが繰り返す文です
for (var i=0; i<25; i++){  } と書くわけですが、for(変数 i の初期値; 繰り返す条件; 1回ごとにやること){繰り返す動作}となります
この場合()内は、初期値0の i に1回動作をやるごとに1足していって25未満の間繰り返すとなります

要するに25回やるってことです

めんどくさい書き方だなと思うかもしれませんが、このiを使うことで繰り返しに変化を作れるのです
37行目を見てください、()内はx座標y座標ですが i が変化することで値が変化して重ならずに配置できるというわけです

i % 5 * 40 + 147 これがx座標です ( %は割った余りを求めるもの *は掛け算です)
余りを求めるなんて日常生活であまり使わないかもしれませんが、結果について少し考えてみてください
i % 5 の答えはiが増えるごとに012340123401234……とループするのがわかるでしょうか?
つまりこの計算によってx座標が5パターンになるわけです(40が1つずつの間隔、147は一番左の座標です)
この01234毎にy座標を変えれば綺麗に並べますね

ではy座標を見てみましょう
Math.floor(i / 5) * 40 + 97ですね、(/は割り算)
Math.floorは以前ランダムで少し触れましたが()内の小数点以下を切り捨てるものです
ということはどうなるでしょう?

そうです、000001111122222……というように答えが並びます
つまり5ごとにy座標が変わるわけです(40が間隔、97が一番上の座標)
結果x座標と組み合わせて5×5の碁盤の目に並ぶのがわかると思います

そして飛ばしましたがcontinue; が条件の合うとき命令を行わずに次に進むという文です
正解の時白のボタンと黒のボタンで別に作っているので互いに互いのマスのところを飛ばしています

ちなみにただ繰り返しているだけなので手打ちでclassを一つずつ作っても同じことができます
数が多いので挑戦してみました

そして決定ボタンです
sirohanteiが0、kurohanteiが10の時正解です
理屈はわかりますね?白でいて欲しい方は一個でも黒があればsirohanteiが1以上になってしまい、黒のほうは足りなければ10にならない
なのでこれで正誤判定できます

スポンサードリンク



最後に電卓風数字ボタン付き装置です まず入力桁判定用変数です
こちらはどういうことかというと、今回四桁の数字なのですがこれを1つのLabelではなく4つのLabelで表示しています
なので今どの桁(Label)に入力しているのかがわからないといけないということです

なぜこんなことをするのかというと、一番左を0にしたいこともあるからです
1つの数字だと0123と入力しても123としか表示されませんよね

そして下に移ってボタン用のClassとそれをもとに数字ボタン用のClassです
ボタン用というのは数字以外のボタンですね

32行目のswitch文を見てください
さきほどの入力桁判定用変数によって変化する対象を変え、対象の値を変化させ変数の値に1足しています
this.bangouにそれぞれの数字を入れるんですね

そして0ボタンを53行目で作り、1~9ボタンを55行目から作ります
for文は先ほど触れたのでいいとして、y座標の計算式が違うのは電卓風の並びは123が下789が上だからです
また最後のi+1はthis.bangouです、iは0からですがボタンは1からなので1足しています

初期化ボタンと一桁消すボタンは特に問題ありませんね、数字用ではなくボタン用のClassを使ってるのに注意してください

そして数字表示用のLabelを作り決定ボタンを作ります

133行目、表示される数字Labelの.textによって正誤判定しています

さて、 いかがだったでしょうか?前後編あわせて応用すれば大体の装置は作れるのではないでしょうか?
そろそろ内容によってはもう完成したという人も出てきたのではないでしょうか?
まだやりたいことあるよという人ももちろんおられるでしょうが、次回はまず先にブログに載せる方法を紹介したいと思います
ついでにここまでの状態を私も載せるという感じでいきます
ということで今回はお疲れ様でした
スポンサードリンク

関連記事
スポンサーサイト

Comment

Comment Form
公開設定

Trackback


→ この記事にトラックバックする(FC2ブログユーザー)