Wątek: Dopasowywanie postaci do tła mapy.

Witam chcę zrobić dopasowywanie postaci do tła mapy. Znaczy to, że chce, aby w:

Kod php:

$(document).ready(
    function(){
    
        }
); 


wstawić kod który będzie względem mapy dopasowywał tak aby nie było czarnego tła tylko, obrazek był na środku nie przesunięty.
Ps: kiepski jestem z matmy i nie ogarniam zmiennych
Moje zmienne potrzebne do stworzenia kodu :

Wysokość diva mapy : 9x32
Szerokość diva mapy : 12x32
var x; (pozycja gracza wysokość)(podane w klatkach 1 klatka 32)
var y; (pozycja gracza szerokość)(podane w klatkach 1 klatka 32)
var sm; (szerokość tła mapy to znaczy obrazka po którym się poruszamy)(podane w klatkach 1 klatka 32)
var wm; (wysokość tła mapy to znaczy obrazka po którym się poruszamy)(podane w klatkach 1 klatka 32)

Proszę o pomoc

Skoro masz wymiary to przy każdym ruchu, sprawdzasz czy ilość kratek z każdej strony jest większa lub równa minimum. Nic trudnego, nie trzeba być dobrym z matmy aby to napisać.

Zakładając że twoja postać jest w centrum kwadratu 3x3, a mapa ma 10x10, przy każdym ruchu sprawdzasz "ile masz do krawędzi". Jeśli postać ma 1 kratkę do krawędzi "odrywa się" od centrum i nie przesuwasz ekranu tylko samą postać.

Jeśli szukasz frajera który ci to napisze, to tutaj raczej takich nie ma.

A propos, jak długości można przedstawiać jako wymiary? Pole może mieć 5x5, natomiast długość i szerokość to 5 i 5 a nie 5x5 i 5x5... Nic dziwnego że napisać skryptu nie potrafisz, odległość zapisujesz w metrach czy metrach do kwadratu?

Po pierwsze chodziło mi o jednorazowe ustawienie mapy przy ładowaniu.

Napisałem taki kod, ale nie działa poprawnie to znaczy że działa dobrze na jednym obrazku a na większym już nie ?:

Kod php:

$(document).ready(
    function(){
    
    if(wm < wm-x){
    $('div#map').css({'margin-top' : -(x-9)*32+'px'});
    }
    
    if(x+(wm-3)/2 > wm){
    $('div#map').css({'margin-top' : -(x-17.5)*32+'px'});
    }
    
    if(sm < sm-y){
    $('div#map').css({'margin-left' : -(y-12)*32+'px'});
    }
    
    if(y+(sm)/6 > sm){
    $('div#map').css({'margin-left' : -(y-24)*32+'px'});
    }
    
    
    
    }
    

); 


ps : 9x32 tz : 1 klatka = 32 piksele !

pomyłka w 1 poscie miało być


Wysokość diva mapy : 18x32
Szerokość diva mapy : 24x32