使用javascript的球动画

我用

javascript

制作了一个动画。使用单球形状可进入页面顶部。任何人都会帮助创造多个球像克隆。。我只想完成以下任务

• 具有多个球的动画（从下到上）
• 每个球位（仅左位）都是随机的
• 无限过程

是否可以通过

javascript

实现。提前感谢：）

.circle{
宽度：50px；
高度：50px；
边界半径：30px；
位置：绝对位置；
底部：-60px；
左：2px；
过渡：0.1s；
}
身体{
溢出：隐藏；
位置：相对位置；
背景：紫罗兰色
}
#盒子{
宽度：100%；
身高：100%；
}

var colors=[“红色”、“黄色”、“蓝色”、“绿色”、“棕色”、“紫色”]；
var windowHeight=0；
var-parendement；
window.onload=函数（）{
parendElement=document.getElementById（“框”）；
windowHeight=window.innerHeight；
document.body.style.height=windowHeight+“px”；
console.log（文档、正文、样式、高度）；
生成球（）；
};
函数generateBall（）{
var leftPos=Math.floor（（Math.random（）*window.innerWidth）-30）；
var para=document.createElement（“p”）；
参数setAttribute（“类”，“圆”）；
para.style.background=颜色[Math.floor（Math.random（）*colors.length）]；
para.style.left=leftPos+“px”；
附件（第1段）；
var-btmPos=0；
var animationInterval=setInterval（函数（）{
如果（btmPos<窗高）{
btmPos+=5；
}否则{
控制台日志（“是”）；
clearInterval（动画间隔）；
删除child（第2段）；
}
para.style.bottom=btmPos+“px”；
para.style.left=leftPos+“px”；
}, 100);
}

这可能会对您有所帮助

var canvas={
元素：document.getElementById（'canvas'），
宽度：600，
身高：400，
初始化：函数（）{
this.element.style.width=this.width+'px'；
this.element.style.height=this.height+'px'；
document.body.appendChild（this.element）；
}
};
变量球={
创建：函数（颜色、dx、dy）{
var newBall=Object.create（这个）；
newBall.dx=dx；
newBall.dy=dy；
newBall.width=40；
newBall.height=40；
newBall.element=document.createElement（'div'）；
newBall.element.style.backgroundColor=颜色；
newBall.element.style.width=newBall.width+'px'；
newBall.element.style.height=newBall.height+'px'；
newBall.element.className+='ball'；
newBall.width=parseInt（newBall.element.style.width）；
newBall.height=parseInt（newBall.element.style.height）；
canvas.element.appendChild（newBall.element）；
返回新球；
},
移动到：函数（x，y）{
this.element.style.left=x+'px'；
this.element.style.top=y+'px'；
},
更改方向（如有必要）：函数（x，y）{
if（x<0 | | x>canvas.width-this.width）{
this.dx=-this.dx；
}
if（y<0 | | y>canvas.height-this.height）{
this.dy=-this.dy；
}
},
绘图：函数（x，y）{
这个。移动到（x，y）；
var ball=这个；
setTimeout（函数（）{
球。必要时改变方向（x，y）；
ball.draw（x+ball.dx，y+ball.dy）；
}, 1000 / 60);
}
};
canvas.initialize（）；
var ball1=Ball.create（“蓝色”，4,3）；
var ball2=Ball.create（“红色”，1,5）；
var ball3=Ball.create（“绿色”，2,2）；
球1.平局（70，0）；
2.平局（20200）；
3.平局（300330）
正文{
文本对齐：居中；
}
#帆布{
位置：相对位置；
背景色：#ccddcc；
保证金：1em自动；
}
.球{
背景色：黑色；
位置：绝对位置；
显示：内联块；
边界半径：50%；
}
弹跳球
这些弹跳球由完全未加工的JavaScript制成，
就用divs。我们不使用jQuery。我们不使用画布

只需添加此代码

var interval=setInterval（函数（）{
生成球（）；
}, 1000);

进入
窗口。onload（）
。它有效：）


.circle{
宽度：50px；
高度：50px；
边界半径：30px；
位置：绝对位置；
底部：-60px；
左：2px；
过渡：0.1s；
}
身体{
溢出：隐藏；
位置：相对位置；
背景：紫罗兰色
}
#盒子{
宽度：100%；
身高：100%；
}

var colors=[“红色”、“黄色”、“蓝色”、“绿色”、“棕色”、“紫色”]；
var windowHeight=0；
var-parendement；
window.onload=函数（）{
parendElement=document.getElementById（“框”）；
windowHeight=window.innerHeight；
document.body.style.height=windowHeight+“px”；
console.log（文档、正文、样式、高度）；
生成球（）；
//每隔1秒创建一个球
var interval=setInterval（函数（）{
生成球（）；
}, 1000);
};
函数generateBall（）{
var leftPos=Math.floor（（Math.random（）*window.innerWidth）-30）；
var para=document.createElement（“p”）；
参数setAttribute（“类”，“圆”）；
para.style.background=颜色[Math.floor（Math.random（）*colors.length）]；
para.style.left=leftPos+“px”；
附件（第1段）；
var-btmPos=0；
var animationInterval=setInterval（函数（）{
如果（btmPos<窗高）{
btmPos+=5；
}否则{
控制台日志（“是”）；
clearInterval（动画间隔）；
删除child（第2段）；
}
para.style.bottom=btmPos+“px”；
para.style.left=leftPos+“px”；
}, 100);
}
关于您的任务，您尝试过什么？如果你不知道从哪里开始，列出你的想法