Dowiedz się, w którym kafelku wylądowało kliknięcie myszy

Pracuję nad grą opartą na siatce izometrycznej i mam problem z połączeniem kliknięcia myszy użytkownika z kafelkiem. Udało mi się podzielić problem na 2 części:

• Znalezienie prostokąta otaczającego kafelek (co udało mi się zrobić)
• Zrozumienie z prostokąta, w który wylądował kliknięcie (doprowadziło mnie do zakłopotania)

Oto przykład prostokąta z płytkami w środku:

Prostokąt ma 70px długości i 30px wysokości, więc jeśli użyję danych wejściowych, powiedzmy 30x (góra) / 20y (lewa strona), jak mógłbym zająć się określeniem, do którego kafelka wpadł?

Za każdy krok, który zrobisz w kierunku x, przesuniesz 35 pikseli w lewo i -15 pikseli w górę do swojego płótna;

Za każdy krok, który zrobisz w kierunku y, przesuniesz -35px w lewo i -15px w górę na swoje płótno;

Oznacza to, że możesz łatwo przekonwertować układ współrzędnych kafelków na piksele:

(x, y) => (35 · x, -15 · x) + (-35 · y, -15 · y) = (35 · x - 35 · y, -15 · x - 15 · y) = ( Xpx, Ypx)

Musisz rozwiązać odwrotny problem, który znasz Xpx i Ypx i chcesz znać xiy (we współrzędnych kafelkowych).

Xpx = 35 · x - 35 · y;

Ypx = -15 · x - 15 · y;

możesz to rozwiązać? Powinno to być:

x = 1/70 · Xpx - 1/30 · Ypx

y = -1 / 70 · Xpx - 1/30 · Ypx

Oczywiście w ogólnym przypadku będziesz mieć wartości inne niż całkowite: wzięcie pułapu zarówno x, jak i y da ci współrzędną całej płytki.