dir 變數和值有什麼問題
P粉204079743
P粉204079743 2024-02-21 18:09:36
0
1
426

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();
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板