囲碁アプリケーションをつくる(3)〜canvasで碁盤を描画する〜

2017/10/04

▼囲碁アプリケーションをつくるシリーズ
囲碁アプリケーションをつくる(1)
囲碁アプリケーションをつくる(2)〜ざっくりとした仕様とバージョン管理〜

▼GitHub
https://github.com/shogo0525/go

***

第3回目では、canvasで碁盤を描画していくことにします。

まずはcanvasタグを使って碁盤を描画するための準備をします。canvasのサイズを変更をしたいため、canvasタグのwidth属性、height属性を加えます。今回は、19路盤というサイズが入るように600*600の枠を用意しておきます。

<canvas id="board" width="600" height="600"></canvas>

次に、JavaScriptを使ってcanvasに碁盤の線や背景をごにょごにょ描画していきます。まだコード量が少ないので、bodyの中にscriptを書いてしまいました。

  <script>
    var canvas = document.getElementById("board");
    var ctx = canvas.getContext("2d");
    var boardSize = 19;
    var cellSize = 30;

    ctx.fillStyle = "#cc9900";
    var outerSize = cellSize * (boardSize + 1)
    ctx.fillRect(0, 0, outerSize, outerSize);

    for(var i = 1; i <= boardSize; i++) {
      ctx.lineWidth = 1;
      ctx.strokeStyle = "#000000";

      ctx.beginPath();
      ctx.moveTo(cellSize, cellSize * i);
      ctx.lineTo(cellSize * boardSize, cellSize * i);
      ctx.stroke();

      ctx.beginPath();
      ctx.moveTo(cellSize * i, cellSize);
      ctx.lineTo(cellSize * i, cellSize * boardSize);
      ctx.stroke();
    }
  </script>

まずcanvasを取得してから、getContextを使って描画するためのコンテキストを取得します。あとはそのコンテキストを操作して描画していきます。

ポイントとしてはfor文を使って、ロジカルに碁盤の線を描画していくところですね。事前にboardSize(碁盤のサイズ)とcellSize(マスのサイズ)を変数として定義しておけば、うまく使いまわしていけます。

boardSizeを9や13に変えると、自動的に9路盤や13路盤を描画してくれるようになっています。

▼こうしてできあがったのがこちらの19路盤(画像)▼

ただの四角の羅列と、茶色い背景を用意するだけで、碁盤に見えてきますね!

次は、碁盤をクリックしたら碁石が表示されるようにしたいと思います!

●今回のプログラムを実際に見るにはこちらからそうぞ