htdocs/go.js

   1 var canvas = document.getElementById("game-canvas");
   2 var context = canvas.getContext("2d");
   3
   4 var boardSize = 19;
   5 var border = canvas.width / 10;
   6 var boardWidth = canvas.width - (border * 2);
   7 var boardHeight = canvas.height - (border * 2);
   8
   9 var cellWidth = boardWidth / (boardSize - 1);
  10 var cellHeight = boardHeight / (boardSize - 1);
  11
  12 var lastX;
  13 var lastY;
  14
  15 drawGrid();
  16
  17 function drawGrid()
  18 {
  19         var backgroundColor = '#F5DEB3';
  20         var gridColor = '#8B4513';
  21
  22         context.fillStyle = backgroundColor;
  23         context.fillRect(0, 0, canvas.width, canvas.height);
  24
  25     context.fillStyle = gridColor;
  26
  27         for (var i = 0; i < boardSize - 1; i++)
  28         {
  29                 for (var j = 0; j < boardSize - 1; j++)
  30                 {
  31                         context.fillRect(i * cellWidth + border, j * cellHeight + border, cellWidth - 1, cellHeight - 1);
  32                 }
  33         }
  34
  35         var quater = Math.floor((boardSize - 1) / 4);
  36         var markerSize = 8;
  37         var markerMargin = (markerSize / 2) + 0.5;
  38
  39         context.fillStyle = backgroundColor;
  40
  41         if (!!(boardSize % 2))
  42         {
  43                 context.fillRect((((boardSize - 1) / 2) * cellWidth) + border - markerMargin, (((boardSize - 1) / 2) * cellWidth) + border - markerMargin, markerSize, markerSize);
  44         }
  45
  46         context.fillRect((quater * cellWidth) + border - markerMargin, (quater * cellWidth) + border - markerMargin, markerSize, markerSize);
  47         context.fillRect((((boardSize - 1) - quater) * cellWidth) + border - markerMargin, (quater * cellWidth) + border - markerMargin, markerSize, markerSize);
  48
  49         context.fillRect((((boardSize - 1) - quater) * cellWidth) + border - markerMargin, (((boardSize - 1) - quater) * cellWidth) + border - markerMargin, markerSize, markerSize);
  50         context.fillRect((quater * cellWidth) + border - markerMargin, (((boardSize - 1) - quater) * cellWidth) + border - markerMargin, markerSize, markerSize);
  51
  52         var size = canvas.width / 40;
  53         var textSpacing = 10;
  54         context.fillStyle = '#000000';
  55     context.font = size + "px Arial";
  56
  57         for (i = 0; i < boardSize; i++)
  58         {
  59                 context.fillText((i + 1), textSpacing, ((canvas.height - border) - (i * cellHeight)) + (size / 3));
  60                 context.fillText((i + 1), canvas.width - (size + textSpacing), ((canvas.height - border) - (i * cellHeight)) + (size / 3));
  61
  62                 context.fillText((String.fromCharCode(97 + i)), (border + (i * cellHeight) + (size / 3)) - (size / 1.5), textSpacing + size);
  63                 context.fillText((String.fromCharCode(97 + i)), (border + (i * cellHeight) + (size / 3)) - (size / 1.5), canvas.height - (textSpacing * 2));
  64         }
  65 }
  66
  67 canvas.addEventListener('mousedown', function(evt)
  68 {
  69     if (lastX && lastY) {
  70         placeStone((lastX * cellWidth) + border, (lastY * cellWidth) + border, 'rgba(0, 0, 0, 1)');
  71     }
  72 });
  73
  74 canvas.addEventListener('mousemove', function(evt)
  75 {
  76         var position = getGridPoint(evt);
  77
  78         if ((position.x != lastX) || (position.y != lastY))
  79         {
  80                 drawGrid();
  81
  82                 if (((position.x >=0) && (position.x < boardSize)) && ((position.y >=0) && (position.y < boardSize)))
  83                 {
  84                                         placeStone((position.x * cellWidth) + border, (position.y * cellWidth) + border, 'rgba(0, 0, 0, 0.2)');
  85                 }
  86         }
  87
  88         lastX = position.x;
  89         lastY = position.y;
  90 });
  91
  92 function placeStone(x, y, color)
  93 {
  94         var radius = cellWidth / 2;
  95
  96         context.beginPath();
  97         context.arc(x, y, radius, 0, 2 * Math.PI, false);
  98         context.fillStyle = color;
  99         context.fill();
 100         context.lineWidth = 5;
 101 }
 102
 103 function getGridPoint(evt)
 104 {
 105         var rect = canvas.getBoundingClientRect();
 106
 107         var x = Math.round((evt.clientX-border-rect.left)/(rect.right-2*border-rect.left)* boardWidth);
 108         var y = Math.round((evt.clientY-border-rect.top)/(rect.bottom-2*border-rect.top)* boardHeight);
 109
 110         var roundX = Math.round(x / cellWidth);
 111         var roundY = Math.round(y / cellHeight);
 112
 113         return {
 114           x: roundX,
 115           y: roundY
 116         };
 117 }