[JavaScript] 〇×ゲーム

HTML と JavaScript で〇×ゲーム

最近こちらのブログの更新が出来ていなかったので、JavaScript の canvas の勉強を兼ねて〇×ゲームを作りました。

コードについて

マスの描画

3行3列のマスを描画したいので、縦線と横線を4本ずつ描きます。キャンバスの2D レンダリングコンテキストを使って、線を描きます。

function drawBoard(context, row, col, width, height) {
  for (let i = 0; i <= row; i++) {
    context.beginPath();
    context.moveTo(i * width, 0);
    context.lineTo(i * width, 300);
    context.stroke();
  }
  for (let i = 0; i <= col; i++) {
    context.beginPath();
    context.moveTo(0, i * height);
    context.lineTo(300, i * height);
    context.stroke();
  }
}

となります。

クリックされた位置

canvas 内でゲームを行うので、クリックされた位置がマスのどの位置にいるかが分かれば、マスに描画を行うことができます。

const rect = e.target.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const idx = getPointToIndex(x, y, c_width, c_height);

function getPointToIndex(x, y, c_width, c_height) {
  return [Math.floor(x / c_width), Math.floor(y / c_height)];
}

ゲーム情報

ゲーム情報は大雑把に分けて、マスに置かれたコマ(〇 or ×) の種類、勝敗、ターンを管理すれば良いです。

ゲームで学ぶJavaScript入門 HTML5&CSSも身につく！