Как увеличить скорость передвижения объекта?

Question

[Ibishka]

const moveEndlessly = () => {
   ctx.fillStyle = "#000";
   ctx.fillRect(0, 0, canvas.width, canvas.height);
   ctx.fillStyle = "#59982f";
   ctx.fillRect(x--, y, w, 20);
 };
 window.requestAnimationFrame(moveEndlessly);

Answer 1

[twobomb]

...
ctx.fillStyle = "#59982f";
x-=10;
ctx.fillRect(x, y, w, 20);
...

Comments

[Ibishka]

twobomb, Через setInterval делать бесконечно плохо? Лучше так?

const moveEndlessly = () => {
  ctx.fillStyle = "#000";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = "#59982f";
  x -= 10;
  ctx.fillRect(x, y, w, 20);
  window.requestAnimationFrame(moveEndlessly);
};

moveEndlessly();

[twobomb]

Ibishka, Лучше так

[twobomb]

Ibishka, А вообще-то нет, лучше так

var speed = 5;
var deltaTime  = 0;
var lastTime = Date.now();
(function(){
	deltaTime = (Date.now() - lastTime)/1000  ;
	lastTime = Date.now();
  ctx.fillStyle = "#000";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = "#59982f";
  x -= speed * deltaTime;
  ctx.fillRect(x, y, w, 20);
  window.requestAnimationFrame(arguments.callee);
})()

В таком случае даже при просадках фпс, игровой процесс не будет замедляться и квадрат сдвинется за то же время на то же расстояние что при 60 фпс что при 5 фпс