Develop "Three Kingdoms Cao Zhuan" with JavaScript-component development (1)-Let static characters move

 

First, to make a game playable, you must combine Dynamic and Static resources. (Haha, everyone thinks I want to talk about itComposition... But what I want to talk about today is Javascript. Who will not do static things? Because things are static in a lifetime (unless you use GIF animation), you can complete the static state without any processing. Then I will show you how to use JavaScript to convert static images into dynamic images.

 

I. Image preparation

Fight01.png	Fight02.png	Fight03.png	Fight04.png	03. PNG	02. PNG	01. PNG

First, I found some materials from the classic game "The Legend of the Three Kingdoms" (these are images of Wei zhipound ). Below I will use these static images to demonstrate how to convert static images into dynamic images. If you want to demonstrateCode. Download the above image. The image name corresponds to the following column.

 

Ii. Code explanation

First look at the following JS Code:

 1   VaR Picsub = 0 ;  2     3   VaR Time = 150; //  Interval (MS)  4     5   VaR Pic1 = "./01.png" ;  6  VaR Pic2 = "./02.png" ;  7   VaR Pic3 = "./03.png" ;  8   VaR Pic4 = "./01.png" ;  9   VaR Picarr = [pic1, pic2, pic3, pic4]; //  Define the array and put the variable corresponding to the image position into it.  10     11 Setinterval (changeimg, time );//  Change the image time  12     13   Function  Changeimg ()  14   {  15       VaR Xelem = Document. getelementbyid ("id_img_role" );  16     17       If (Picsub = picarr. Length-1 ){  18 Picsub = 0 ;  19 } Else  {  20 Picsub + = 1 ;  21 } //  Determines whether the length of the array is exceeded. If the length of the array is exceeded, the array subscript is set to 0 so that it does not exceed  22         23 Xelem. src = picarr [picsub]; //  Switch Image  24   } 25     26   Function  Changefight ()  27   {  28 Pic1 = "./fight01.png" ;  29 Pic2 = "./fight02.png" ;  30 Pic3 = "./fight03.png" ;  31 Pic4 = "./fight04.png" ;  32    33 Picarr = [Pic1, pic2, pic3, pic4];  34         35 SetTimeout (ction, 600 );  36   }  37     38   Function  Ction ()  39   {  40 Pic1 = "./01.png" ; 41 Pic2 = "./02.png" ;  42 Pic3 = "./03.png" ;  43 Pic4 = "./01.png" ;  44 Picarr = [Pic1, pic2, pic3, pic4];  45 }

These codes use my favorite array. Of course, the array here is also the wholeProgramCore. Here is my explanation:

 

1 VaRPic1 = "./01.png";2 VaRPic2 = "./02.png";3 VaRPic3 = "./03.png";4 VaRPic4 = "./01.png";5 VaRPicarr = [pic1, pic2, pic3, pic4];//Define the array and put the variable corresponding to the image position into it.
 

 

First, I put the variables corresponding to the positions of several images in the array. For the following operations.

Look at the code again:

 1  VaR Xelem = Document. getelementbyid ("id_img_role" );  2     3   If (Picsub = picarr. Length-1 ){  4 Picsub = 0 ;  5 } Else  {  6 Picsub + = 1 ;  7 }//  Determines whether the length of the array is exceeded. If the length of the array is exceeded, the array subscript is set to 0 so that it does not exceed  8         9 Xelem. src = picarr [picsub]; //  Switch Image 

Here, the IF... else statement is used to determine whether the array subscript exceeds the array length. If it exceeds the array length, the subscript is set to 0. Then retrieve the corresponding image location of the subscript in the array and assign it to the src attribute in the IMG tag with the ID attribute id_img_role. In this way, images can be continuously changed. Therefore, you only need to give him a function call! In order to make the image display not an instant, we need to give it a waiting time in seconds, and then display the next image after it is finished. Therefore, I use the following code to call a function:

1 VaRTime = 150;//Interval (MS)23Setinterval (changeimg, time );//Change the image time
 

In this way, the image can be moved. I also added a feature here: When you press the left mouse button in the Green Border, the characters in it will attack, and the principle is also very simple. Let's study it slowly!

For the convenience of testing, I put all the code including HTML below for you to download:

 Where I provide download code: http://files.cnblogs.com/ducle/chgpicPangde.rar

 

Iii. demonstration results

Start:

Then:

 Demo location: http://www.cnblogs.com/yorhom/archive/2012/09/15/2686027.html

(This demo is provided by HJ demo. Thank you for your support .)

 

 

Iv. Postscript

After reading this articleArticleYou must have a preliminary understanding of JavaScript dynamic characters. In the future, you can make full use of your imagination and use this method to create beautiful Dynamic Games. Of course, the mysteries of the program are not just that. It is not easy to understand it! I will talk about other JavaScript game development technologies in the future. I hope you will like it.