三目並べ
画面描画
三目並べでは下の画像のように 9 つのマスから一つを選び「マル」か「バツ」を描いていきます。 現在アプレットの縦と横のサイズは変更していなければ 300 になっていると思います。 そこで 1 マスを下図(左)のように縦横それぞれ 100 で区切ります。
このマスを表すのに次の二次元配列を用意します。上図(左)の各マスに、上図(右)の配列要素が対応します。
int[][] BANMEN= new int[3][3];
次は画像を用意します。今回はココからダウンロードしてください。 ダウンロードができたら、画像を格納するための「 Image 型 」の 3 つの変数を作ります。
Image img_space, img_maru, img_batsu;
そして、init メソッドの中でそれぞれの画像を変数に格納します。
public void init() {
addMouseListener(this);
img_space = getImage(getCodeBase(), "space.png");
img_maru = getImage(getCodeBase(), "maru.png");
img_batsu = getImage(getCodeBase(), "batsu.png");
}
getImageは次のような引数を持ちます。
getImage(URL, "ファイル名");
先はURLの部分にgetCodeBase()と書きましたがこれはプログラムが置いてあるURLをさしています。
また得た画像を描画するためにはdrawImageメソッドを使います。このメソッドを使ってBANMENの 各要素が何であるかを判断し「 マル 」であれば「 マルの画像 」を描画していきます。
01 public void paint(Graphics g){
02
03 for(int i = 0; i < 3; i++){
04 for(int j = 0; j < 3; j++){
05
06 if(BANMEN[i][j] == MARU){
07 g.drawImage(img_maru, j*100, i*100, this);
08 }else if(BANMEN[i][j] == BATSU){
09 g.drawImage(img_batsu, j*100, i*100, this);
10 }else{
11 g.drawImage(img_space, j*100, i*100, this);
12 }
13 }
14 }
15 }
上のソースでは int 型の BANMEN の要素に「 MARU 」などの文字を入れています。 しかし実際には、int 型の中に文字を入れることは出来ないので次のようにします。
final int SPACE = 0, MARU = 1, BATSU = -1;
「 final 」をつけて変数を作ると、その変数の値を変えることができなくなります。 つまり、定数とすることができます。 こうすることで、数字を文字に見立てることができプログラムが見やすくなります。
Copylight (c) ガメラボ 2006 - All Rights Reserved