dir 变量和值有什么问题
P粉204079743
P粉204079743 2024-02-21 18:09:36
0
1
429

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

我刚刚编写了第一个代码,尝试制作 DVD 屏幕保护动画之类的东西,但由于某种原因,我的代码总是在角落出现故障; 你能帮我解决一下吗? 请不要评判,因为这是我的第一个代码,如果你可以通过更改值和内容来修复它,并且实际上使用相同的逻辑,我就在那里使用了。

P粉204079743
P粉204079743

全部回复(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();
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板