【16日目】オセロ②

課題の回答例：クリックした位置に石を配置する

ポイントは下記の部分です。

クリックで取得できる座標は、HTML上の x, y 座標であって、CANVAS上の x, y ではないということがポイントです。(ブラウザのHTMLの中にCANVASが存在しており、その相対的な位置を取得する必要があるということです)

さあ、サンプルコードをいじって実際に確かめてみましょう。

Copycopy code to clipboard
1var rect = event.target.getBoundingClientRect();
2x = event.clientX - rect.left;
3y = event.clientY - rect.top;

クリックした座標じゃなくて、マスに合わせて配置したい

現状のコードだと、マスの境目など中途半端な位置にも自由に石を配置出来てしまうので、下記のように修正します。

Copycopy code to clipboard
1// 20 + 40n に配置されるようにすれば良い
2// % は 割り算の余りを取得する演算子
3// 例1. 158%40 なら 38 (158-38+20=140に配置すればマスに綺麗に収まる)
4// 例2. 171%40 なら 11 (171-10+20=180に配置すればマスに綺麗に収まる)
5x = x - x % 40 + 20 // キリが良い箇所に配置されるようにx座標を補正
6y = y - y % 40 + 20 // キリが良い箇所に配置されるようにy座標を補正

石を配置した座標を記憶

配列に入れるデータを 1:white 2:black として石の位置を記憶しておく (0, 0) が左上、(7,7) が右下のマスをそれぞれ表す。

課題： 石を置けるかの判定ロジックを追加しよう

置けない場所に石を配置した際は警告を出します。 複雑な処理を実装する場合は 簡単な実装からやってみると`吉`です

ステップ1. すでに石が置いてある箇所には置けない

• 置く場所が分かれば、その位置のデータが0かどうかで判別できる 簡単

ステップ2. 隣接するマスに石がない箇所には置けない

• 配列をうまく操作しよう 少し難しい

ステップ3. 石をひっくり返せない位置には置けない

• かなり難しい

ステップ3がノーヒントで実装出来たら中級者です！頑張りましょう

次回はこちら JavaScript道場：17日目 / オセロ③