流星雨html5,HTML5/Canvas 流星雨+爱心绽放

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

(function() {

var boomLength, ctx, descending, ele, height, love_bomb_tomb, setStar, star_num, stars, width;

stars = [];

star_num = 20;

love_bomb_tomb = [];

width = 960;

height = 540;

ele = document.getElementById("canvas");

ctx = ele.getContext('2d');

ele.setAttribute("height", height);

ele.setAttribute("width", width);

setStar = function(index) {

return stars[index] = [Math.random() * width, Math.random() / 10 * height, (Math.random() * 20 + 80) / 100, (Math.random() + 1) / 2 * 6, Math.sin(Math.random() * Math.PI / 8)];

};

descending = function(former, latter) {

return latter[0] - former[0];

};

boomLength = 0;

setInterval(function() {

var bomb, degree, factor, i, j, k, l, m, new_x, new_y, p, pi_in_degree, random_heart_style, random_y_diff, ratio, ref, ref1, ref2, rest_amount, speed, theta;

ctx.clearRect(0, 0, width, height);

ctx.fillstyle = '#000';

ctx.fillRect(0, 0, width, height);

for (i = j = 0, ref = star_num; 0 <= ref ? j < ref : j > ref; i = 0 <= ref ? ++j : --j) {

if (stars[i] == null) {

setStar(i);

}

if (!(stars[i][0] < width && stars[i][1] < height)) {

setStar(i);

}

ratio = stars[i][4];

speed = stars[i][3];

new_x = stars[i][0] += speed * ratio;

new_y = stars[i][1] += speed;

random_y_diff = stars[i][2];

for (p = k = 0; k <= 100; p = ++k) {

ctx.beginPath();

ctx.strokeStyle = "rgba(255, 255, 255," + (1 - p / 100) + ")";

ctx.moveTo(new_x - random_y_diff * p * ratio, new_y - random_y_diff * p);

ctx.lineTo(new_x - random_y_diff * (p - 1) * ratio, new_y - random_y_diff * (p - 1));

ctx.stroke();

}

}

stars.sort(descending);

for (i = l = 0, ref1 = star_num - 1; 0 <= ref1 ? l < ref1 : l > ref1; i = 0 <= ref1 ? ++l : --l) {

if (Math.abs(stars[i][0] - stars[i + 1][0]) < 3) {

if (Math.abs(stars[i][1] - stars[i + 1][1]) < 3) {

love_bomb_tomb[boomLength++] = [50, stars[i][0], stars[i][1]];

setStar(i);

setStar(i + 1);

}

}

}

love_bomb_tomb.sort(descending);

bomb = love_bomb_tomb[0];

if (bomb && bomb[0] > 0) {

rest_amount = bomb[0];

pi_in_degree = 180;

for (degree = m = 0, ref2 = 2 * pi_in_degree; 0 <= ref2 ? m < ref2 : m > ref2; degree = 0 <= ref2 ? ++m : --m) {

random_heart_style = 255 * Math.random() << 0;

ctx.beginPath();

ctx.strokeStyle = "rgba(255, " + random_heart_style + ", " + random_heart_style + ", " + (rest_amount / 50) + ")";

theta = degree / pi_in_degree * Math.PI;

factor = 1 - Math.abs(degree - pi_in_degree) / pi_in_degree;

ctx.moveTo(bomb[1], bomb[2] + 30 * (1 - rest_amount / 50));

ctx.lineTo(bomb[1] - (2 * Math.sin(theta) - Math.sin(2 * theta)) * factor * (50 - rest_amount), bomb[2] - (2 * Math.cos(theta) - Math.cos(2 * theta)) * factor * (50 - rest_amount));

ctx.stroke();

}

return bomb[0] --;

}

}, 1);

}).call(this);