hexaboard_test.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title> Chess Board</title>
   5 </head>
   6
   7 <body>
   8
   9 <canvas id="myCanvas" width="560" height="560" style="border:2px solid #d3d3d3;">
  10 Your browser does not support the HTML5 canvas tag.
  11 TODO: describe chessboard ?
  12 </canvas>
  13
  14 <script>
  15
  16 // TODO: draw hexagonal board, allow click and drag pieces
  17 // ==> work with coordinates and current board size as a parameter
  18
  19 var c=document.getElementById("myCanvas");
  20 var ctx=c.getContext("2d");
  21
  22 for(i=0;i<8;i++)
  23 {for(j=0;j<8;j++)
  24 {ctx.moveTo(0,70*j);
  25 ctx.lineTo(560,70*j);
  26 ctx.stroke();
  27
  28 ctx.moveTo(70*i,0);
  29 ctx.lineTo(70*i,560);
  30 ctx.stroke();
  31 var left = 0;
  32 for(var a=0;a<8;a++) {
  33     for(var b=0; b<8;b+=2) {
  34       startX = b * 70;
  35       if(a%2==0) startX = (b+1) * 70;
  36       ctx.fillRect(startX + left,(a*70) ,70,70);
  37     }}
  38 }}
  39
  40 var img = new Image();
  41 img.onload = function() {
  42         ctx.drawImage(img, 0, 0, 60, 60);
  43 }
  44 img.src = "public/images/pieces/wb.svg";
  45
  46
  47 </script>
  48
  49 </body>
  50 </html>