計算と分岐

座標やサイズは、数を直接書く代わりに計算で出せる。使う記号が演算子。足す +、引く -、かける *、割る /、余りの %。

間隔を gap という名前にして、gap * 0、gap * 1、gap * 2 で位置をずらす。かけ算と足し算で「何番目」を座標にしている。gap を変えると間隔がまとめて動く。

中央へ置くなら (画面の幅 - size) / 2。幅から四角の幅を引いて、半分にする。引き算と割り算の組み合わせ。

% は割った余り。800 % c.canvas.width は、画面の幅をはみ出た 800 を幅で折り返す。範囲に収めたいときに使う。

分岐

if は、条件が正しいときだけ中を実行する。x > c.canvas.width / 2 は「右半分か」の判定で、正しい（true）か正しくない（false）になる。下は位置で色を変える。x を 100 にすると左半分なので、色が変わる。

if と else で値を選ぶだけなら、三項演算子で一行に書ける。条件 ? 正しいときの値 : そうでないときの値。