Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JS] canvas. Jak zwiększyć prędkość ruchu elementu sterowanego klawiaturą z zachowaniem płynności ruchu?, Wyjaśnienie problemu z filmikami i kod po wejściu
gburhiphop
post 16.08.2018, 00:18:20
Post #1





Grupa: Zarejestrowani
Postów: 57
Pomógł: 0
Dołączył: 12.07.2016

Ostrzeżenie: (0%)
-----


Filmik przedstawia efekt kodu zamieszczonego poniżej (kod nie cały, tylko to w czym problem)
https://streamable.com/s43im
Chodzi o to "skakanie" kulki, szarpanie wynikające z tego, że w kodzie dałem zmianę x i y o 8. Gdy było 1 kulka przesuwa się powoli:
https://streamable.com/cyagg
Próbowałem też funkcję dzielnik() wywoływać z innym odświerzaniem. Efekt - miganie kulki

Kod wygląda tak:

[JAVASCRIPT] pobierz, plaintext
  1.  
  2. function dzielnik(){
  3. ctx.beginPath();
  4. ctx.arc(dzielnikX,dzielnikY,dzielnikRadius,0,2*Math.PI);
  5. ctx.stroke();
  6. }
  7.  
  8. function dzielnikPosition(e){
  9. switch(e.keyCode) {
  10. case 37:
  11. dzielnikX=dzielnikX-8;
  12. dzielnik();
  13. break;
  14. case 38:
  15. dzielnikY=dzielnikY-8;
  16. dzielnik();
  17. break;
  18. case 39:
  19. dzielnikX=dzielnikX+8;
  20. dzielnik();
  21. break;
  22. case 40:
  23. dzielnikY=dzielnikY+8;
  24. dzielnik();
  25. break;
  26. }
  27. }
  28.  
  29. document.addEventListener("keydown", dzielnikPosition);
  30.  
  31. function game(){
  32. dzielnik();
  33. }
  34.  
  35. setInterval(game, 17);
  36.  
[JAVASCRIPT] pobierz, plaintext


Ten post edytował gburhiphop 16.08.2018, 00:25:07
Go to the top of the page
+Quote Post
markuz
post 16.08.2018, 12:00:49
Post #2





Grupa: Zarejestrowani
Postów: 1 240
Pomógł: 278
Dołączył: 11.03.2008

Ostrzeżenie: (0%)
-----


Możesz wprowadzić dodatkowa zmienną, a dokładnie 2:
speedX = 0;
speedY = 0;

I teraz w zależności od ruchu dodajesz/odejmujesz od speedX. speedY przy czym - musisz pilnować, żeby speed nie było za duże/za małe i dodatkowo przy każdej iteracji speed dąży do 0 - tak aby po puszczeniu klawisza kulka się sama zatrzymała.

Dodatkowo użyj: https://developer.mozilla.org/pl/docs/Web/A...tAnimationFrame zamiast setInterval.

Ten post edytował markuz 16.08.2018, 12:01:36


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 21:08