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

第12回、入力装置を作るの巻
ということで、遅くなり申し訳ありません
私も勉強中でまだ完全に納得はいってない状態なもので申し訳ありません

さて、脱出ゲームにつき物の入力装置ですが色々種類がありますよね
6パターンほど考えて見たのですがまだ3パターンしか終わってません
まとめて出したかったのですがあんまり間を開けるとまた更新止まったかと思われそうなので二回に分けてやりたいと思います

ということで前半3パターン、どうぞ

スポンサードリンク


それでは1つずつ見ていきましょう

まずボタン直接クリックパターンです
クリックするとボタン自体が変化してそれを合わせるタイプですね

今回は数字の変化にしたのでSpriteではなくLabelです
このようにclassはLabelでも作ることが出来ます

中身はたいしたことないですがontouchendでですね、this.textの値を1ずつ足していってます
ただ9の時1足すと10になっちゃいますからその時だけ0に戻しているというわけです

27~29行目で三つボタンを作って、31行目から決定ボタンです
こちらも今までやったことしかやってませんね
ontouchendでif正解の時の反応、違うなら不正解の反応とそれだけです
45行目のhidarikagiというのが鍵がかかっているかどうかの変数です、引き出し側のSpriteでtrueなら鍵がかかっている、falseなら引き出しを開けるようになっています


続いて上下にボタンパターンです
変化するものの上下にボタンがあって順周り・逆周りで変化させられるあれです

先ほどと似ていますが選択肢が多い場合はこちらの方がプレイヤーに優しいですね(間違えて通り過ぎても逆ボタン1回で戻せる)
にもかかわらず先ほどのが選択肢10個の数字で、こっちが選択肢6個というね。え~私は何がしたいんでしょうか?わかりません

中身です、今回は数字ではないのでSpriteです
当然ですがさっきの方がSpriteでも、こっちがLabelでも構いません

ontouchendでiroというのは下で作ってる実際に変化するものですが、それをthis.junの値によって変化対象を切り替えてそれのframeを変えています
先ほどと似ているのでとくに問題はないでしょう

が、

ブログ書きながら思ったのですが
this.junもontouchendもなしにして、112行目~115行目のあとにuesankaku.ontouchend = という風に一個一個書いていったほうがいいかもしれません
まあ動くからいいんですけど

117行目から下のボタンです
このようにclassを元にclassが作れるんですね
実は私も初めてやったのですが……

はじめてなので色々やってみたのですが、どうやら()の中、(ここではxとjunですが)これは設定しなおさないといけないようです
設定しないでやってみたらx座標はおかしなとこにあるしクリックしても反応しませんでした
ということで120と122行目で設定しています

そして163行目から変化するものを作って187行目から決定ボタンです
特に問題はないでしょう


最後にキーボードによる直接入力です
まずEntityを作ります
が、このEntityというのがですね、私もまだ不安なところなのですが誤解を恐れずに言うなら小麦粉です
で、Spriteが麺、Labelがパンです

要するにSpriteもLabelも元はEntityなんです、enchant.jsで使いやすいように設定してあるclassということになるわけです
たぶん、きっと、おそらくは……

詳しくはググってください

しかし入力フォームは設定が作られていないのでEntityから作るとそういうことなんです、そういうことなはずです。きっと

では219行目からいきます
まずinput要素を作ります、input要素とは単語でわかると思いますが入力関係の要素です

詳しくはググってください

クエリ名nyuuryokuをつけてますが、クエリ名ってなんですかとか聞かれても私はわかりません

詳しくはググってください

そしてinput要素の中にtypeがありましてその中のtextだといってるわけですが、入力フォームにも種類があってその中のtextだよということでしょう
ただデフォルトでtextらしいのでこれはなくてもいいっぽいです

詳しくは……(略

最大文字数はわかりますね、好きな数字を入れてください

文字の大きさは好きな数字を、文字を右寄せにしたい場合はcenterをrightに、左寄せにしたい場合はデフォなのでtext-align:自体書かなくていいです
そして私は背景に枠が書いてあるので枠を消しました、消したくない場合はこれも書かなくて結構です

え~、かなり無理やり乗り越えましたが動けばいいさの精神で一緒に乗り切りましょう

詳しくはググってください

で、247行目の._element.valueが入力された中身ということです
それで正誤判定をします

追記:正解入力後、入力フォームをいじれないようにする方法がわかりました
225行目の && doakagi === trueを消して、247行目以降の正解時の反応にnyuuryoku._element.setAttribute("readonly","readonly");を入れてください

これなら数字が消えずにすみます

そして260行目から鍵が開いたら表示される、クリックした時に鍵はもう開いていると表示されるSpriteをつくります
これは好き好きですので作っても作らなくても構いません、作る場合は必ず移動用の矢印等より上に書いてくださいね

といったところで前半終わり!
後半は決まった順番で押すボタン・電卓のように数字ボタンがある入力装置・碁盤の目に並べられた白黒切り替わるボタンを決まった配置にするや~つの三本でお送りします
ありがとうございました!!
スポンサードリンク

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

Comment

Comment Form
公開設定

Trackback


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