Add some TODOs, some refactoring, first test for a future hexagonal board with canvas
[vchess.git] / 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>