Was stimmt mit dir-Variablen und -Werten nicht?
P粉204079743
P粉204079743 2024-02-21 18:09:36
0
1
421

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

Ich habe gerade meinen ersten Code geschrieben und versucht, eine DVD-Bildschirmschoner-Animation oder so etwas zu erstellen, aber aus irgendeinem Grund gibt es in meinem Code immer wieder Fehler in den Ecken; Können Sie mir bei der Lösung helfen? Bitte urteilen Sie nicht, denn dies ist mein erster Code. Wenn Sie ihn durch Ändern der Werte und des Inhalts beheben und tatsächlich dieselbe Logik verwenden können, verwende ich ihn dort.

P粉204079743
P粉204079743

Antworte allen(1)
P粉781235689

我稍微修改了你的逻辑,并将水平和垂直速度的计算分开:

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= h-60) yspeed=-yspeed;
  if (x= w-100) xspeed=-xspeed;
  x += xspeed*timePassed;
  y += yspeed*timePassed;
 
  window.requestAnimationFrame(draw);
}
draw();
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage