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
Zarejestruj się i dołącz do największej społeczności programistów w Polsce.
Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.