Fix bug when updating a move in game.vue
[vchess.git] / _tmp / hexaboard_test.html
CommitLineData
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;">
10Your browser does not support the HTML5 canvas tag.
11TODO: 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
19var c=document.getElementById("myCanvas");
20var ctx=c.getContext("2d");
21
22for(i=0;i<8;i++)
23{for(j=0;j<8;j++)
24{ctx.moveTo(0,70*j);
25ctx.lineTo(560,70*j);
26ctx.stroke();
27
28ctx.moveTo(70*i,0);
29ctx.lineTo(70*i,560);
30ctx.stroke();
31var left = 0;
32for(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
40let x=100, y=100, size=40;
41ctx.beginPath();
42ctx.moveTo(x + size * Math.cos(0), y + size * Math.sin(0));
43for (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}
46ctx.fillStyle = "#333333";
47ctx.fill();
48
067c675b
BA
49var img = new Image();
50img.onload = function() {
51 ctx.drawImage(img, 0, 0, 60, 60);
52}
53img.src = "public/images/pieces/wb.svg";
54
067c675b
BA
55</script>
56
57</body>
58</html>