Quel est le problème avec les variables et les valeurs du répertoire ?

Question

window.onload = function() {
   var canvas = document.getElementById("canvas");
   var context = canvas.getContext("2d");
   var t = Date.now();
   var x = 0;
   var y = 0;
   var dir = 1;
   var speed =  150 + Math.round(Math.random()*(75));
   
   x =+ 10;
  function draw() {
  
     var timePassed = (Date.now() - t) /1000;
         t = Date.now()
     context.clearRect(0, 0, 600, 600)
     
      context.beginPath();
      context.rect(x, y, 100, 60)
      context.fillStyle = "white"
      context.fill();
    
   if (y <= 0) {
     dir = 2;
   }
   if (x <= 0) {
     dir = 1;
   }
    if (x>= 600-100) {
      dir= 2;
    }
    
    if (y >= 600-60) {
     dir = 3;
     }
    if  ((y >= 270 && y<= 300) && x >= 500) {
      dir = Math.round(Math.random()*4);
    }
     if ((x >= 250 && x <= 350) && y >= 540) {
       dir = Math.round(Math.random()*4);
     }
     if ((x >= 250 && x<=350) && y <= 0) {
       dir =Math.round(Math.random()*4);
     }
      if ( x >= 600-100 && y >= 300) {
     dir = Math.round(Math.random()*4);
   }
   if (x <= 0 && y>300) {
     dir = Math.round(Math.random()*4);
   }
   if (x >= 600-100 && y <= 300-60) {
     dir = Math.round(Math.random()*4);
   }
   if (x <= 0 && y <= 300-60) {
     dir = Math.round(Math.random()*4);
   }
   if (y <= 0 && x <= 300-100) {
     dir = Math.round(Math.random()*4);
   }
   if (y <= 0 && x >= 300) {
     dir = Math.round(Math.random()*4);
   }
   if (y >= 600-60 && x<=300-100) {
     dir = Math.round(Math.random()*4);
   }
   if (y >= 600-60 && x>=300) {
     dir = Math.round(Math.random()*4);
   }
      
      if (dir == 1) {
        x += speed*timePassed;
        y += speed*timePassed;
      }
      else if (dir == 2) {
        x -= speed*timePassed;
        y += speed*timePassed;
      }
      else if (dir == 3) {
        x -= speed*timePassed;
        y -= speed*timePassed;
      }
      else if (dir == 4) {
        x += speed*timePassed;
        y -= speed*timePassed;
      }
       
       
   if (speed > 225) {
        speed = 150 + (Math.round(Math.random()*75)); 
       }
     
    window.requestAnimationFrame(draw);
     }
     draw();
}

Je viens d'écrire mon premier code, en essayant de créer une animation d'économiseur d'écran sur DVD ou quelque chose comme ça, mais pour une raison quelconque, mon code continue de bugger dans les coins ; Pouvez-vous m'aider à le résoudre ? S'il vous plaît, ne jugez pas car c'est mon premier code et si vous pouvez le corriger en modifiant les valeurs et le contenu et en utilisant réellement la même logique, je l'utilise ici.

Answer 1

J'ai légèrement modifié votre logique et séparé le calcul de la vitesse horizontale et verticale :

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();