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 屏幕保护动画之类的东西,但由于某种原因,我的代码总是在角落出现故障; 你能帮我解决一下吗? 请不要评判,因为这是我的第一个代码,如果你可以通过更改值和内容来修复它,并且实际上使用相同的逻辑,我就在那里使用了。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
我稍微修改了你的逻辑,并将水平和垂直速度的计算分开:
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();