[vchess.git] / hexaboard_test.html

<!DOCTYPE html>
<html>
<head>
<title> Chess Board</title>
</head>

<body>

<canvas id="myCanvas" width="560" height="560" style="border:2px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
TODO: describe chessboard ?
</canvas>

<script>

// TODO: draw hexagonal board, allow click and drag pieces
// ==> work with coordinates and current board size as a parameter

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

for(i=0;i<8;i++)
{for(j=0;j<8;j++)
{ctx.moveTo(0,70*j);
ctx.lineTo(560,70*j);
ctx.stroke();

ctx.moveTo(70*i,0);
ctx.lineTo(70*i,560);
ctx.stroke();
var left = 0;
for(var a=0;a<8;a++) {
    for(var b=0; b<8;b+=2) {
      startX = b * 70;
      if(a%2==0) startX = (b+1) * 70;
      ctx.fillRect(startX + left,(a*70) ,70,70);
	}}
}}

let x=100, y=100, size=40;
ctx.beginPath();
ctx.moveTo(x + size * Math.cos(0), y + size * Math.sin(0));
for (let side=0; side < 7; side++) {
	ctx.lineTo(x + size * Math.cos(side * 2 * Math.PI / 6), y + size * Math.sin(side * 2 * Math.PI / 6));
}
ctx.fillStyle = "#333333";
ctx.fill();

var img = new Image();
img.onload = function() {
	    ctx.drawImage(img, 0, 0, 60, 60);
}
img.src = "public/images/pieces/wb.svg";

</script>

</body>
</html>
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>