課題 (10:キャンバス)
作業について
今回の課題は以下のパッケージに作成してください。
| パッケージの名前 |
|---|
| j1.lesson10 |
作成するクラスの名前は問題ごとに指示があります。下記を参照してください
課題の提出方法については下記を参照してください。
また、別のコンピューター上に移動する際には、下記を参考にプログラムを持ち帰ってください。
新しい内容
今回、キャンバスに関する新しい内容はありません。
問題
| 作成するクラスの名前 |
|---|
| LightsOutS2 |
キャンバスを使って「ライツアウト」というゲームを作成してください。
ライツアウトのルール
このゲームは縦横5マスの全25マスがあって、初期状態ではすべてのマスがピンク色に塗られています。
どこかのマスをクリックすると、そのマスと隣り合う上下左右1マスずつの計5マスが白く塗りつぶされます。下図は初期状態から中央のマスをクリックした例です。
どのマスをクリックしても、そのマスと隣り合う上下左右のマスの色が変わります。そこに白いマスが含まれていた場合、そのマスはピンク色に塗られます。下図は先ほどの状態から、中央の一つ右のマスをクリックした例です。
端のマスをクリックした場合、隣り合うマスの一部が存在しないため、5個より少ないマスの色が変わります。下図は先ほどの状態から、一番左下のマスをクリックした例です。隣り合う左のマスと下のマスが存在しないため、合計3マスだけ色が変わりました。
次々と押して行って、全てのマスを白くしたらゲームは終了です。
今回はこのゲームを作成するにあたって、いくつかのステップに分けてプログラムを書けるように問題を作成しました。この手順を無視して自由に作成してもかまいません。
a. マスの描画とクリックの判定
まずは格子状のマスを描画し、その中にマスの位置を下図のように書いてください。この例では、(50, 50)から(450, 450)まで、1マスを縦横80で描画しています。
さらに、それぞれのマスをマウスでクリックできるようにしてください。マスがクリックされたら、そのマスの位置をメッセージダイアログに表示するようにしてください。また、メッセージダイアログを表示し終わったら、続けて次のマスをクリックできるようにしてください。ただし、マスの外をクリックした場合には何もせずに次のマスをクリックできるようにしてください。
b. 2次元配列の操作
次に、ライツアウトのゲームと同じ構造を持つ整数の配列を作成してください。この配列のそれぞれの要素に、1が入っていたらピンク色の状態、0が入っていたら白の状態を表すことにします。初期状態ではすべてのマスがピンク色なので、全ての要素に1を代入します。
先ほど画面上に描画してもらった「マスの位置」は、この配列のインデックスに対応させます。つまり、(x, y)は配列のmatrix[x][y]に対応します。
それぞれのマスをクリックしたら、対応する配列の要素が1であればその要素を0に、0であればその要素を1に変更するようにしてください。また、変更後の値をメッセージダイアログで表示するようにしてください。
さらに、マスの値を変更するごとに、「全てのマスが0であるかどうか」を判定するようにしてください。すべてのマスが0であったら「Lights Out」とメッセージダイアログに表示し、プログラムを終了します。
c. マスを描画するメソッドの作成
次に、マスの位置を元に、そのマスを塗りつぶすメソッドを作成してください。また、そのメソッドは3つ目の引数として0か1かの整数を受け取り、0であればそのマスを白く塗りつぶし、1であればピンクで塗りつぶすようにしてください。
さらに、それぞれのマスをマウスでクリックしたときに、メッセージダイアログの代わりにこのメソッドを起動してマスを塗りつぶすようにしてください。また、格子を描画し終わったら、全てのマスをピンク色に塗りつぶしてください。
これで、少しライツアウトらしくなってきます。中央のマスをクリックすると、次のように中央のマスだけ白く塗りつぶされるはずです。
続けて、右隣のマスをクリックすると、そのマスも白く塗りつぶされます。
すべてのマスをクリックすると、「Lights Out」と表示されてプログラムは終了です。
また、白いマスをクリックしてピンク色に戻るかどうかも試してみてください。
d. 隣り合うマスの反転
最後に、クリックしたマスの隣り合う上下左右のマスの色も反転するように変更してください。ただし、端のマスをクリックした際には注意が必要です。
以上で「ライツアウト」というゲームは完成です。