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 螢幕保護動畫之類的東西,但由於某種原因,我的程式碼總是在角落出現故障; 你能幫我解決一下嗎? 請不要評判,因為這是我的第一個程式碼,如果你可以透過更改值和內容來修復它,並且實際上使用相同的邏輯,我就在那裡使用了。
我稍微修改了你的邏輯,並將水平和垂直速度的計算分開: