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

I just wrote my first code to try and make a DVD screen saver animation kind of thing, but for some reason, my code keeps glitching on the corners; Can you please help me fix it; And please don't judge since it's my first code ever, and if you could fix it just by changing values and stuff and actually with the same logic, I used up there.

CodePudding user response：

Without knowing the HTML code it is difficult to give a correct answer. The jacascript in general is running without console error Codepen

  <canvas id="canvas" width="600" height="600">

Randomly generating the direction with Math.round(Math.random()*4) can produce the behavior..

If the block has already moved out of the canvas in one direction, the random routine can still continue to produce exactly this direction and the block moves (or shakes) up and away :-)

CodePudding user response：

I reworked your logic a little and separated the calculation of horizontal and vertical speed:

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=-yspeed;
  x  = xspeed*timePassed;
  y  = yspeed*timePassed;
 
  window.requestAnimationFrame(draw);
}
draw();

<canvas id="canvas" width="600" height="600"></canvas>