Разработка координат сетки в javascript?

Question

Если у меня есть сетка 3 x 3 из 50 пиксельных квадратов, которые нумеруются 1-9 по горизонтали, как показано ниже;

| 1 | 2 | 3 |

| 4 | 5 | 6 |

| 7 | 8 | 9 |

Если я знаю, что число квадратов говорит, например, квадрат 9, а ширина квадратов в этом примере - 50 пикселей, как я могу программно выработать координату квадрата на основе системы координат 0, 0, начиная с левого верхнего положения.

площади 9 в этом случае будет x = 100 и y = 100,

Я попытался это до сих пор, но это не удается,

x = (squareNumber * squareWidth) 
y = (squareNumber * squareHeight) 

Answer 1

Общая формула:

x = (squareNumber - 1) % numberOfSquaresPerRow * squareWidth 
y = (squareNumber - 1)/numberOfSquaresPerCol * squareHeight 

В вашей так как это сетка 3 x 3, это будет:

x = (squareNumber - 1) % 3 * squareWidth 
y = (squareNumber - 1)/3 * squareHeight 

В JavaScript, который не использует целочисленное деление, вы должны использовать следующие для y:

y = Math.floor((squareNumber - 1)/3) * squareHeight 

Answer 2

var width=50,height=50; 
function gridPos(n){ 
     var pos={}; 
     pos.x=(n -1)%3*width; 
     pos.y=Math.floor((n-1)/3)*height; 
     return pos; 
} 
pos=gridPos(8); 
console.log("pos is " + pos.x + " " + pos.y);