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
Przesuwasz kontener pewnie przy pomocy position absolute ?
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
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ć.
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
Podrzuć kod funkcji która przesuwa kwadrat . Napisze ci to .
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
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
}
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.
ok na pewno się poprawię
co do kodu sprawa wygląda tak ,że kwadrat teraz sie nie porusza