boardのスターティングポイントを示す

[tkwonn]

storeに格納 // 2 players CORNER_STARTING_POINT_TWO = [[0, 0], [13, 13]]; // 4 players CORNER_STARTING_POINT_FOUR = [[0, 0], [0, 13], [13, 0], [13, 13]];

methods: {
    draw(ctx) {
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

      for (const [row, col] of CORNER_STARTING_POINT) {
        ctx.beginPath();
        const [x, y] = this.getStartingPoint(row + 0.5, col + 0.5);
        // arc(x, y, radius, startAngle, endAngle, counterclockwise)
        ctx.arc(x, y, 30 * 0.15, 0, Math.PI * 2, false);
        ctx.fillStyle = "#cccccc";
        ctx.fill();
      }
      ctx.beginPath();
      for (let x = 0; x <= 14 * 30; x += 30) {
        ctx.moveTo(0.5 + x, 0);
        ctx.lineTo(0.5 + x, 14 * 30);
      }

      for (let x = 0; x <= 14 * 30; x += 30) {
        ctx.moveTo(0, 0.5 + x);
        ctx.lineTo(14 * 30, 0.5 + x);
      }

      ctx.strokeStyle = "black";
      ctx.stroke();
    },
    getStartingPoint(row, col) {
      return [0.5 + col * 30, 0.5 + row * 30];
    },
  },