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.
我稍微修改了你的逻辑,并将水平和垂直速度的计算分开: