Попытка заставить мою игру «точка-точка» «привязать» к ближайшей точке

Question

Я знаю, что это простой расчет, но можете ли вы мне помочь?

Here's the fiddle.

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var radius = 4; 

for (x=radius; x<canvas.width-radius; x+=50) { 
    for (y=radius; y<canvas.height-radius; y+=50) { 
     context.beginPath(); 
     context.arc(x, y, radius, 0, 2 * Math.PI, false); 
     context.stroke(); 
    } 
} 
$('canvas').click(canvasClicked); 

function canvasClicked(e) { 
    var x = e.pageX - $(this).offset().left; 
    var y = e.pageY - $(this).offset().top; 
    context.beginPath(); 
    context.arc(x, y, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = 'black'; 
    context.fill(); 
    context.lineWidth = 1; 
    context.strokeStyle = '#000000'; 
    context.stroke(); 
}; 

Я пытаюсь определить, какой cirlce является наиболее близким к тому, где пользователь нажал.

Answer 1

Ответ здесь:

var newX = Math.round(x/50)*50 + radius; 
var newY = Math.round(y/50)*50 + radius; 
x = newX; 
y = newY; 

Вот скрипку для этого: http://jsfiddle.net/avall/vtEER/1/

Вы вокруг щелкнул положение к разрешению вашей точки генератора;

О, и вы должны следить за ребристые точки - не делать ifs для этого