山傘のプログラミング勉強日記

プログラミングに関する日記とどうでもよい雑記からなるブログです。

[JavaScript] 〇×ゲーム

HTML と JavaScript で〇×ゲーム

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

コードについて

マスの描画

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 ×) の種類、勝敗、ターンを管理すれば良いです。