Szybkość reakcji obiektu na zmianę klawisza

pytanie zadane 14 marca 2023 w JavaScript przez Dariusz Hozer Użytkownik (920 p.)




















var canvas=document.getElementById('canvas');
var c=canvas.getContext('2d');


let x = canvas.width/2;
 
let position_zero=canvas.width-700;

let position_end=canvas.width-30;

let y = canvas.height-30; 

let position_end_y= canvas.height-30; // granica dolna canvas

var Keys = {
   up: false,
   down: false,
   left: false,
   right: false
};




let position_zero_y=canvas.height-370; //granica górna canvas
let pos=400;

let speed_variable=20;

let initX=Math.random()*2;

let initY=0;

let initR=1;

let  initZ=Math.random();


function ball(){
      
    c.fillStyle='blue';
    c.fillRect(x,y,50,30);
    
}






setInterval(function() {

    c.clearRect(0,0, canvas.width,canvas.height);
    
    ball();
    rock();
    rock1();
    position();
   
},10);
    




















function position(){

   if (x>position_end){  // koniec ruchu na osi x
   
   x=670;
   
   } 
   
   if (x<position_zero){  // początek  ruchu na osi x
     
   x=0;
   
   }
   
    if (y<position_zero_y){ // początek  ruchu na osi y
       
       y=0;
    }
      if (y>position_end_y){ // koniec ruchu na osi y
   
               y=370;
         
          }
}


window.addEventListener('keydown', change_key_down,true);

window.addEventListener('keyup', change_key_up,false);

function change_key_down(e){
       
   
switch(e.keyCode){
      
   case 39:

      x+=speed_variable;
  
   
    break;
 
   case 37:

   x-=speed_variable;

      break;

    case 38:

    y-=speed_variable;
      break;
    

   case 40:
      y+=speed_variable;

      break;

}



} 





function change_key_up(keyup){
   

   switch(keyup.keyCode){
      
      case 39:
   
       
     
      
       break;
    
      case 37:
   

         break;
   
       case 38:

    
         break;
       
   
      case 40:
   
     
     
         break;
   
   }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="gra.css">
    <script src="control.js"></script>
    
    <script src="ball.js"></script>
    <script src="rock.js"></script>
    
    <title>GRA</title>
</head>
<body onload="start">
    <canvas id="canvas"  width="700" height="400"></canvas>


</body>
</html>

Kodzik działa, lecz chodzi mi o natychmiastową reakcję po wciśnięciu zmiany klawisza (kwadracik nie może na chwilę stanąć w miejscu). Czy da się to zrobić, czy jest to kwestia ustawień przeglądarki (używam Chroma) ?

komentarz 14 marca 2023 przez VBService Ekspert (253,100 p.)
edycja 14 marca 2023 przez VBService

Sprawdź to:

komentarz 19 marca 2023 przez Dariusz Hozer Użytkownik (920 p.)

https://github.com/dar23?tab=repositories Znaczy się miałem już false true (szukałem innych możliwości napisania kodu, w ramach szlifowania kodziku. Ale nie bardzo wiem, gdzie tą funkcję mam "wtegować" (requestAnimationFrame). Po usunięciu pętli setinterval nic nie działa (tak teraz to widzę, ale po zastanowieniu się, pewnie znajdę rozwiązanie) :)

1 odpowiedź

odpowiedź 14 marca 2023 przez rafal.budzis Szeryf (85,260 p.)
wybrane 19 marca 2023 przez Dariusz Hozer

Najlepsza

Musisz mieć zsynchronizowany ruch z pętlą czasu rzeczywistego. Do tego pętla czasu rzeczywistego powinna być zsynchronizowana z rysowaniem klatek przez przeglądarkę.

Twoją pętla czasu rzeczywistego jest stworzona przez setInterval na 10 ms przeglądarki mają ograniczoną liczbę FPSów do odświeżania monitora czyli np 60 FPS co daje jedną klatkę co 16 ms więc twoją pętla działa za szybko i jest rozsynchronizowana. Najlepiej używać requestAnimationFrame zamiast setInterval.

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Drugą ważną sprawą jest podział pętli czasu rzeczywistego na 2 bloki (update i draw). W update odczytujesz wartości z klawiatury oraz obliczasz inne rzeczy związane z przemieszczaniem obiektów np gdy dodajesz fizykę do gier. Następnie to wyświetlasz. Obecnie masz odwrotnie najpierw wyświetlasz nieaktualne dane potem wywołujesz position(); i dopiero w kolejnym rysowaniu rysujesz poprawną pozycje.

Aby móc sprawdzać klawiaturę w środku pętli robisz sobie zmienną która będzie miała zapisany obecny stan klawiatury.

const keys = [];
window.addEventListener("keydown", function (e) {
  keys[e.keyCode] = true;
});
window.addEventListener("keyup", function (e) {
  keys[e.keyCode] = false;
});

komentarz 14 marca 2023 przez rafal.budzis Szeryf (85,260 p.)

Jeśli chcesz popatrzeć jak dzielić draw i update łącznie z podejściem zorientowanym obiektowo to mozesz zerknąć w kod mojej starej gierki

https://budzis.pl/Wpisy/Programy/Ostatnia-choinka/

Kod ma prawie 10 lat więc nie ma requestAnimationFrame, ES6 i jest mój tragiczny nawyk mieszania nazw angielsko polskich ale w gruncie rzeczy działa :D

komentarz 19 marca 2023 przez Dariusz Hozer Użytkownik (920 p.)

Dzięki za pomoc :) Połapałem się wcześniej, że chodzi o wartości boolowskie :) true, false. Ale o synchronizacji mało wiedziałem :) Gierka nawet fajna. Teraz pewnie Cyberpunki produkujesz po 10 latach. :)