あらすじ
今回のタスクは下記のとおりです。
- オセロのマス目を線で引く
- コマをマウスプレスで置く
そこまで行ってみたいと思います！頑張りましょう。
仕様・ヒント
盤面
まずはsetupの中でcreateCanvasを使って400x400ピクセルのキャンバスを用意しましょう。
function setup() {
createCanvas(400, 400);
}
オセロには8x8の盤面が必要です。400x400ピクセルのキャンバスがありますので、マスの大きさは分かり易いと思います。
背景
drawでは、まず1枚前のフレームの画像を消して、緑に塗りたいと思います。おすすめは0,140,0です。
function draw() {
background(0,140,0);
▶︎ この段階で実行すると、400x400の緑色の四角が見えるはずです。
線を一本
盤面の線は黒で描きたいと思いますので、strokeで色を変える必要はありません。
まずは縦線を一本描きましょうか？line関数を使って、xがマスの幅というところで縦線を描きましょう。
// lineの使い方
line(start_x, stary_y, finish_x, finish_y);
// 縦線の描き方
var x = square_size; // square_sizeがマスの幅になっているイメージです
line(x, 0, x, height);
縦線ですので、yは0からキャンバスの縦長まで。height変数はp5jsで用意されていて、常にキャンバスの縦長が取得できます。
▶︎ この段階で実行すると、400x400の緑色の四角に黒い縦線が1本が付いているのが見えるはずです。
縦線（全部）
line呼び出しを16回などは反則とします。ここはforループを使いましょう。
いろんなxで縦線を描きたいですね。x=0やx=width（キャンバスの横幅）には線があってもなくても構いませんが、その間の7本は確実に描きたいですね。
ループでxを増やしながら線を描いていきましょう！
まずは、一つのループで縦線を全部描きましょう。
for(let i = 1; i < 8; i++){
line(i * square_size, 0, i * square_size, height);
}
▶︎ この段階で実行すると、400x400の緑色の四角に黒い縦線が7本付いているのが見えるはずです。
横線（全部）
縦線と同じくforループを使って描きましょう。xとyの引数をそれぞれ置き換えると、横線になります。
使うforは同じですので、xとyを反転したline呼び出しを横線に使ったforの中に入れてもいいですね。
▶︎ この段階で実行すると、400x400の緑色の四角に黒い縦線・横線が7本ずつ付いているのが見えるはずです。