Flashで神経衰弱を作る！

楽しいゲームの時間です。今回はカードゲームの定番「神経衰弱」をFlashで作成します。条件分岐がややこしいですが、配列・変数の管理をしっかりしてオリジナルの神経衰弱を作成しましょう！

クリックして色がマッチすると写真が見えてくる神経衰弱 Adobe Flash CS3 Professionalを使用してサンプルを作成しています。

配列とMath.random()を利用してランダムにカードを並べる

1.　サンプルのFlashをここからダウンロードしてください。内部には白い四角が並ぶレイヤー「card」、背面に写真が配置してあるレイヤー「Photo」。このレイヤー「card」が少しずつ消えていき、背景の写真が見えてくるというのが今回の流れです。

2.　次にレイヤー「card」に配置されているムービークリップ「cards」について見ていきます。このムービークリップは全部で12個左上から配置されていて、それぞれ「cards0」、「cards1」～「cards11」というインスタンス名が記入されています。

どれか一つの内部を展開してください。レイヤーが4つあり、上から「stop()」のみ記述された「action」レイヤー、「red」、「blue」～「purple」とラベルが付いている「label」レイヤー。インスタンス「blindfold」が配置されているレイヤー「blindfold」。最も下に先程のラベルに合わせて塗られているレイヤー「card」が用意されています。「blindfold」レイヤーを非表示にし、フレームを移動することで、同じムービークリップから複数の色のカードをめくり表示するという仕組みです。

3.　_rootに戻りレイヤー「action」の1フレーム目に以下のActionscriptを記述してください。

cardArray = new Array("red","blue","yellow","green","pink","purple","red","blue","yellow","green","pink","purple");


for(i = 0;i < 12;i++){
	myNum = Math.floor(Math.random()*cardArray.length);
	myCard = cardArray[myNum];
	this["cards"+i].gotoAndStop(myCard);
	cardArray.splice(myNum,1);
}

この部分は各カードのフレームを移動し2枚1セットになるよう並べている記述です。

1行目で配列を宣言しています。フレームに該当する色が2つずつ配列に含まれています。
2行目からのfor文で配置されているインスタンス「cards0」から「cards11」のフレームを移動しています。全部でカードは0～11の12枚なので繰り返しを続ける条件は「i = 0;i < 12; i++」となります。
3行目は見慣れたランダムな整数を求める式です。今回は「0～11」を取得出来た上で、カードの色が選択される度に一つずつ最大値が減る必要がありますから、最大値は定数ではなく配列の最大数である「cardArray.length」を利用しました。
4行目で表示するカードのラベルを配列から引き出し決定しています。「cardArray[配列番号]」で先程作成したランダムな番号に位置するラベルのデータを配列から引き出しています。
5行目で決まったラベルに「gotoAndStop()」をすることでフレームを移動してカードの色を変更しています。
6行目は使用したラベルのデータを配列から削除しています。「配列.splice(番号,個数)」でその配列の何番目からいくつ消去してその部分のデータを詰めるという形になります。

これで、12枚のカードは1色2枚で並べることができました。


次のページではカードをクリックしてめくれる機能を作っていきます。