小球喷泉 - JavaScript论坛

leeqihero

等　级：论坛游侠
威　望：7
帖　子：122
专家分：135
注　册：2016-3-24

第 2 楼

得分:0

程序代码：

<html>
<head>
<meta charset="utf-8"/>
<style>
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
background: #FFF5F5;
}
canvas {
display: block;
margin: 0px auto;
}
</style>
</head>
<body>
<canvas id="画布"></canvas>
</body>
<script>
window.onload = app();
var 画布;
function app() {
var 绘图环境;
var 小球集合 = [];
var 初始化 = function() {
画布 = document.getElementById("画布");
画布.width = document.body.scrollWidth;
画布.height = (document.documentElement.scrollHeight > document.body.scrollHeight ? 
document.documentElement.scrollHeight : document.body.scrollHeight);
绘图环境 = 画布.getContext("2d");
开始();
};
var 开始 = function() {
var x = -10, i = 1;
var timer = setInterval(function(){
小球集合.push(new 小球());
小球集合.push(new 小球());
小球集合.push(new 小球());
小球集合.push(new 小球());
小球集合.push(new 小球());
小球集合.push(new 小球());
小球集合.push(new 小球());
小球集合.push(new 小球());
小球集合.push(new 小球());
小球集合.push(new 小球());
小球集合.push(new 小球());
小球集合.push(new 小球());
画(小球集合);
选(小球集合);
更新(小球集合);
}, 30);
};
var 选 = function(列表) {
for (var i = 列表.length - 1; i >= 0; i--) {
if (列表[i].y > 画布.height - 10) {
列表[i].y = 画布.height - 10;
列表[i].vx = 列表[i].vy = 列表[i].ay = 0;
}
if (列表[i].colorA <= 0) {
小球集合.splice(i,1);
}
}

}
var 画 = function(列表) {
绘图环境.clearRect(0, 0, 画布.width, 画布.height);
for (var i = 列表.length - 1; i >= 0; i--) {
绘图环境.fillStyle = 列表[i].color;
绘图环境.beginPath();
绘图环境.arc(列表[i].x, 列表[i].y, 列表[i].r, 0,Math.PI*2,true);
绘图环境.closePath();
绘图环境.fill();
}
};
var 更新 = function(列表) {
var 小球;
for (var i = 列表.length - 1; i >= 0; i--) {
小球 = 列表[i];
小球.x += 小球.vx;
小球.y += 小球.vy;
小球.vy += 小球.ay;
小球.colorA -= 0.006;
小球.color = 小球.colorRgb + 小球.colorA + ")";
}
};
return 初始化
}

var 小球 = function() {
this.r = 3;
this.colorRgb = "rgba(" + (255 - Math.floor(Math.random() * 200)) + "," + (255 - Math.floor(Math.random() * 200)) + "," + (255 - Math.floor(Math.random() * 200)) + ",";
this.colorA = 1;
this.color = this.colorRgb + this.colorA + ")";
this.x = 画布.width / 2;
this.y = 画布.height - 10;
this.vx = (Math.random() > 0.5 ? 1 : -1) * Math.random() * 6;
this.vy = -21;
this.ay = 0.55;
};
</script>
</html>

2016-05-12 19:36

leeqihero

等　级：论坛游侠
威　望：7
帖　子：122
专家分：135
注　册：2016-3-24

第 4 楼

得分:0

<html>
<head>
<meta charset="utf-8"/>
<style>
html, body {
    margin: 0;
    padding: 0;
    background-color: #000;
}
canvas {
    display: block;
}
</style>
</head>
<body>
<canvas id="画布"></canvas>
</body>
<script>
var 小球集合=[],刷新时间=16.67,小球每毫秒数量=0.05;
var 画布=document.getElementById("画布");
画布.width=document.body.clientWidth;
画布.height=(document.documentElement.scrollHeight>document.body.clientHeight?document.documentElement.scrollHeight:document.body.scrollHeight);
var 地面=画布.height-10;
var 绘图环境=画布.getContext("2d");
setInterval(重绘,刷新时间);
function 重绘(){
    var 小球密度=刷新时间*小球每毫秒数量;
    var 新小球数量=Math.floor(小球密度)+((Math.random()<(小球密度-Math.floor(小球密度)))?1:0);
    for(var i=0;i<新小球数量;i++)小球集合.push(new 小球());
    绘图环境.clearRect(0,0,画布.width,画布.height);
    画(小球集合);
}
function 随机色(){
    return 255-Math.floor(Math.random()*200);
}
function 小球色(a){
    return "rgba("+随机色()+","+随机色()+","+随机色()+","+a+")";
}
function 画(列表) {
    for(var i=列表.length-1;i>=0;i--){
        var 当前球=列表[i];
        绘图环境.fillStyle=当前球.color;
        绘图环境.beginPath();
        绘图环境.arc(当前球.x,当前球.y,当前球.r,0,Math.PI*2);
        绘图环境.closePath();
        绘图环境.fill();
        if (当前球.y>地面){
            当前球.y=地面;
            当前球.vx=当前球.vy=当前球.ay=0;
        }
        if (当前球.colorA<=0)小球集合.splice(i,1);
        当前球.x+=当前球.vx*刷新时间;
        当前球.y+=当前球.vy*刷新时间;
        当前球.vy+=当前球.ay*刷新时间;
        当前球.colorA-=当前球.消失速度*刷新时间;
        当前球.color=小球色(this.colorA);
    }
}
function 小球(){
    this.colorA=1;
    this.color=小球色(this.colorA);
    this.x=画布.width/2;
    this.y=地面;
    this.vx=(Math.random()-0.5)*0.2;
    this.vy=-0.4;
}
小球.prototype.r=5;
小球.prototype.ay=0.0002;
小球.prototype.消失速度=0.0002;
</script>
</html>

2016-06-21 08:53