FLASHでピクロス(お絵かきロジック、イラストロジック、ノノグラム)

Question

FLASHでピクロス(お絵かきロジック、イラストロジック、ノノグラム)のパソコン用ゲームを作りたいのですが、作り方がまったくわからず困っております。
凝ったものでなくでも簡単なもので結構ですので、作り方を教えていただけたら嬉しいです。よろしくお願い致します。

ActionScript2.0を使用して作れるものでお願い致します。
現在、間違い探し・シューティングなどの簡単なゲームは作れるのですが、ピクロスとなるとまったくわからず…。

http://tonakai.aki.gs/picturelogic/
ちなみにこちらのサイトさまのようなゲームは理想ですが、作れないと思いますのでもっと簡単にしたもので結構です。（マウスを置いた場所の縦・横の線に色がつく→つかない、時間カウントなし等）

よろしくお願い致します。

DPE · Accepted Answer

＃１、２です。

＃１のスクリプトに誤りがありました。
function Game_Judge 内の

> for( j = i ; ( j < row ) && ( judge == 1 ) ; j++ )

は、正しくは

for( j = 0 ; ( j < row ) && ( judge == 1 ) ; j++ )

（ ↑　j の初期値は、i ではなく 0 ）
でした。
失礼いたしました。
この場をお借りしまして、訂正させていただきます。

それから、＃２で正誤判定の話が分かりにくくなってしまったのですが。
要するに、配列変数で持っている絵のデータと、対応するマスの状態（＝フレームの番号）を照合し、正解であれば変数 judge に 1 が、誤りであれば 0 が入ります。そういう、おまじないの式だと思ってくださっても構いません。
ビット演算につきましては、興味がありましたら解説サイトなどで調べてみてください。いろいろなことに使える、便利な演算です。

DPE · Answer

＃１の解説です。

次のような絵を描くとします。

■ ■ □ □ ■ ■
　□ □ ■ ■ □ □

空白の□を 0 、塗りつぶす■を 1 に置き換えると、この絵は

1 1 0 0 1 1
　0 0 1 1 0 0

と表せます。
縦と横の、表のような並び方にも注目してください。２次元配列で表わせそうですね。

＊ ＊ ＊

マスは１つずつムービークリップを配置します。
フレームに□・■・×の絵を描いておくと、このムービークリップはどんな状態を表す絵にも化けられます。
見た目のことだけでなく、現在のフレームを見ると、マスが塗りつぶされているのかどうかも判断できます。

このようにして作ったムービークリップを、必要なマスの数だけ配置します。
名前は、固定の名前（サンプルでは cell ）に、配列変数のインデックスに合わせた番号を付けて命名します。例えば、左上のマスは cell00 です。
これで、cell＋列＋行というように変数を使って参照できる上、配列変数との関連も持たせることができます。

なお、マスは数が多いため、canvas という別のムービークリップを作ってその子にしています。
問題を付ける時も数字のマスが多くなりますから、縦と横で１つのムービークリップにまとめておくと、位置を決める時に便利です。

＊ ＊ ＊

絵が完成したかどうかは、配列変数と対応するマスのフレームを照合して調べます。
配列変数で 1 のところはフレーム２、0 のところはフレーム１か３になっていれば正解で、全てのマスが正解ならクリア、１つでも誤りがあればミスです。
＃１のサンプルでは、この判定を

judge = ( dot_data[ i ][ j ] ^ check_data ) & 1;

というビット演算で行っています。

ビット演算は２つの２進数を１桁ずつ見て、両者の関係で 0 または 1 が決まる演算です。
ムービークリップの絵を□→■→×の順に描くには理由があります。
それぞれのフレームの番号を２進数に直すと、この３つは 01 ・ 10 ・ 11 と表せます。ゲームでの特性が似ている□と×は実は、フレーム番号を２進数で表すと下１桁が 1 であるという、隠れた共通点もあるのです。

ビット演算の詳細はよそに譲りまして、簡単に言いますと、^ （ XOR ）は片方だけが 1 であれば 1 、それ以外は 0 になる演算です。
それから、今回は下１桁しか必要ないので、1 で & （ AND ）を取って下１桁だけを取り出します。
すると、絵のデータの 1 （塗りつぶす）と■のフレーム番号 2、絵のデータ 0 （塗りつぶさない）と□・×のフレーム番号 1 または 3 とでは、1 という結果を得ることができます。
しかし、■のところを□や×にしたり、□のところを■にした時は 0 になります。
この特性を利用して、各マスと絵のデータを照合します。

基本的には for ループを二重にして全部調べるのですが、誤りが見つかった時はその時点で打ち切るようなループを考えます。
ActionScript の for は、２番目の条件が成立している間だけループが継続する仕組みです。
正誤を保持する変数（サンプルでは judge ）を１つ用意して、全部調べるほかに「この変数が 1 である間」という条件を加えます。
先のビット演算で調べた結果を judge に入れます。judge が 1 である、つまり正解である時はループが継続して次のマスを調べますが、0 （誤り）だった場合は継続条件が不成立になってループが打ち切られます。
従って、ループが終了した時、judge が 1 のままなら全部正解で最後のマスまでチェックされ、0 であればどこかに誤りがあって中断されたということになります。
あとはループの後でこの judge の値を見て、クリアもしくはミスの処理を行えばいいわけです。

－ － － － －

今回は問題の表示や自動作成の部分まではご紹介できませんが。
絵のデータを 1 と 0 にして２次元配列変数で持つと、縦または横方向に 1 がいくつ連続しているかを調べることも容易になります。
自動作成は 1 が連続する数を変数に控えておき、１列もしくは１行単位でまとめて１つのヒントにする、といった方法になるかと思います。

自動作成のプログラムは難しいので、まずはスクリプトで固定の問題データを用意し、問題の表示とその通りに正誤を判定する作品あたりから始めてみてはいかがでしょう。

DPE · Answer

問題はひとまず置いて、クリックでマスを塗りつぶし、絵のデータと一致していればクリアと判定するサンプルをご紹介します。
（ Flash Player 7 以降、ActionScript 1.0 / 2.0 ）

【操作方法】
マスをクリックするごとに□→■→×と切り替わり、×の次は□に戻ります。
判定ボタンを押すたびに正誤を判定します。

■ ■ □ □ ■ ■
　□ □ ■ ■ □ □

このように塗りつぶすとクリアです。×は□と同じ扱いになります。
１箇所でも誤りがある場合はクリアになりません。

【作例】
20 × 20 の□・■・×の順に１フレームごとに絵を描いたムービークリップを作り、リンケージ（ ID は” CELL ”）を設定します。
ステージに判定ボタンを配置し、インスタンス名を” judge_btn ”と付けます。
次のスクリプトをメインのタイムラインのフレーム１に記述して、プレビューで動作を確認してみてください。
（↓　各行頭に全角のスペースが入っています。コピーする際はご注意ください）

//＊ ＊ ＊

/*
　　初期設定
　*/

//絵のデータ
　dot_data = new Array();
　dot_data =
　[
　　[ 1 , 1 , 0 , 0 , 1 , 1 ],
　　[ 0 , 0 , 1 , 1 , 0 , 0 ]
　];

//キャンバスのセル数とマス１つあたりの大きさ
　row = dot_data[ 0 ].length;
　col = dot_data.length;
　cell_w = 20;
　cell_h = 20;

//キャンバスを作り、仮に(100,50)に配置
　base = this.createEmptyMovieClip( "canvas" , this.getNextHighestDepth() );
　base._x = 100;
　base._y = 50;

/*
　　塗りつぶしと終了判定
　*/

function Put_Dot()
　{
　　//クリックするごとにフレームを進め、□→■→×の順に切り替える
　　//×の次は□に戻る
　　this.gotoAndStop( ( this._currentframe % 3 ) + 1 );
　}

function Game_Judge()
　{
　　var i , j , judge;
　　var check_data;

//絵のデータとマスの状態を照合
　　//誤りが見つかったら処理を打ち切る
　　judge = 1;
　　for( i = 0 ; ( i < col ) && ( judge == 1 ) ; i++ )
　　{
　　　for( j = i ; ( j < row ) && ( judge == 1 ) ; j++ )
　　　{
　　　　check_data = base[ "cell" + i + j ]._currentframe;
　　　　judge = ( dot_data[ i ][ j ] ^ check_data ) & 1;
　　　}
　　}

//ループ終了後もjudgeが1ならクリア、0の場合はミス
　　if( judge == 1 )
　　{
　　　trace( "クリア！！" );
　　}
　　else
　　{
　　　trace( "ミス！！" );
　　}
　}

/*
　　マスを配置する関数
　*/

function Cell_SetUp()
　{
　　var i , j;
　　var clip_name;
　　var clip;

for( i = 0 ; i < col ; i++ )
　　{
　　　for( j = 0 ; j < row ; j++ )
　　　{
　　　　//列と行の数だけマスを配置
　　　　clip_name = "cell" + i + j;
　　　　clip = base.attachMovie( "CELL" , clip_name , base.getNextHighestDepth() );
　　　　clip._x = cell_w * j;
　　　　clip._y = cell_h * i;

//クリックした時の処理
　　　　clip.onRelease = Put_Dot;
　　　}
　　}
　}

/*
　　マスの配置と、判定ボタンの設定
　*/

Cell_SetUp();
　judge_btn.onRelease = Game_Judge;

//＊ ＊ ＊

字数制限の都合上、説明は次の回答でいたします。

FLASHでピクロス(お絵かきロジック、イラストロジック、ノノグラム)

＃１、２です。

＃１の解説です。

問題はひとまず置いて、クリックでマスを塗りつぶし、絵のデータと一致していればクリアと判定するサンプルをご紹介します。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング