Javascript game development-component development of "Three Kingdoms Cao Zhuan Chuan" (2) Implementation of character walking-javascript skills

We talked about how to make static characters dynamic. Today we will talk about how to make the characters move. Interested friends can understand it. By the way, we will consolidate the application of the animate method, I hope this article will help you. In the previous section, we talked about how to make static characters dynamic. Today we will talk about how to make the characters move, because this lecture involves the content of the previous lecture, I wrote the link of the previous lecture below:

I. Image preparation

Today I want to change some images to make them fresh.

These materials are still from the legend of the Three Kingdoms. If I remember correctly, they should be the materials of Cao. Next, I will use the last technology to show you how to move people around. However, today we focus on how to make people move around, because we have discussed how to make people static and dynamic.

Ii. Code explanation

First look at the total javascript code:

The Code is as follows:

Var moveLengthLeft = 0;
Var moveLengthTop = 0;

Var actionST = 0;

Var timeInterval = 150;

Var pic = 0;

Function action ()
{
Var pic1 = "./pic2.png ";
Var pic2 = "./pic3.png ";
Var pic3 = "./pic1.png ";
Var actionArray = [pic1, pic2, pic3];

Var doc = document. getElementById ("ID_IMG_CAOCAO ");

If (pic = actionArray. length-2 ){
Pic = 0;
} Else {
Pic + = 1;
}

If (pic> 2 ){
Pic = 2;
Doc. src = "./pic1.png"
}

Doc. src = actionArray [pic];
}

Function walk ()
{
SetInterval (action, timeInterval );

For (var I = 0; I <100; I ++ ){
$ ("# ID_IMG_CAOCAO"). animate ({marginLeft: moveLengthLeft}, 10, function () {// use animate in jquery to control the walk of a person
ActionST ++;

If (actionST = 100 ){
StandCaocao ();
}
}); // Call callback when the animation is finished. Functions can be put in callback.

$ ("# ID_IMG_CAOCAO"). animate ({marginTop: moveLengthTop}, 10 );

MoveLengthLeft + = 2;
MoveLengthTop + = 1;
}
}

Function standCaocao ()
{
Pic = 2;
}

The local analysis is as follows:

The Code is as follows:

Function action ()
{
Var pic1 = "./pic2.png ";
Var pic2 = "./pic3.png ";
Var pic3 = "./pic1.png ";
Var actionArray = [pic1, pic2, pic3];

Var doc = document. getElementById ("ID_IMG_CAOCAO ");

If (pic = actionArray. length-2 ){
Pic = 0;
} Else {
Pic + = 1;
}

If (pic> 2 ){
Pic = 2;
Doc. src = "./pic1.png"
}

Doc. src = actionArray [pic];
}

The above Code has already been mentioned in the previous lecture, so I will not talk about it today. I will talk about how to move people directly.

First of all, there is no doubt that we need to think of jquery to move an object. Well, today we need to use it as a function: animate.
Look at the code again:

The Code is as follows:

Function walk ()
{
SetInterval (action, timeInterval );

For (var I = 0; I <100; I ++ ){
$ ("# ID_IMG_CAOCAO"). animate ({marginLeft: moveLengthLeft}, 10, function () {// use animate in jquery to control the walk of a person
ActionST ++;

If (actionST = 100 ){
StandCaocao ();
}
}); // Call callback when the animation is finished. Functions can be put in callback.

$ ("# ID_IMG_CAOCAO"). animate ({marginTop: moveLengthTop}, 10 );

MoveLengthLeft + = 2;
MoveLengthTop + = 1;
}
}

These codes can be used to move and stop people mainly in callback and animate. Callback is mainly used to stop a character, while animate mainly used to move the character.

Generally, the syntax of animate is: animate ({css code change}, the time needed for completion, callback );. For details, refer to: Workshop.

Of course, animate is obvious, but what about callback ??? It was originally hidden in animate.

The Code is as follows:

Function () {// use animate in jquery to control the walk of a person
ActionST ++;

If (actionST = 100 ){
StandCaocao ();
}
}); // Call callback when the animation is finished. Functions can be put in callback.

This code is callback. But we put his position on the function, so it is not very visible.
Some tutorials on callback: http://www.jb51.net/w3school/jquery/jquery_callback.htm

There is also a series of code:

The Code is as follows:

Function standCaocao ()
{
Pic = 2;
}

This code is mainly used to change a dynamic character into a static character. After the movement stops, the movements of the characters are gone.

Source code download: (including a jquery-1.8.0.js file)

Iii. demonstration results

First:

Then:

Finally:

Demo location

Iv. Postscript

First, character walking and action are essential to game production. Choosing good algorithms and functions is the key to success.
Next time, we will study how to use JavaScript to simulate the plot dialogue of the Three Kingdoms. Coming soon!

Thank you for your support. I will return to you in a better article.