Apakah yang salah dengan pembolehubah dan nilai dir?

Question

rreeee

Saya baru sahaja menulis kod pertama saya, cuba membuat animasi penyelamat skrin DVD atau sesuatu, tetapi atas sebab tertentu kod saya terus bercelaru di sudut; Bolehkah anda membantu saya menyelesaikannya? Tolong jangan menilai kerana ini adalah kod pertama saya dan jika anda boleh membetulkannya dengan menukar nilai dan kandungan dan sebenarnya menggunakan logik yang sama, saya menggunakannya di sana.

Answer 1

Saya mengubah suai logik anda sedikit dan memisahkan pengiraan kelajuan mendatar dan menegak:

function rnd(n){return Math.ceil(Math.random()*n)}
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var t = Date.now();
const w=600,h=600;
var x = 10;
var y = 10;
var xspeed=150+rnd(75), yspeed=150+rnd(75);
function draw() { 
  var timePassed = (Date.now() - t) /1000;
  t = Date.now()
  context.clearRect(0, 0, w, h)
 
  context.beginPath();
  context.rect(x, y, 100, 60)
  context.fillStyle = "red"
  context.fill();

  if (y<=0 || y >= h-60) yspeed=-yspeed;
  if (x<=0 || x>= w-100) xspeed=-xspeed;
  x += xspeed*timePassed;
  y += yspeed*timePassed;
 
  window.requestAnimationFrame(draw);
}
draw();