オブジェクト指向でないコードで書いた15パズルの完成

ボタンを動かすコードを書く

前回は15パズルのデザインを作成しました。今回は実際にパズルを実行するプログラムを書きましょう。このパズルに必要な機能はいくつかありますが、まず「タイルを動かす」プログラムから作っていくことにします。

15パズルのデザインを表示している「デザイナ」で「12」のボタンをダブルクリックします。すると次のようなコードができます。

ここにコードを書くと、「12」のボタンであるbutton12をクリックしたときに実行することができます。画面（その上にあるボタンを含みます）をクリックすることは「イベント」であり、その「クリックイベント」を捕捉するものが「イベントハンドラ」です。

初心者向けの書籍では、ここでできたコードを「イベントハンドラ」と呼ぶことが多いですが、厳密には「イベントハンドラによって実行されるメソッド」です。厳密な意味での「イベントハンドラ」のコード、クリックイベントを捕捉するコードはVisual Studioが自動的に作ってくれていて、表面上は見えなくなっています。

このようにVisual Studioにはプログラマーの操作により必要なコードを自動生成する機能があり、またそれをバックグラウンドに隠して見えなくし、肝心なコードだけを表示して開発しやすくする機能を持っているのです。

では、ボタンを動かすコードを書きましょう。この状態で「12」のボタンをクリックすると、空きスペースに移動することになりますが、実際はそこに見えない「16」のボタンがあるので、「16」のボタンと位置を交換することになります。ボタンの位置はプロパティのTopとLeftで決まります。一時的に値を保持する変数swapPosを作り、それぞれのTopとLeftを交換します。コードは次のようになります。

Visual Studioで緑の三角「開始」ボタンをクリックするか、「デバッグ」メニューの「デバッグの開始」でビルドしてプログラムを実行します。パズルが表示されたら「12」のタイルをクリックすると、タイルは空白の場所に移動します。

しかし、これだけでは困ります。タイルを動かすことができるのは、空白の場所である「16」のタイルと接している場合だけです。そこでタイルを動かす条件を決めます。タイルを動かせる条件を「横に接している場合」と「縦に接している場合」の2つの場合に分けて考えます。「横に接している場合」は、両方のタイルのTopの値が同じで、Leftの値の差が100です。「縦に接している場合」はタイルのLeftの値が同じで、Topの値の差が100です。それぞれ条件式にして、交換するコードを内側に記述します。コードは次のようになります。

これでボタン「12」を正しい条件で動かすことができるようになりました。ほかのボタンも動かせるようにするには、同じコードを残りの14個のボタンに書かなければいけません。まずボタンをクリックしてイベントハンドラとイベントハンドラによって実行されるメソッドを自動的に作り、内側にコードを書きます。コードはコピーできますが、それぞれ対応するボタンの名前を変更しなければいけません。これは根気のいる繰り返し作業になります。またTopとLeftの値を入れ替えるときに使う一時的な変数swapPosの定義は、コードの先頭に移しておきましょう。次の位置です。

完成を判定するコードを書く

次にパズルの完成を判定するコードを書きます。パズルの完成はどう判定すればよいでしょう。タイルの位置で判断すればよさそうです。ボタン「1」から「4」のTopの値は0、「5」から「8」のTopは100、のようにTopの値を判定し、ボタン「1」「5」「9」「13」はLeftの値が0、「2」「6」「10」「14」はLeftの値が100というように、すべてのボタンのTopとLeftの値を判定するメソッドを作ります。すべてのTopとLeftの値が判定できれば「Complete!」のメッセージボックスを表示することにしましょう。コードは次のようになります。

このメソッドは、タイルを動かすたびに判定したいので、すべてのボタンのクリックイベントで実行されるメソッドの最後でcomplete()メソッドを呼び出します。たとえばボタン「1」のクリックイベントで実行されるメソッドは次のようになります。

ここまでできたら、一度Visual Studioで緑の三角「開始」ボタンをクリックするか、「デバッグ」メニューの「デバッグの開始」でビルドしてプログラムを実行しましょう。パズルが表示されたら「12」か「15」のタイルをクリックして動かし、もう一度クリックして元の位置に戻します。完成の「Complete!」のメッセージボックスが表示されればプログラムは正しく動いています。

タイルをランダムに並べ替えてゲームを初期化するコードを書く

ゲームを開始する際にはタイルがランダムになっている必要があります。そこでプログラムの実行時に、まずタイルをランダムに交換するコードを実行することにしましょう。プログラムの実行時に実行したいコードは、フォームのLoadイベントで実行するようにすればいいでしょう。Loadイベントハンドラとイベントハンドラによって実行されるメソッドを作るには、デザイナでフォームの何もないところをダブルクリックします。このプログラムではフォームの内側はすでにボタンで敷き詰められているので、フォームの上部、タイトルバーをダブルクリックするとよいでしょう。次のようなコードが表示されます。

ボタンをダブルクリックして生成するコードと同様に、ここで見えているのは「Loadイベントハンドラによって実行されるメソッド」です。「Loadイベントハンドラ」は別のところに生成していて隠されています。ここにコードを書くと、フォームがロードされたときに実行させることができます。

タイルをランダムに交換するには、Randomクラスを使って乱数を作り、その番号のボタンが「16」のボタンと位置を交換するようにします。対象のタイルは「1」から「15」の15枚なので、乱数は1から15を作り、case文で分岐するようにします。交換するコードは各ボタンのクリックイベントハンドラによって実行されるメソッドをコピーして使います。サンプルコードは次のようになります。

これで15パズルが完成しました。コード全体は次のようになります。Visual Studioで緑の三角「開始」ボタンをクリックするか、「デバッグ」メニューの「デバッグの開始」でビルドしてプログラムを実行しましょう。デバッグのときはForm1_Loadメソッドにあるボタンの位置交換の繰り返し回数を減らしておくのがよいかもしれません。「for (int i=1 ; i<2000 ; i++)」のiの値を2000から20程度に変更すればよいでしょう。そうすればデバッグ時には少しのタイル移動でパズルが完成します。2000のままだとタイルが大きく動いてしまい、テストのたびにひたすら15パズルを解かされることになりますからね。

初期化の入れ替え回数を20回にした起動画面の例

初期化の入れ替え回数を2000回にした起動画面の例

ここまでのサンプルコードは以下のようになります。

次回は、上記のコードの問題点を確認しながらオブジェクト指向によるプログラミングを始めてみましょう。