Forked from: norahiko's 花火 - fireworks diff(23) スターマイン forked: 花火 - fireworks norahiko Follow 2011-07-07 14:53:16 License: MIT License Fork0 Fav0 View910 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 258 lines HTML 18 lines CSS 1 lines スターマイン forked: 花火 - fireworks // forked from norahiko's "花火 - fireworks" http://jsdo.it/norahiko/ls6x // ================================= // Const // ================================= var PI = Math.PI; var PI_2 = PI * 2; // ================================= // Config // ================================= var defaultConfig = { duration: 2000, // ms delay: 0, // ms radius: 5, // px amount: 100, // particle number speed: 12, gravity: 0.05, friction: 0.96, reduction: 0.98, left: 0.5, top: 0.3, color: "#ff0000" }; // ================================= // Main // ================================= window.addEventListener("load", function(){ Canvas.canvas = document.querySelector("canvas"); Canvas.canvas.width = document.documentElement.clientWidth; Canvas.canvas.height = document.documentElement.clientHeight; Canvas.context = Canvas.canvas.getContext("2d"); Canvas.context.fillStyle = "rgba(0, 0, 0, 0.15)"; for(var i = 0; i < 15; i++){ var firework = new Firework({ duration: 200, left: Math.random() * 0.5 + 0.25, top: Math.random() * 0.5 + 0.25, amount: 80, delay: 250 * i, radius: 4, reduction: 1, friction: 0.95, speed: 15, color: "hsl(" + Math.random() * 360 + ", 100%, 50%)" }); Canvas.add(firework); } Canvas.start(); }, false); // ================================= // Firework // ================================= function Firework(config){ this.setConfig(config || {}); this.particleImage = createParticleImage(this.radius, this.color); this.diameter = this.radius * 2; this.isActive = true; this.fadeoutOpacity = 1; } Firework.prototype = { setConfig: function(config){ for(var key in defaultConfig){ if(config[key] === undefined){ this[key] = defaultConfig[key]; }else{ this[key] = config[key]; } } }, initParticles: function(){ this.particles = []; var x = this.canvas.width * this.left; var y = this.canvas.height * this.top; var maxSpeed = (this.speed / 2) * (this.speed / 2); while(this.particles.length < this.amount){ var vx = (Math.random() - 0.5) * this.speed; var vy = (Math.random() - 0.5) * this.speed; if(vx*vx + vy*vy <= maxSpeed){ this.particles.push(new Particle(x, y, vx, vy)); } } }, update: function(passed){ if(this.isActive === false || this.started(passed) === false) return; if(this.ended(passed)){ this.fadeout(); return; } this.move(); this.render(); }, move: function(){ var particles = this.particles; var particle; for(var i = 0, len = particles.length; i < len; i++){ particle = particles[i]; particle.vx *= this.friction; particle.vy = particle.vy * this.friction + this.gravity; particle.x += particle.vx; particle.y += particle.vy; } }, render: function(){ this.context.globalAlpha = 1; this.renderParticles(); }, renderParticles: function(){ var diameter = this.diameter *= this.reduction; var context = this.context; var particles = this.particles; var particleImage = this.particleImage; var p; for(var i = 0, len = particles.length; i < len; i++){ p = particles[i]; context.drawImage(particleImage, p.x, p.y, diameter, diameter); } }, started: function(passed){ return this.delay < passed; }, ended: function(passed){ return this.duration + this.delay < passed; }, fadeout: function(){ this.fadeoutOpacity -= 0.1; if(this.fadeoutOpacity <= 0) { this.isActive = false; return; } this.move(); this.context.globalAlpha = this.fadeoutOpacity; this.renderParticles(); } }; // ================================= // Particle // ================================= function Particle(x, y, vx, vy){ this.x = x; this.y = y; this.vx = vx; this.vy = vy; } // ================================= // Canvas // ================================= var Canvas = { fireworks: [], add: function(firework){ firework.canvas = this.canvas; firework.context = this.context; firework.initParticles(); this.fireworks.push(firework); }, start: function(){ this.startTime = Number(new Date()); this.update(); }, fill: function(){ this.context.globalAlpha = 1; this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); }, // main loop update: function(){ this.fill(); var passed = new Date() - this.startTime; var activeFireworkCount = 0; this.fireworks.forEach(function(firework){ if(firework.isActive){ firework.update(passed); activeFireworkCount++; } }.bind(this)); if(0 < activeFireworkCount){ requestAnimationFrame(this.update.bind(this)); }else{ requestAnimationFrame(this.fadeout.bind(this, 10)); } }, fadeout: function(count){ if(count < 0) return; // animation end this.context.globalAlpha = 1; this.context.fillStyle = "rgba(0, 0, 0, 0.2)"; this.fill(); requestAnimationFrame(this.fadeout.bind(this, count - 1)); } }; // ================================= // Utils // ================================= if (Function.prototype.bind === undefined){ Function.prototype.bind = function( obj ) { var slice = [].slice, args = slice.call(arguments, 1), self = this, bound = function () { return self.apply( obj || window , args.concat( slice.call(arguments) ) ); }; bound.prototype = this.prototype; return bound; }; } function createParticleImage(radius, color){ var size = radius * 2; var canvas = document.createElement("canvas"); canvas.width = canvas.height = size; var context = canvas.getContext("2d"); var gradient = context.createRadialGradient(radius, radius, 0, radius, radius, size); gradient.addColorStop(0, "white"); gradient.addColorStop(0.1, "white"); gradient.addColorStop(0.3, color); gradient.addColorStop(1, "rgba(0, 0, 0, 0)"); context.fillStyle = gradient; context.beginPath(); context.arc(radius, radius, radius, 0, PI_2, true); context.fill(); //return canvas var particle = new Image(); particle.src = canvas.toDataURL(); return particle; } //set window.requestAnimationFrame (function (w, r) { w['r'+r] = w['r'+r] || w['webkitR'+r] || w['mozR'+r] || w['msR'+r] || w['oR'+r] || function(c){ w.setTimeout(c, 1000 / 60); }; })(window, 'equestAnimationFrame'); <canvas></canvas> <style> *{ margin: 0px; padding: 0px; } html, body{ width: 100%; height: 100%; background-color: #000; overflow: hidden; } canvas{ margin: auto; } </style> スターマイン forked: 花火 - fireworks html{} // forked from norahiko's "花火 - fireworks" http://jsdo.it/norahiko/ls6x // ================================= // Const // ================================= var PI = Math.PI; var PI_2 = PI * 2; // ================================= // Config // ================================= var defaultConfig = { duration: 2000, // ms delay: 0, // ms radius: 5, // px amount: 100, // particle number speed: 12, gravity: 0.05, friction: 0.96, reduction: 0.98, left: 0.5, top: 0.3, color: "#ff0000" }; // ================================= // Main // ================================= window.addEventListener("load", function(){ Canvas.canvas = document.querySelector("canvas"); Canvas.canvas.width = document.documentElement.clientWidth; Canvas.canvas.height = document.documentElement.clientHeight; Canvas.context = Canvas.canvas.getContext("2d"); Canvas.context.fillStyle = "rgba(0, 0, 0, 0.15)"; for(var i = 0; i < 15; i++){ var firework = new Firework({ duration: 200, left: Math.random() * 0.5 + 0.25, top: Math.random() * 0.5 + 0.25, amount: 80, delay: 250 * i, radius: 4, reduction: 1, friction: 0.95, speed: 15, color: "hsl(" + Math.random() * 360 + ", 100%, 50%)" }); Canvas.add(firework); } Canvas.start(); }, false); // ================================= // Firework // ================================= function Firework(config){ this.setConfig(config || {}); this.particleImage = createParticleImage(this.radius, this.color); this.diameter = this.radius * 2; this.isActive = true; this.fadeoutOpacity = 1; } Firework.prototype = { setConfig: function(config){ for(var key in defaultConfig){ if(config[key] === undefined){ this[key] = defaultConfig[key]; }else{ this[key] = config[key]; } } }, initParticles: function(){ this.particles = []; var x = this.canvas.width * this.left; var y = this.canvas.height * this.top; var maxSpeed = (this.speed / 2) * (this.speed / 2); while(this.particles.length < this.amount){ var vx = (Math.random() - 0.5) * this.speed; var vy = (Math.random() - 0.5) * this.speed; if(vx*vx + vy*vy <= maxSpeed){ this.particles.push(new Particle(x, y, vx, vy)); } } }, update: function(passed){ if(this.isActive === false || this.started(passed) === false) return; if(this.ended(passed)){ this.fadeout(); return; } this.move(); this.render(); }, move: function(){ var particles = this.particles; var particle; for(var i = 0, len = particles.length; i < len; i++){ particle = particles[i]; particle.vx *= this.friction; particle.vy = particle.vy * this.friction + this.gravity; particle.x += particle.vx; particle.y += particle.vy; } }, render: function(){ this.context.globalAlpha = 1; this.renderParticles(); }, renderParticles: function(){ var diameter = this.diameter *= this.reduction; var context = this.context; var particles = this.particles; var particleImage = this.particleImage; var p; for(var i = 0, len = particles.length; i < len; i++){ p = particles[i]; context.drawImage(particleImage, p.x, p.y, diameter, diameter); } }, started: function(passed){ return this.delay < passed; }, ended: function(passed){ return this.duration + this.delay < passed; }, fadeout: function(){ this.fadeoutOpacity -= 0.1; if(this.fadeoutOpacity <= 0) { this.isActive = false; return; } this.move(); this.context.globalAlpha = this.fadeoutOpacity; this.renderParticles(); } }; // ================================= // Particle // ================================= function Particle(x, y, vx, vy){ this.x = x; this.y = y; this.vx = vx; this.vy = vy; } // ================================= // Canvas // ================================= var Canvas = { fireworks: [], add: function(firework){ firework.canvas = this.canvas; firework.context = this.context; firework.initParticles(); this.fireworks.push(firework); }, start: function(){ this.startTime = Number(new Date()); this.update(); }, fill: function(){ this.context.globalAlpha = 1; this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); }, // main loop update: function(){ this.fill(); var passed = new Date() - this.startTime; var activeFireworkCount = 0; this.fireworks.forEach(function(firework){ if(firework.isActive){ firework.update(passed); activeFireworkCount++; } }.bind(this)); if(0 < activeFireworkCount){ requestAnimationFrame(this.update.bind(this)); }else{ requestAnimationFrame(this.fadeout.bind(this, 10)); } }, fadeout: function(count){ if(count < 0) return; // animation end this.context.globalAlpha = 1; this.context.fillStyle = "rgba(0, 0, 0, 0.2)"; this.fill(); requestAnimationFrame(this.fadeout.bind(this, count - 1)); } }; // ================================= // Utils // ================================= if (Function.prototype.bind === undefined){ Function.prototype.bind = function( obj ) { var slice = [].slice, args = slice.call(arguments, 1), self = this, bound = function () { return self.apply( obj || window , args.concat( slice.call(arguments) ) ); }; bound.prototype = this.prototype; return bound; }; } function createParticleImage(radius, color){ var size = radius * 2; var canvas = document.createElement("canvas"); canvas.width = canvas.height = size; var context = canvas.getContext("2d"); var gradient = context.createRadialGradient(radius, radius, 0, radius, radius, size); gradient.addColorStop(0, "white"); gradient.addColorStop(0.1, "white"); gradient.addColorStop(0.3, color); gradient.addColorStop(1, "rgba(0, 0, 0, 0)"); context.fillStyle = gradient; context.beginPath(); context.arc(radius, radius, radius, 0, PI_2, true); context.fill(); //return canvas var particle = new Image(); particle.src = canvas.toDataURL(); return particle; } //set window.requestAnimationFrame (function (w, r) { w['r'+r] = w['r'+r] || w['webkitR'+r] || w['mozR'+r] || w['msR'+r] || w['oR'+r] || function(c){ w.setTimeout(c, 1000 / 60); }; })(window, 'equestAnimationFrame'); <canvas></canvas> <style> *{ margin: 0px; padding: 0px; } html, body{ width: 100%; height: 100%; background-color: #000; overflow: hidden; } canvas{ margin: auto; } </style> html{} use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/52q3/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/norahiko/52q3" title="スターマイン forked: 花火 - fireworks">スターマイン forked: 花火 - fireworks - jsdo.it - share JavaScript, HTML5 and CSS</a></p> fireworks hanabi Tweet twitter Tags fireworks hanabi Forked sort new page view favorite forked forked: スターマイン forked: 花火 - fi.. mokichi24 00 123views 260/18/1 fireworks hanabi