// ※このプロパティは使いません
		'color' : '#000',
        
        // ※花火の色を返すメソッド
        'getColor' : function(angle, speed){
            return "hsl(" + (angle / Math.PI * 180 + 90)  + ", 100%, " + speed / hanabi.speed * 50 + "%)"
        }
	};

// 以下花火の制御コードです

Math.Radian = Math.PI * 2;
	var hibana = [/*{
		'pos_x' : left,
		'pos_y' : top,
		'vel_x' : Math.cos(angle) * speed,
		'vel_y' : Math.sin(angle) * speed,
        'color' : hanabi.getColor(),
	}, ...*/];
	var cvs = {
		// canvas element
		'elem' : undefined,
		// canvas width(window max)
		'width' : 0,
		// canvas width(window height)
		'height' : 0,
		// 2d context
		'ctx' : undefined,
		// element offset(left)
		'left' : 0,
		// element offset(top)
		'top' : 0,
		// explode point(x)
		'pos_x' : 0,
		// explode point(y)
		'pos_y' : 0
	};

setTimeout(function () {
		cvs.pos_y = (cvs.height / hanabi.top) - cvs.top;
		cvs.pos_x = cvs.width / hanabi.left - cvs.left;
		for (var i = 0; i < hanabi.quantity; ++i) {
			var angle = Math.random() * Math.Radian;
			var speed = Math.random() * hanabi.speed;
			hibana.push({
				'pos_x' : cvs.pos_x,
				'pos_y' : cvs.pos_y,
				'vel_x' : Math.cos(angle) * speed,
				'vel_y' : Math.sin(angle) * speed,
                'color' : hanabi.getColor(angle, speed)
			});
		};
		requestAnimationFrame(render);
	}, 0)

if (hanabi.size < 0.3 ) {
				hibana[i] = undefined;
				if (len < ++clear) {
        	    	cvs.ctx.fillStyle = 'black';
        	    	cvs.ctx.fillRect(0, 0, cvs.width, cvs.height);
					try { window.parent.endAnimation(location.href); } catch (e) {};
				    return;
				};
			};
    		cvs.ctx.fillStyle = flashFrame ? "#ccc" : s.color;
			cvs.ctx.beginPath();
			cvs.ctx.arc(s.pos_x, s.pos_y, hanabi.size, 0, Math.Radian, true);
			cvs.ctx.fill();
		};
		hanabi.size *= hanabi.circle;
		requestAnimationFrame(render);
	}

cvs.elem = document.getElementById('hanabi');
	if (!cvs.elem || !cvs.elem.getContext) {
		return alert('require canvas support');
	};
	(function () {
		var b = document.body;
		var d = document.documentElement;
		cvs.width = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth);
		cvs.height = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight);
	})();
	cvs.elem.height = cvs.height;
	cvs.elem.width = cvs.width;
	cvs.ctx = cvs.elem.getContext('2d');
	cvs.left = cvs.elem.getBoundingClientRect
		? cvs.elem.getBoundingClientRect().left
		: 0
	;
	cvs.top = cvs.elem.getBoundingClientRect
		? cvs.elem.getBoundingClientRect().top
		: 0
	;
}, 0);

//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');

カラーサークル花火

// forked from norahiko's "2色の花火" http://jsdo.it/norahiko/4YKk // forked from kyo_ago's "fireworks" http://jsdo.it/kyo_ago/fireworks // forked from zarkswerk's "fireworx" http://jsdo.it/zarkswerk/fireworx // forked from zarkswerk's "fireworks" http://jsdo.it/zarkswerk/3598 setTimeout(function () { var hanabi = { // 火花の数 'quantity' : 200, // 火花の大きさ 'size' : 4, // 減衰力（花火自体の大きさに影響 'circle' : 0.98, // 重力 'gravity' : 1.1, // 火花の速度 'speed' : 5, // 爆発縦位置 'top' : 5, // 爆発横位置 'left' : 2, // ※このプロパティは使いません 'color' : '#000', // ※花火の色を返すメソッド 'getColor' : function(angle, speed){ return "hsl(" + (angle / Math.PI * 180 + 90) + ", 100%, " + speed / hanabi.speed * 50 + "%)" } }; // 以下花火の制御コードです Math.Radian = Math.PI * 2; var hibana = [/*{ 'pos_x' : left, 'pos_y' : top, 'vel_x' : Math.cos(angle) * speed, 'vel_y' : Math.sin(angle) * speed, 'color' : hanabi.getColor(), }, ...*/]; var cvs = { // canvas element 'elem' : undefined, // canvas width(window max) 'width' : 0, // canvas width(window height) 'height' : 0, // 2d context 'ctx' : undefined, // element offset(left) 'left' : 0, // element offset(top) 'top' : 0, // explode point(x) 'pos_x' : 0, // explode point(y) 'pos_y' : 0 }; setTimeout(function () { cvs.pos_y = (cvs.height / hanabi.top) - cvs.top; cvs.pos_x = cvs.width / hanabi.left - cvs.left; for (var i = 0; i < hanabi.quantity; ++i) { var angle = Math.random() * Math.Radian; var speed = Math.random() * hanabi.speed; hibana.push({ 'pos_x' : cvs.pos_x, 'pos_y' : cvs.pos_y, 'vel_x' : Math.cos(angle) * speed, 'vel_y' : Math.sin(angle) * speed, 'color' : hanabi.getColor(angle, speed) }); }; requestAnimationFrame(render); }, 0) function clear_point (x, y, size) { setTimeout(function () { requestAnimationFrame(function () { cvs.ctx.save(); cvs.ctx.beginPath(); cvs.ctx.arc(x, y, size*1.2, 0, Math.Radian, true); cvs.ctx.clip(); cvs.ctx.clearRect(0, 0, cvs.width, cvs.height); cvs.ctx.restore(); }); }, 50) }; var frame = 0; if (hanabi.color === 'random') { hanabi.color = colorz.randHsl(100, 90, 60, 50, 90, 70).toString(); }; var clear = 0; function render () { if (!hibana.length) { return; }; frame++; var flashFrame = false; if (!(frame % 6)) { flashFrame = true; cvs.ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'; cvs.ctx.fillRect(0, 0, cvs.width, cvs.height); } for (var i = 0, len = hibana.length; i < len; i++) { var s = hibana[i]; // clear_point(s.pos_x, s.pos_y, hanabi.size); if(s === undefined) continue; s.pos_x += s.vel_x; s.pos_y += s.vel_y; s.vel_x *= hanabi.circle; s.vel_y *= hanabi.circle; s.pos_y += hanabi.gravity; if (hanabi.size < 0.3 ) { hibana[i] = undefined; if (len < ++clear) { cvs.ctx.fillStyle = 'black'; cvs.ctx.fillRect(0, 0, cvs.width, cvs.height); try { window.parent.endAnimation(location.href); } catch (e) {}; return; }; }; cvs.ctx.fillStyle = flashFrame ? "#ccc" : s.color; cvs.ctx.beginPath(); cvs.ctx.arc(s.pos_x, s.pos_y, hanabi.size, 0, Math.Radian, true); cvs.ctx.fill(); }; hanabi.size *= hanabi.circle; requestAnimationFrame(render); } cvs.elem = document.getElementById('hanabi'); if (!cvs.elem || !cvs.elem.getContext) { return alert('require canvas support'); }; (function () { var b = document.body; var d = document.documentElement; cvs.width = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth); cvs.height = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight); })(); cvs.elem.height = cvs.height; cvs.elem.width = cvs.width; cvs.ctx = cvs.elem.getContext('2d'); cvs.left = cvs.elem.getBoundingClientRect ? cvs.elem.getBoundingClientRect().left : 0 ; cvs.top = cvs.elem.getBoundingClientRect ? cvs.elem.getBoundingClientRect().top : 0 ; }, 0); //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 id="hanabi"></canvas>body { padding: 0; margin: 0; overflow: hidden; background: black; } canvas { padding: 0; margin: 0; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/nsPr/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/norahiko/nsPr" title="カラーサークル花火">カラーサークル花火 - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code