○×ゲームを作る (1)　ステージを作る

Processing を使って○×ゲームを作ります。2人でプレイし、1人が○、もう一人が×を使って3×3のマス目を交互に埋め、自分の記号で縦・横・斜め、いずれか1列を先に作った人が勝ちという、あれです。英語名ではTic Tac Toeと言うそうです。

では早速。まずはステージを作ります。ステージには正方形3マス×3マスが必要です。大きさは600×600としておきます。line関数を使って縦に2本、横に2本の線を引きます。line関数は、line(始点のx座標,　始点のy座標,　終点のx座標,　始点のy座標);　というふうに記述します。background(255); で、背景を白に設定しています。

void setup(){
  size(600, 600);
  background(255);
  line(0, 200, 600, 200);
  line(0, 400, 600, 400);
  line(200, 0, 200, 600);
  line(400, 0, 400, 600);
}

これで以下のようなステージができます。

続いて○が書けるようにしましょう。クリックされたら、マウスの x, y の座標に円を描けるようにします。円を書く関数はellipseです。ellipse(x座標,　y座標,　円の幅,　円の高さ) というふうに記述します。fill(255) で、塗りの色を白にすることができます。上記のsetupに続いて、とりあえず以下のように書いてみます。

void draw(){
  if(mousePressed){
    fill(255);
    ellipse(mouseX, mouseY, 150, 150);
  }
}

すると、以下のようになります。あれ、マウスをドラッグすると、どこにでも円がかけてしまうよ･･･。

現状では、マスの中に円を描くようにしていませんので、修正しましょう。どこをクリックしてもマスの中心に円が収まるようにするにはどうすればいいでしょうか？例えば以下のよう書くことができます。

int X, Y;
void setup(){省略}
void draw(){
  if(mousePressed){
    X = mouseX / 200;
    Y = mouseY / 200;
    fill(255);
    ellipse(X*200+100, Y*200+100, 150, 150);
  }
}

新しく変数 X, Y を用意し、クリックしたときのマウスのx座標とy座標を一度200（1マスの幅・高さ）で割り、その端数を捨て X, Y に代入します。この時点で X, Y には、0,1,2 のいずれかが入力されていることになります。0は1列目（段目）、1は2列目（段目）、2は3列目（段目）を意味しています。その値に200（1マスの幅・高さ）を掛け、マスの中心の座標になるように100を加えることで、それぞれのマス中心の x, y 座標を得ることができます。これで、それぞれのマス目の中心に○が描けるようになりました。（この 0,1,2 は後で使います）

続きはまた明日～。