こんばんは。
ひっさしぶりにバドミントンやったら全身筋肉痛になったので、
プロジェクターで天井に画面写してトラックボールとワイヤレスキーボードで、
ベッドの中で仕事してました、超真面目ワーカーあきらです。
今回は年末イベントで1人だけ納期内に完成できなかった神経衰弱みたいなアプリをつくってみようと思います。
準備
- トランプ画像
- 背景画像
- Complete時のGIF
こんだけですね
あとはまぁ関数の組み合わせだけです。
データソース要らないんで初心者向け？
（もう初心者向けってなんだかわからなくなってきた）
adobe stockで調べれば山のように出てきますので参照ください。
https://stock.adobe.com/jp/images/playing-cards-deck-full-complete/220211310
https://stock.adobe.com/jp/images/playing-cards-fall-on-a-black-table/290521309
こいつらを加工して作ってみました。
画像に名前を付ける
まずはバラシて一個一個に名前を付けてみます。
記号と数字で一意性定義できるので、こんな感じですか。
1枚「Back」って名前の裏面を書いておきます。
名前つけたらインポートしましょうか。
（某楽器アプリみたいになりましたね）
Collectionにぶち込む
ClearCollect(
colCard,
{
id: j1,
card: 14,
flag: 0
},
{
id: j2,
card: 14,
flag: 0
} //長いから割愛
);
ClearCollect(
colCard,
Shuffle(colCard)
)
まぁとりあえず画像とリンクさせるCollectionを作成して、
それをshuffleで返す！
ってのをOnStartで返してあげます。
そうするととりあえずゲームスタートしたら、順番ランダムでCollectionが生成します。
colCardというCollectionと定義します。
Galleryにぶち込む
あくまで上記手順は「生成」までですので
それを表示するGalleryが必要になります。
横のGalleryを追加してあげて、折り返しプロパティを4に設定
Itemsプロパティに先ほど定義した「colCard」というCollectionを入れてあげましょう。
そしてTemplateにImageコントロールを入れて、
Imageプロパティに
If(
ThisItem.flag = 0,
back,
ThisItem.id
)
と入れてあげましょう。
意味としては、「このアイテムのflagが0ならばbackって言うイメージを、そうでなければidの項目と同じ名前のイメージを表示してね」って意味ですね。
Collection生成時、すべてのflag列は「0」としたので、全て裏向きのイメージが出来上がったと思います。
flagの値で状態を定義する
例えば
| flag | 状態 |
| 0 | トランプが裏の状態 |
| 1 | トランプがめくられている状態 |
| 2 | トランプがめくられていてかつゲーム終了まで裏にならない状態 |
| 3 | トランプがめくられていてかつ三枚めくるときに裏になる状態 |
こんな風に定義します。
あとは流れで説明しますが、
下の図みたいな構造でいきます。
あとは画面の動きで説明します！（めんどくさくなってきた）
ゲームを始める状態ではすべてflagは0(裏側の画像表示)
- 1枚めくるとcolHandというCollection（下部）に1枚目のカードが格納される
- 同時にflagを1にして「めくられた札」という状態にする
2枚目のカードをめくると
- Collectionに同じように格納
- Galleryの中の枚数を数えて2枚になっていたら右上のtoggleがオンになる
- toggleがオンになったらOnCheckプロパティで正誤判定（正ならflagを2にそうでなければflagを3に）をしてすかさずオフに
Galleryの中にある札で
flagが2なら次の挙動でもめくられたまま
flagが3なら次の挙動で裏に戻る
というのをGalleryの中のImageコントロールのOnSelectに定義してあげれば良いです。
そしてすべてのカードのflagが2になれば、隠してあったGif（なんでもいいです）が見えるようになればゲームとして成立しますね。
あとは
- 下のGalleryを消去
- toggleを非表示
- Try Againボタンでカードのshuffleと全てのidを0にする
という挙動を作成できれば完了です。
これで神経衰弱が作成できます。
タイム計測してタイムアタック方式にしてランキング保存とかでも面白いかもしれません。
次のステップ
実はですね。
このtoggleを使った機構を考え出したのはコルネさんという方なのです。
ある日夜な夜なおばちゃんに召集がかけられ、
「うちの生徒が作るアプリを手伝って！！！！！！！（大声）」
と言われ、界隈の重鎮たちが一同に会した会がありまして、
そこでコルネさんが天才的な閃きでサクッと作ってしまったわけです。
重鎮たちも賞賛の嵐！
いやはや凄い技術者です。
そんなコルネさんのブログがこちらです。
ワタシのブログとは比べ物にならないくらい技術が詰まったブログなので、穴が開くほど見てください。
もともと教育に使うための機構を考えて作成しようと思っていたので、
例えば日本語と英単語を同一IDにして表示させ、ペアを集めていくみたいなアプリだと、勉強しながら遊べるかもしれません。
ん？それ面白いな…
作って売るか…
というわけで作ったら（大事なところ隠して）公開します！！
