Poruszanie obiektu klawiszem w określonym obszarze

0

Witam jestem początkujący więc proszę o wyrozumiałość :D

Powiedzmy ,że mamy kontener 800x400 i w nim element 10x10, udało mi się za pomocą switcha w magiczny spodób sprawić by element się popruszał po naciśnięciu opowiedniego klawisza ,ale jak sprawić by dany element poruszał się tylko wewnątrz kontenera?

pzdr

0

Przesuwasz kontener pewnie przy pomocy position absolute ?

0
NikolaPolov napisał(a):

Przesuwasz kontener pewnie przy pomocy position absolute ?

Kontener ma position: relative , a element wewnątrz ma position: absolute , chciałbym aby ten wewnątrz nie wyjeżdżał poza obramowanie kontenera

pzdr

1

Pytanie - czy znasz z góry rozmiary kontenera/pojemnika oraz czy są one niezmienne?

Jeśli tak, to najprościej będzie przy każdym przesunięciu sprawdzać, czy aktualne położenie jeszcze się mieści w granicach. Przykładowo - początkowo odległość "przesuwanego czegoś" od lewej krawędzi pojemnika niech wynosi 60. Przy każdym przesunięciu przesuwasz "coś" o 10 jednostek - tak więc po pierwszym ruchu "coś" będzie miało odległość od krawędzi 50, przy drugim - 40 itp. Przy szóstym dojdzie do krawędzi. I teraz - jeśli użytkownik ponownie wciśnie klawisz, który ma przesunąć "coś" w lewo, Ty sprawdzasz, że odległość "czegoś" od krawędzi już nie pozwala wykonać kolejnego przesunięcia, w efekcie czego nic nie robisz.

Mam nadzieję, że rozumiesz o co mi chodzi - starałem się dość prosto to napisać.

0
cerrato napisał(a):

Pytanie - czy znasz z góry rozmiary kontenera/pojemnika oraz czy są one niezmienne?

Jeśli tak, to najprościej będzie przy każdym przesunięciu sprawdzać, czy aktualne położenie jeszcze się mieści w granicach. Przykładowo - początkowo odległość "przesuwanego czegoś" od lewej krawędzi pojemnika niech wynosi 60. Przy każdym przesunięciu przesuwasz "coś" o 10 jednostek - tak więc po pierwszym ruchu "coś" będzie miało odległość od krawędzi 50, przy drugim - 40 itp. Przy szóstym dojdzie do krawędzi. I teraz - jeśli użytkownik ponownie wciśnie klawisz, który ma przesunąć "coś" w lewo, Ty sprawdzasz, że odległość "czegoś" od krawędzi już nie pozwala wykonać kolejnego przesunięcia, w efekcie czego nic nie robisz.

Mam nadzieję, że rozumiesz o co mi chodzi - starałem się dość prosto to napisać.

Dzięki za podpowiedź

Generalnie wymiary kontenera to 800 szer. i 400 wys. wewnątrz jest kwadracik 10x10 ,który ma poruszac się o jeden px w zależności od kierunku.
Kwadrat w startowej pozycji jest top: 0; i left:0;
próbowałem na tej zasadzie ,żeby określić 2 zmienne z top i left -1 i 790, 390 + instrukcja jeżeli mniejsze od -1 zmienna to powrót do wartości początkowej(jak wywołać stop?) i analogicznie druga zmienna.
Reasumując nie wskórałem za wiele ,a im dłużej pisałem tym coraz większe bzdury się pojawiały :D

Cerrato twoja koncepcja jest dla mnie zrozumiała ,o ile ciężej jest mi to przełozyć na sam kod js.

pzdr

0

Podrzuć kod funkcji która przesuwa kwadrat . Napisze ci to .

0
NikolaPolov napisał(a):

Podrzuć kod funkcji która przesuwa kwadrat . Napisze ci to .

function move_me(){
$(document).on('keydown', function(event){

    let klawisz = event.which;
    let kwadrat = $('#quadrat');

    switch(klawisz){
        case 37:
        console.log('lewo');
            kwadrat.css('left', '-=1');
            break;
        case 38:
        console.log('góra');
            kwadrat.css('top', '-=1');
            break;
        case 39:
        console.log('prawo');
            kwadrat.css('left', '+=1');
            break;
        case 40:
        console.log('dół');
            kwadrat.css('top', '+=1');
            break;
    }
});

}

dzieki

1
let klawisz = event.which;
let kwadrat = $('#quadrat');

if(klawisz === 37 && kwadrat.style.left > 0){
        console.log('lewo');
        kwadrat.style.left -= 1
}else if(klawisz === 38 && kwadrat.style.top > 0){
    console.log('góra');
    kwadrat.style.top -= 1
}else if(klawisz === 39 && kwadrat.style.left < 790){
    console.log('prawo');
    kwadrat.style.left += 1
}else if(klawisz === 40 && kwadrat.style.top < 390){
    console.log('dół');
    kwadrat.style.top += 1
}
0

Super bardzo Ci dziękuje :D
Jak tylko pojawię się w domu to biorę się za pisanie.

pozdrawiam

0

A tak w ogóle - to taka porada/uwaga do Was obu (@NikolaPolov oraz @PinHead) - najlepiej kod umieszczać na https://jsfiddle.net/ - w ten sposób nie trzeba niczego u siebie przepisywać, wszyscy mają dostęp do danych skryptów i od razu widzą, jak się one zachowują, a ponadto wprowadzone zmiany mogą być od razu widoczne dla innych uczestników rozmowy.

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0