烟花效果

最新推荐文章于 2023-04-15 01:08:02 发布

type_q

最新推荐文章于 2023-04-15 01:08:02 发布

阅读量776

点赞数

CC 4.0 BY-SA版权

分类专栏： canvas

本文链接：https://blog.youkuaiyun.com/type_q/article/details/23626429

canvas 专栏收录该内容

5 篇文章

订阅专栏

今天最后尝试了一下一直以来都觉得很神圣的烟花效果,稍微还是有点感觉的吧,虽然没有网上大神们的漂亮.

今天有点累了,没有注意程序的结构性,调整参数的时候要跑来跑去,这一点要反思...

<!DOCTYPE html>
<html>
<head>
	<title>firework</title>
	<script>
		var width = 800;
		var height = 500;
		var ctx = null;
		var bgFS = "rgba(0, 0, 0, 0.3)";
		var cyc = 33;
		var Hz = 1000 / 33;
		var a = 1;

		var bom = null;
		var some = [];

		function randomColor(){
			var x = (Math.floor(Math.random() * 155)) + 100;
			var y = (Math.floor(Math.random() * 155)) + 100;
			var z = (Math.floor(Math.random() * 155)) + 100;
			return "rgba(" + x + "," + y + "," + z + ", 1)";
		};

		function shoot(){
			return {
				x : width / 2,
				y : height,
				vx : 0,//Math.random() * 200 - 100,
				vy : -150,//-Math.random() * 100 - 100,
				lift : 60,//(Math.random() * 2 + 1) * Hz,
				r : 8,//Math.random() * 10 + 5,
				color : randomColor()
			};
		};

		function draw(b){
			ctx.fillStyle = b.color;
			ctx.beginPath();
			ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
			ctx.closePath();
			ctx.fill();
		};

		function killBom(){
			var color = bom.color;
			var x = bom.x;
			var y = bom.y;
			var color = bom.color;
			for(i = 0; i < 20; i++){
				var vx = Math.random() * 10;
				var vy = Math.random() * 10;
				var r = Math.random() * 2;
				some[Math.floor(Math.random() * some.length)] = {
					x : x,
					y : y,
					vx : vx,
					vy : vy,
					color : color,
					r : r
				}
				some[Math.floor(Math.random() * some.length)] = {
					x : x,
					y : y,
					vx : -vx,
					vy : vy,
					color : color,
					r : r
				}
				some[Math.floor(Math.random() * some.length)] = {
					x : x,
					y : y,
					vx : vx,
					vy : -vy,
					color : color,
					r : r
				}
				some[Math.floor(Math.random() * some.length)] = {
					x : x,
					y : y,
					vx : -vx,
					vy : -vy,
					color : color,
					r : r
				}
			}
		};

		function run(){
			ctx.fillStyle = bgFS;
			ctx.fillRect(0, 0, width, height);

			draw(bom);
			bom.x += bom.vx / (Hz);
			bom.y += bom.vy / (Hz);
			bom.lift--;
			bom.vy += a / (Hz);
			if(bom.lift < 1){
				killBom();
				bom = shoot();
			}

			for(var i in some){
				if(some[i] != undefined){
					var s = some[i];
					draw(s);
					s.x += s.vx;
					s.y += s.vy;
					s.vy += a / (Hz);
				}
			}
		};

		function init(){
			var cvs = document.createElement("canvas");
			cvs.width = width;
			cvs.height = height;

			ctx = cvs.getContext("2d");
			ctx.fillStyle = "#000000";
			ctx.fillRect(0, 0, width, height);
			for(i = 0; i < 400; i++){
				some.push(undefined);
			}

			document.body.appendChild(cvs);
		};

		function start(){
			document.body.removeChild(document.getElementById("start"));

			bom = shoot();
			setInterval(run, cyc);
		};
	</script>
<body onload = "init()">
	<button id = "start" onclick = "start()">click me!</button>
	<br />
</body>