Illustration of the sample solution

Illustration of the sample solution

Just an illustration of the sample solution (attached pdf).
AttachmentSize
Downloadapplication/pdf MasyuExample.pdf10.84 KB
3 posts / 0 new
Last post
For more complete information about compiler optimizations, see our Optimization Notice.

I'm using the following code to visualize the problem. Feel free to use it if it helps:







//	Generated - begin
var width = 7;
var height = 7;
var black = [ 6, 1, 1, 3, 5, 6, 1, 5,  ];
var white = [ 3, 1, 4, 2, 4, 3, 7, 4, 4, 4, 7, 5, 2, 6, 5, 7,  ];

var pathr = 1;
var pathc = 7;
var path = "DDDDDLDLLLULLUUUURDDDRUUUURRDDLDDRRUUUUR";
//	Generated - end


//	Variables
var cellSize = 30;
var radius = 12;
var boardColor = "#008000";
var gridColor = "#004000";
var pathColor = "#ff0000";
var canvas = document.getElementById("masyu");
var ctx = canvas.getContext("2d");
var t;

//	Board
canvas.width = (width + 1) * cellSize;
canvas.height = (height + 1) * cellSize;

ctx.fillStyle = boardColor;
ctx.fillRect(cellSize, cellSize, canvas.width - cellSize, canvas.height - cellSize);

ctx.fillStyle = gridColor;
ctx.textAlign = "center";

var halfCellSize = cellSize / 2;

for(var i=0; i<=width; i++) {
	t = (i + 1) * cellSize;
	if(i > 0)
		ctx.fillText("" + i, t - halfCellSize, cellSize * 0.8);
	line(ctx, t, cellSize, t, canvas.height-1);
}

for(var i=0; i<=height; i++) {
	t = (i + 1) * cellSize;
	if(i > 0)
		ctx.fillText("" + i, halfCellSize, t - halfCellSize);
	line(ctx, cellSize, t, canvas.width-1, t);
}

ctx.strokeStyle = gridColor;
ctx.stroke();

//	Circles
ctx.fillStyle = "#000000";
drawCircles(ctx, black);

ctx.fillStyle = "#ffffff";
drawCircles(ctx, white);

//	Path
if(path) {
	var pathx = pathc * cellSize + halfCellSize;
	var pathy = pathr * cellSize + halfCellSize;

	ctx.beginPath();
	ctx.arc(pathx, pathy, radius * 0.25, 0, 2 * Math.PI, false);
	ctx.closePath();
	ctx.fillStyle = pathColor;
	ctx.fill();

	ctx.moveTo(pathx, pathy);
	for(var i=0; i



The output is:

// 0)
ctx.fillText("" + i, t - halfCellSize, cellSize * 0.8);
line(ctx, t, cellSize, t, canvas.height-1);
}

for(var i=0; i<=height; i++) {
t = (i + 1) * cellSize;
if(i > 0)
ctx.fillText("" + i, halfCellSize, t - halfCellSize);
line(ctx, cellSize, t, canvas.width-1, t);
}

ctx.strokeStyle = gridColor;
ctx.stroke();

// Circles
ctx.fillStyle = "#000000";
drawCircles(ctx, black);

ctx.fillStyle = "#ffffff";
drawCircles(ctx, white);

// Path
if(path) {
var pathx = pathc * cellSize + halfCellSize;
var pathy = pathr * cellSize + halfCellSize;

ctx.beginPath();
ctx.arc(pathx, pathy, radius * 0.25, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fillStyle = pathColor;
ctx.fill();

ctx.moveTo(pathx, pathy);
for(var i=0; i


Note: This won't work in IE < 9

That's awesome akki! Thanks for saving me from having to write the same thing :)

Leave a Comment

Please sign in to add a comment. Not a member? Join today