15パズル - 1

さて、最初に紹介するのは15パズルです。

4x4のマス目に収まった15個のコマを、ひとつだけ空いたマスを利用して並べ替え順番を揃えるゲーム。
図を見てもらえばすぐにわかるでしょう。
コマはドラッグでまとめて動かせるようにします。
つまり、図でいえば、空きマスの隣の3や14のコマを空きマスの位置へ動かせるだけでなく、左下の1のコマを右にドラッグすると隣の15と3のコマが押されて動くということです。


さっそく、プロジェクトの作成から説明します。

(1) Xcodeを立ち上げ、メニューバーの[ファイル→新規プロジェクト]で表示されるウィンドウで、左側の[iPhone OS]の[Application]をクリック、右側に表示される[View-Based Application]を選択して、適当なプロジェクト名を入力して[保存]ボタンを押しプロジェクトを作成します。プロジェクト名は、ここでは<puzzle15>としました。

(2) <puzzle15>の名前のついたプロジェクトウィンドウが立ち上がりますので、ここに必要なクラスファイルを追加していきます。
 メニューバーの[ファイル→新規ファイル]を選び、表示された新規ファイルのテンプレート選択画面で、左側の[iPhone OS][Cocoa Touch Classes]をクリック、右側に表示された[UIView subclass]をクリックして[次へ]ボタンを押します。続いて表示されるウィンドウで、ファイル名を<Piece.m>と入力して[完了]ボタンを押します。ファイル名の下に「同時に"Piece.h"も作成」というセレクトボックスがありますが、これはチェックしたままにして下さい。他の項目もデフォルトのまま。
 これで、UIViewサブクラスを継承するPieceサブクラスのファイル、<Piece.h>と<Piece.m>がプロジェクトに追加されました。

(3) 同様にして、これもUIViewサブクラスを継承するGameBoadサブクラスのファイル、<GameBoad.h>と<GameBoad.m>をプロジェクトに追加して下さい。

(4) もうひとつサブクラスを作りますが、今度はNSObjectを継承するサブクラスです。新規ファイルのテンプレート選択画面で、[UIView subclass]ではなく[NSObject subclass]を選び、あとは同様にファイル名を<PieceMng.m>として<PieceMng.h>と<PieceMng.m>をプロジェクトに追加します。
 これで、クラスファイルの追加は終わりです。

以上の作業で、puzzle15プロジェクトウィンドウに、次のファイルが作成されていることが確認できるはずです。


 GameBoad.h
 GameBoad.m
 Piece.h
 Piece.m
 PieceMng.h
 PieceMng.m
GameBoadは4x4の15パズルのマス目全体を表すクラス、Pieceは1から15の各コマを表すクラス、PieceMngは各Pieceを管理するクラスです。

(5) さて、ここでPieceの画像15個も追加しておきましょう。70ピクセルx70ピクセルpng画像で、<pieceNN.png>(NNは01〜15)という名前を付けます。ぼくはGimpで作りましたが、面倒なら下の画像をダウンロードして使って下さい。





 この画像を一個ずつでもまとめてでもいいですからドラッグして、プロジェクトウィンドウの左側のファイル一覧の[Resources]フォルダにドロップします。確認画面が出ますがデフォルトのまま[追加]ボタンを押すと画像がプロジェクトに追加され、以降プログラム内から使用できようになります。

 なお、こうして追加した画像はファイルそのものがプロジェクトにコピーされたわけではなく、ファイルの参照がプロジェクトに登録されているだけです。元の画像ファイルを別のフォルダに移動したりゴミ箱に捨てたりするとプロジェクト画面からもファイルが迷子になってしまいますので、画像ファイルはあらかじめプロジェクトが保存されたフォルダなどにしまっておいてから、上記のプロジェクトへ追加することをお勧めします。

さて、これで準備が整いました。
次回は、各サブクラスの中身を説明していきます。