projects / vchess.git / blame
| Commit | Line | Data |
|---|---|---|
| 067c675b BA |
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 | ||
| 582df349 BA |
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 | ||
| 067c675b BA |
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 | ||
| 067c675b BA |
55 | </script> |
| 56 | ||
| 57 | </body> | |
| 58 | </html> |