| 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 | let x=100, y=100, size=40; |
| 41 | ctx.beginPath(); |
| 42 | ctx.moveTo(x + size * Math.cos(0), y + size * Math.sin(0)); |
| 43 | for (let side=0; side < 7; side++) { |
| 44 | ctx.lineTo(x + size * Math.cos(side * 2 * Math.PI / 6), y + size * Math.sin(side * 2 * Math.PI / 6)); |
| 45 | } |
| 46 | ctx.fillStyle = "#333333"; |
| 47 | ctx.fill(); |
| 48 | |
| 49 | var img = new Image(); |
| 50 | img.onload = function() { |
| 51 | ctx.drawImage(img, 0, 0, 60, 60); |
| 52 | } |
| 53 | img.src = "public/images/pieces/wb.svg"; |
| 54 | |
| 55 | </script> |
| 56 | |
| 57 | </body> |
| 58 | </html> |