HTML5 fantastic tour-colorful fireworks

Since its launch in countless months, wucaixiang cloud has been around the platform. Suddenly the stars were scattered, and the sky was no match for rain. Yundun snow, brave treasure from the wheel. More leaks have been gradually dispersed, pick up the lights back.

-- Ming luyou · fireworks

Remember that during the Spring Festival each year, apart from enjoying the winter scenery, the rest is to enjoy the beautiful fireworks in the sky.

In the winter of Chengdu, the sky is always gray, like weaving a thin layer of light yarn, blocking the sun part. On the maple tree on the side of the road, I forgot whether there are birds, the little guy who "knows" and "knows" all day without summer days. There are very few maple leaves on the trees. At some point, it may have fallen quietly. Sometimes, when I pass by a tall tree, I do not know whether it is the gravity of the earth or what is the original response, A leaf will naturally fall down, and if you don't pay attention to it, it will fall into your head and walk a few miles with it. You haven't found it yet.

In the cold days, hiding in the house, sometimes the strong wind hangs, watching the scattered maple leaves, began to fear that they will be frozen into ice. Sometimes it's evening when I think about the code, and it's getting gray. When I look back at the maple tree outside the window, I see a piece of red cloud flowing in front of me, and it fades away with the wind.

On New Year's Eve, it was generally in the relatives' home. After dinner, the family enjoyed the early release of fireworks and chatted. The house is warm, and people who work outside do not think they will fight a cold war.

Sometimes my parents and my brother and I will go home in advance and say goodbye to all their relatives. I hope they can catch up with the beginning of the Spring Festival Gala (although many people hate watching the Spring Festival Gala, however, I think this is a tradition. If it is difficult to do so, I can raise comments. However, a good tradition should be inherited, just like class inheritance ). My father is a guy who does not like to waste money. He never takes a taxi to a certain place. If he does not want to take a taxi, he will ride his bike or drive his own car. So on the way back, I can see the gorgeous night views of the winter.

After returning home, the first thing is to take out the New Year's goods and eat them continuously. My father never allowed me to eat snacks, but never refused during the holidays. I remember one year, my father told me and my brother to put all the leftover melon seeds and orange skins on the ground. I said, isn't it hard to clean up? My father said that it would be enough to sweep the page and still have a festive atmosphere on the ground. Now let's think about it. Isn't it just about the atmosphere? Without the atmosphere, there will be no warmth, no warmth. what is better for this holiday?

It is time to watch the fireworks when the hour and minute hands on the clock are. A variety of fireworks are scattered like the sky, and various colorful and strange fireworks are blooming. Some of them rose to the clouds and suddenly disappeared. After a twinkling of an eye, they suddenly showed a little golden flower, like the stars in the night. Some of them are just like bullets. They keep sending them out and disappear when they fly to a certain height. Some people say that this is the legendary "skygun". I think it is called a "skygun ", it's better to call the rocket "Katyusha. The sound of fireworks is not general chaos. In the sound of rumbling, the sound of fireworks is always soaring. These sounds are also loud. If they are close to the sound source, the people next to them cannot hear.

Unfortunately, in recent years, I have become addicted to programming, and I am too reluctant to watch the fireworks. I have missed the fireworks for a few years. Recently, I used HTML5 to implement a drag-and-Seek effect. I tried to use the drag-and-Seek function to create a fireworks effect. I didn't expect it to be unknown. It was so easy to implement it. I 've talked a lot about it. Sorry, let's introduce how it is implemented.

Let's take a look at the game:

Test address: http://www.cnblogs.com/yorhom/articles/3244140.html

Open it in a browser that supports HTML5.

Similar to the previous development, the Open Source engine lufylegend is used. The details are as follows:

Lufylegend Website: http://lufylegend.com/lufylegend

Lufylegend API documentation: http://lufylegend.com/lufylegend/api

※Note: You can read this article without having an understanding of the lufylegend engine.

Next is the implementation process.

I. Improve the tail class

In the previous section "HTML5 fantastic journey"-dazzling meteor shower effect ", we explained the smearing class, which is mainly used for practical drag-and-Seek effects. In the previous section, when we talk about the smearing. To () method, we will automatically set the mode to "complete" when the object is moved ". To achieve this, we directly change the oncomplete of the slow data to achieve the effect. Later I found that this was not good, so I improved it: I want to save the oncomplete of the original data to a variable, and then change the data in oncomplete to call the previously saved oncomplete, then change the mode to "complete". In this way, you can set the content in oncomplete by yourself. The code in the smearing. To () method is changed to the following:

Smearing.prototype.to = function($duration,$vars){var self = this;var customFunc = $vars.onComplete || function(){};$vars.onComplete = function(){customFunc();self.mode = "complete";}LTweenLite.to(self.originalSprite,$duration,$vars);};

Code List 1

Ii. Fireworks

To achieve the fireworks effect, we encapsulate a class called fireworks. The class constructor is as follows:

function Fireworks(x,y,color){var self = this;base(self,LSprite,[]);self.fireworksX = x;self.fireworksY = y;self.angle = 20;self.count = 18;self.smearingColor = color;self._showFireworks();}

Code List 2

This code is not hard to understand. First, it inherits from lsprite like the tail class, and then stores the first three parameters in its own attributes. There is a piece of code in the middle, as shown below:

self.angle = 20;self.count = 18;

Code List 3

These two lines of code seem ordinary, but very important. Because our fireworks are in a circle, we need to calculate the position of each fireworks when the fireworks are sprayed with particles. To determine the position, we need to determine the angle of each fireworks and the number of all fireworks particles. To achieve this, we set these two attributes. The angle attribute is the angle between the current position of the fireworks particle and the link between the circle center and the link between the previous position of the fireworks particle and the circle center. The Count attribute is the number of all fireworks particles. We can see that if angle and count want to multiply, the product is 360, that is, the degree of a circle.

The following figure shows the position where each particle is located:

It is not difficult to figure this out. Finally, we call the member function _ showfireworks () and use this function to display fireworks. The specific code is shown in code list 4:

Fireworks.prototype._showFireworks = function(){var self= this;var kaku;for(var i=0; i<self.count; i++){kaku = i*self.angle;var toX = 100*Math.sin(kaku * Math.PI / 180);var toY = 100*Math.cos(kaku * Math.PI / 180);var smearingLayer = new LGraphics();smearingLayer.drawArc(0,"",[0,0,5,0,2*Math.PI],true,self.smearingColor);var spreadingSmearing = new Smearing(smearingLayer);spreadingSmearing.x = self.fireworksX;spreadingSmearing.y = self.fireworksY;spreadingSmearing.to(1,{x: toX,y: toY,onComplete:function(){self.mode = "complete";}});self.addChild(spreadingSmearing);}};

Code list 4

The first two lines of code are skipped, because JavaScript programmers should know. Next, let's jump to the most important loop. The Code is as follows:

for(var i=0; i<self.count; i++){kaku = i*self.angle;var toX = 100*Math.sin(kaku * Math.PI / 180);var toY = 100*Math.cos(kaku * Math.PI / 180);var smearingLayer = new LGraphics();smearingLayer.drawArc(0,"",[0,0,5,0,2*Math.PI],true,self.smearingColor);var spreadingSmearing = new Smearing(smearingLayer);spreadingSmearing.x = self.fireworksX;spreadingSmearing.y = self.fireworksY;spreadingSmearing.to(1,{x: toX,y: toY,onComplete:function(){self.mode = "complete";}});self.addChild(spreadingSmearing);}

Code List 5

First, in order to achieve the effect of the particle ring, we take the angle of each vertex through a loop, and determine the position of the particle through the math. Sin () and math. Cos () functions. Then we draw a circle, and the color is the value of the color parameter given during the instantiation. We have saved it above, so it is directly used here. After painting, we will create a drag-and-tail effect for this particle. The position of the particle tail is the saved X and Y parameters. Then we use the to method to drag the tail to the specified position. After moving in place, we use the oncomplete function to set the mode of the fireworks class to "complete", because we changed the to method above, so you can customize what is in oncomplete.

The fireworks class is over. The next step is how to implement these packages.

3. Fireworks splash into the air

Put all the code below:

Init (10, "mylegend", 500,500, main); var backlayer, fireworkslayer; var back; // sets var colorarray = new array ("yellow", "orangered ", "Red", "pink"); // Add the maximum number of fireworks var maxframe = 4; // The number of currently added fireworks var frameindex = 0; var sound; function main () {lstage. setdebug (true); // Add music sound = new lsound ("http://stream20.qqmusic.qq.com/34962638.mp3"); // Add background layer backlayer = new lsprite (); addchild (backlayer ); // Add fireworkslayer = new lsprite (); addchild (fireworkslayer); // draw a black rectangle as the background back = new lgraphics (); Back. drawrect (0, "", [0, 0, lstage. width, lstage. height], true, "black"); backlayer. addchild (back); // Add the timeline event backlayer. addeventlistener (Levent. enter_frame, onframe)} function addfireworks () {var toy = math. floor (math. random () * (-350 + 250)-250); var colorindex = math. floor (math. random () * 4) // draw a yellow rectangle as a rising fireworks var fireworks = new lsprite (); fireworks. X = math. floor (math. random () * (480-20) + 20); fireworks. y = 500; fireworks. graphics. drawrect (0, "", [0, 10, 10], true, colorarray [colorindex]); // Add a tail var smearing = new smearing (fireworks, 50); // mobile fireworks smearing. to (1, {X: 0, Y: toy, //-300 oncomplete: function () {// Add the expanded fireworks var spreading = new fireworks (fireworks. x, fireworks. Y + toy, colorarray [colorindex]); fireworkslayer. addchild (spreading) ;}}); fireworkslayer. addchild (smearing);} function onframe () {// Add fireworks if (frameindex <maxframe) {frameindex ++; addfireworks () ;}// play music if (sound. playing = false) {sound. play ();} // remove fireworks for (var key in fireworkslayer. childlist) {If (fireworkslayer. childlist [Key]. mode = "complete") {// change the fireworks transparency by easing ltweenlite. to (fireworkslayer. childlist [Key], 0.3, {ALPHA: 0, oncomplete: function (o) {// remove the fireworkslayer object. removechild (o); // if there is no fireworks on the interface, set the number of added items to 0if (fireworkslayer. childlist. length = 0) {frameindex = 0 ;}}});}}}

Code List 6

The Code has been annotated. I will only talk about the design scheme: because our fireworks are colorful, we will put all the colors into the colorarray, and then we will initialize the layer in main, add background, music, and timeline events. In the onframe function triggered by the timeline event, we use addfireworks to add fireworks. In addfireworks, we first extract the color of a fireworks, then draw the appropriate fireworks with this color, and then send the fireworks to heaven through the to method in the drag effect, then, when the action is completed, we add the scattered particle effect. If we call addfireworks repeatedly, the fireworks will appear repeatedly. Because there cannot be too many fireworks on our interface, on the one hand, it will appear crowded and clearly visible, on the other hand, it will lead to very stuck interfaces. To solve this problem, we use the maxframe and frameindex variables to control it. When an onframe is triggered, we add frameindex and determine whether it is smaller than maxframe. If so, we call addfireworks () because the maxframe defined above is 4, therefore, a maximum of four fireworks can be added to the interface. However, if we do not set frameindex to 0 again and do not remove the fireworks, the four fireworks will remain on the screen, and will not disappear, but will not be added again. To achieve this, we add a loop in which the object is removed by determining whether the mode is "complete, determine whether to reset frameindex to 0 by checking whether the objects in fireworkslayer have been removed. Through this system, fireworks will continuously appear and disappear on the screen. This is the final result ~~~~

After the final run, I even lamented: "isn't this a fireworks that have never been seen for a long time ?"

The elders of lufy also said: "The effect is very beautiful ."

Hey, since experts say they're pretty, don't you try it now?

Finally, we provide the source code:Http://files.cnblogs.com/yorhom/fireworks.rar

It is said that the fireworks effect is not high, and 20 fireworks are intercepted at a time:

Finally, at the risk of being stuck, I made a try to put 1000 fireworks at a time, and they can still run, as shown below:

If you want to test the efficiency, you can increase the value of the variable maxframe.

This article ends. If there is anything wrong with the article, please submit it. In addition, if you have any questions, you can leave a message below the blog or Sina Weibo @ yorhom, of course, you can also send an email, mail: wangyuehao1999@gmail.com, I will do my best to help you solve.

Support is the greatest encouragement!

----------------------------------------------------------------

You are welcome to repost my article.

Reprinted Please note: transferred from yorhom's game box

Http://blog.csdn.net/yorhomwang

Continue to follow my blog