小球喷泉js6
程序代码：<html>
<head>
<meta charset=utf-8>
<style>
html, body {
margin: 0;
padding: 0;
background-color: #000;
}
</style>
<script>
$=function(b){return document.getElementById(b)};
Array.prototype.dot=function(d){
var r=[];
for(var i=0;i<this.length;i++){
r.push(d*this[i]);
};
return r;
};
Array.prototype.plus=function(v){
var r=[];
for(var i=0;i<this.length;i++){
r.push(v[i]+this[i]);
};
return r;
};
</script>
</head>
<body>
<canvas id=0></canvas>
</body>
<script>
$=function(a){return document.getElementById(a)};
小球集合=[];
刷新时间=16.67;
小球每毫秒数量=0.05;
画布=$(0);
画布.width=1200;
画布.height=600;
地面=画布.height-10;
绘图环境=画布.getContext('2d');
setInterval(重绘,刷新时间);
function 重绘(){
var 小球密度=刷新时间*小球每毫秒数量;
if(小球集合.length>1000){
var nn=小球集合.length-800;
小球集合.splice(0,小球集合.length-800);
};
var 新小球数量=~~(Math.random()*2);
for(var i=0;i<新小球数量;i++)小球集合.push(new 小球());
绘图环境.clearRect(0,0,画布.width,画布.height);
for(var i=0;i<小球集合.length;i++){
var 当前球=小球集合[i];
绘图环境.fillStyle=当前球.setColor();
绘图环境.beginPath();
绘图环境.arc(...当前球.p,当前球.r,0,Math.PI*2);
绘图环境.closePath();
绘图环境.fill();
if (当前球.p[1]>地面){
当前球.p[1]=地面;
}else{
当前球.p=当前球.p.plus(当前球.v.dot(刷新时间));
当前球.v=当前球.v.plus(当前球.a.dot(刷新时间));
};
};
};
class 小球{
constructor(){
this.p=[画布.width/2,地面];
this.v=[(Math.random()-0.5)*0.2,-0.4];
this.r=5;
this.a=[0,0.0002];
};
setColor(){
let 随机色=function(){return 255-~~(Math.random()*200);};
return `rgba(${随机色()},${随机色()},${随机色()},1)`;
};
};
</script>
</html>
