HTML5 fantastic journey-the implementation process of dazzling meteor shower Effects

Comments: When a meteor appears, people like to make a wish on them, because it is said that after a desire is made to the meteor, the wish can be fulfilled. Recently, out of interest, we have made a drag-and-Seek effect, later, I thought that I could drag the tail to achieve the effect of the meteor shower. Half-sided human exposure. Wait for the meeting to see the light. The sky on Earth is like a meteor. Zhu men curtain shadows deeply rain. Gaunt new dance. The ends of the earth to enjoy the new Qing. Only when the bridge is selling mirrors is idle.
-- Song Liu chenweng yu mei

When a meteor appears, people like to make a wish on them, because it is said that after a desire is made to the meteor, the desire can be fulfilled. However, the meteor is rare. At least I have never seen it, so I have never made a wish on it. Recently, I made a drag-and-tail effect out of interest. Later I thought that the drag-and-tail effect could be used to achieve the effect of meteor shower. So let's implement it today, and let me wait for a long time to see the child shoes of the meteor.

Let's start with a few:
 

Test connection: http://www.cnblogs.com/yorhom/articles/3237944.html
I. Preparations
The open-source engine lufylegend. js is required for this development. The engine details are as follows:
Engine Official Website:
Http://lufylegend.com/lufylegend
Engine API Website:
Http://lufylegend.com/lufylegend/api
2. Tail Effect
To achieve meteor shower, you need to use the drag-and-tail effect, but lufylegend does not add the drag-and-tail function, so you only have to write it yourself. In fact, it is not difficult to implement it, that is, lufy is too lazy, no encapsulation. (May lufy not see this sentence ......). Today, I will help his elders achieve this effect.
The drag-and-tail effect is very common in games, such as phantom and bullets when people move. Therefore, we encapsulate it into an Smearing class, which is mainly responsible for implementing the dragging effect. The Code is as follows:

The Code is as follows:
/**
* Smearing
* @ Param $ object Add the dragged object
*/
Function Smearing ($ object ){
Var self = this;
Base (self, LSprite, []);
Self. x = 0;
Self. y = 0;
Self. mode = "";
Self. smearingSprite = new LSprite ();
Self. addChild (self. smearingSprite );
Self. object = $ object;
Self. originalSprite = new LSprite ();
Self. addChild (self. originalSprite );
Self. originalSprite. addChild (self. object );
Self. addEventListener (LEvent. ENTER_FRAME, self. smeared );
}

Code List 1
Next, let me explain it word by word.
The first line of code will not be explained. Everyone on the Earth knows it. So start with the second line.
First, we will use the base class to inherit from LSprite, such as code list 2 (for what base and LSprite are, you can go to the API documentation to see it, or see my previous articles ).

The Code is as follows:
Base (self, LSprite, []);

Code List 2
Next, we add a layer to add the tail. For example, code list 3

The Code is as follows:
Self. smearingSprite = new LSprite ();
Self. addChild (self. smearingSprite );

Code List 3
Then, save the object for adding the drag-and-tail effect for future use. See Code List 4.

The Code is as follows:
Self. object = $ object;

Code list 4
Then add the layer to which you want to add the drag-and-tail effect object and display it. For example, Code List 5

The Code is as follows:
Self. originalSprite = new LSprite ();
Self. addChild (self. originalSprite );
Self. originalSprite. addChild (self. object );

Code List 5
Add a timeline event to facilitate tail.

The Code is as follows:
Self. addEventListener (LEvent. ENTER_FRAME, self. smeared );

Code List 6
Here, the Smearing constructor is finished and explained. If you do not understand it, you may not know lufylegend. The addChild and LSprite in it are all encapsulated in lufylegend.
We have added timeline events in the above Code. Why join? Because I may wish to explain the principle of tail dragging. In fact, the tail is constantly cloning the original object and placing it in the current position, which is equivalent to constantly stamping the image. When the original object is removed, the cloned object is not removed, but the original object is removed. If we add many objects, a line linking the original object will be formed. Then, we traverse every Member in the line and change the transparency of the current object through easing. Then, determine whether the transparency of the object is 0. If yes, remove the object to avoid occupying too much space. Therefore, we add a timeline event to continually add drag-and-tail objects.
The Smearing member function smeared serves this purpose. The Code is as follows:

The Code is as follows:
Smearing. prototype. smeared = function (self ){
Var smearingChild = new SmearingChild (self. originalSprite, self. object );
Self. smearingSprite. addChild (smearingChild );
For (var key in self. smearingSprite. childList ){
LTweenLite. to (self. smearingSprite. childList [key], 0.5 ,{
Alpha: 0,
OnComplete: function (o ){
Self. smearingSprite. removeChild (o );
}
});
}
};

Code List 7
The code is executed according to the principle I mentioned above. We can see that we finally traversed the members of the drag-and-tail layer, then changed the transparency of the objects to be traversed, and removed itself after the easing. The easing class uses the LTweenLite encapsulated in lufylegend. You can go to the API documentation and write it in detail.
The above two lines of code are used, such as listing 8:

The Code is as follows:
Var smearingChild = new SmearingChild (self. originalSprite, self. object );
Self. smearingSprite. addChild (smearingChild );

Code List 8
We can see that a class named SmearingChild is used, which is the legendary tail class. This class cannot be ignored. Although there are few codes, it is very important. The code in it is shown in listing 9:

The Code is as follows:
/**
* SmearingChild
* @ Param $ parent determines the object at the tail position
* @ Param $ object the object for which the tail effect is to be added
*/
Function SmearingChild ($ parent, $ object ){
Var self = this;
Base (self, LSprite, []);
Self. addChild ($ object );
Self. x = $ parent. x;
Self. y = $ parent. y;
Self. alpha = 0.8;
}

Code List 9
The above class instantiation has two parameters: the first is used to determine the tail position, and the second is the original object. First, let's explain that "the object used to determine the tail position of this drag is actually moving the entire Smearing object instead of the originalSprite object in it, so why is smearingSprite designed like this? In fact, there is a reason (nonsense, please ignore it). The reason is that if the coordinates of our tail are set to the coordinates of the entire Smearing object, the object added to smearingSprite will also move, and the tail will be misplaced, so as to not achieve the effect. So I adopted the above method: instead of moving itself, I moved originalSprite. Therefore, we need to upload originalSprite data to SmearingChild, so we can get it through $ parent.
After talking about it, everyone should have understood it. After the release of code, you can continue to study, or put forward questions below the article or use Sina Weibo @ Yorhom, you can also use the mailbox, mail address: wangyuehao1999@gmail.com. (More contact information (^ o ^ ))
The Smearing class has a poor function, that is, to make the object move slowly and implement it very easily. Add the to function:

The Code is as follows:
Smearing. prototype. to = function ($ duration, $ vars ){
Var self = this;
$ Vars. onComplete = function (){
Self. mode = "complete ";
}
LTweenLite. to (self. originalSprite, $ duration, $ vars );
};

Code List 10
The first parameter is the time when the execution is moved. The second parameter is the time when the execution of slow data is executed. The last parameter is the same as that of the LTweenLite. to method. Refer to the API documentation. However, it is worth noting that, to facilitate the operation, we will change the mode attribute of this object to "complete" at the end of moving ". In this way, you can determine whether to perform other operations based on the value of the mode attribute, such as removing the object or moving it elsewhere.
The class Smearing is encapsulated and easy to use, as shown below:

The Code is as follows:
Init (10, "mylegend", 500,400, main );
Var back;
Function main (){
LStage. setDebug (true );
Back = new LSprite ();
Back. graphics. drawRect (0, "", [0, 50, 50], true, "blue ");
Smearing = new Smearing (back, 50 );
Smearing. to (2 ,{
X: 200,
Y: 200
});
AddChild (smearing );
}

Code List 11
The demo is as follows:
 
Test connection: http://www.cnblogs.com/yorhom/articles/3237266.html
3. Dazzling meteor shower Effect
With the Smearing class, our meteor shower is much simpler. First, we will show all the code:

The Code is as follows:
Init (10, "mylegend", 500,400, main );
Var backLayer, meteorLayer;
Var back, meteor;
Var maxFrame = 40, indexFrame = 0;
Function main (){
LStage. setDebug (true );
// Join the baseboard Layer
BackLayer = new LSprite ();
AddChild (backLayer );
// Add to the meteor Layer
MeteorLayer = new LSprite ();
AddChild (meteorLayer );
// Draw a black rectangle as the background
Back = new LGraphics ();
Back. drawRect (0, "", [0, 0, LStage. width, LStage. height], true, "black ");
BackLayer. addChild (back );
// Draw a yellow rectangle as a meteor
Meteor = new LSprite ();
Meteor. graphics. drawRect (0, "", [0, 0, 10], true, "yellow ");
BackLayer. addEventListener (LEvent. ENTER_FRAME, onframe );
}
Function onframe (){
If (indexFrame> maxFrame ){
IndexFrame = 0;
// Add a tail for each meteor
Var smearing = new Smearing (meteor, 50 );
Smearing. x = Math. floor (Math. random () * 250 );
Smearing. y = 0;
Smearing. to (2 ,{
X: Math. floor (Math. random () * (500-480) + 480 ),
Y: 400
});
MeteorLayer. addChild (smearing );
}
For (var key in meteorLayer. childList ){
If (meteorLayer. childList [key]. mode = "complete "){
MeteorLayer. removeChild (meteorLayer. childList [key]);
}
}
IndexFrame ++;
}

Code List 12
Comments are added to each line of code, which is easy to understand. If you do not understand it, it may be because you do not know lufylegend. You can refer to the API documentation for more information.
Finally, code packaging,
This article ends. If there is anything wrong with the article, please submit it. In addition, if you have any questions, leave a message below the blog and I will do my best to help you solve the problem.
Support is the greatest encouragement!