$4 ゲームを作ってみる

4-1 簡単なパズル

これまでの技術を使って、簡単なパズルを作ってみましょう。 パズルの内容は、次のとおりです。

• 六角形状に並べられた「マル」がある。
• ひとつのマルをクリックすると、その両側の２個のマルの色が変わる （クリックされたマルの色は変わらない）。
• 色は、白→赤→青→白、の順番で変わる。
• 以上のルールで、６個すべてのマルを同じ色に変化させられるか？

ということで作ってみましょう。

これは、プログラムとしては簡単で、クリックされた画像によって、別の画像を入れ換えるだけです。 パズルのロジックと言えるほどものはありません。
注意：下のパズルは、実際にはRubyで作られてます。

実際のパズル

パズルのデザイン

六角形をきちんと作ってもいいですけど、ここは簡単に表組みで済まします。 下のような感じです。

HTMLでは、単純な表でも「</TD><TD>」といった表現が何回もでてきます。 プログラムではそれらを変数にしておくことで、多少すっきりしたものになります。

  1: TR = '</TD></TR>\n<TR><TD>'
  2: TD = '</TD><TD>'
  3: 
  4: print '<TABLE><TR><TD>', \
  5: TD, Ball[0], TD, TR, \
  6: Ball[5], TD, TD, Ball[1], TR, \
  7: Ball[4], TD, TD, Ball[2], TR, \
  8: TD, Ball[3], TD, \
  9: '</TD></TR></TABLE>'

ここで「Ball[0]」といった部分（変数）がマル画像を表示し、さらにデータのリンクも付いたものになります。 このデータを作るのがプログラムの本質的な部分です。

データの形式

次に、マルがクリックされた時に、どういうデータをサーバーに送るかを考えます。
この場合は「どのマルがクリックされたか」と「現在のそれぞれのマルの色は何か」というデータで パズルの全ての状態が表現できます。
「それぞれのマルの色」は、「白、赤、青」を「0、1、2」で表すことにし、 これを６個並べて、その順番でどのマルが何色かを表します。 「どのマルがクリックされたか」は、マルの順番の数字で表します。
例えば「0102204」というのは「番号１、３、６のマルは白、番号２のマルは赤、番号４と５は青で、番号４のマルがクリックされた」となります。

プログラムの流れは、次のようになります。

1. 送られたデータを読む
2. 選ばれたマルが何か調べる
3. 選ばれたマルの両側のマルの色を変える
4. その他のマルの色はそのままにする
5. HTML文をつくる

それでは、実際にプログラムを紹介して解説しましょう。