JS game development, let your static characters move

First, to make a game playable, you must combine Dynamic and Static resources. Haha, everyone thinks I want to talk about the composition... 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

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 demonstrate the code, download the above image. The image name corresponds to the following column.

Ii. Code explanation

 
 

  
  
Var picSub = 0;
  
  
Var time = 150; // time interval (MS)
  
  
Var pic1 = "./01.png ";
  
  
Var pic2 = "./02.png ";
  
  
Var pic3 = "./03.png ";
  
  
Var pic4 = "./01.png ";
  
  
Var picArr = [pic1, pic2, pic3, pic4]; // defines the array and places the corresponding variables of the image position into it.
  
  

  
  
SetInterval (changeImg, time); // enables the image to be switched over for a certain period of time
  
  

  
  
Function changeImg ()
  
  
{
  
  
Var xElem = document. getElementById ("ID_IMG_ROLE ");
  
  

  
  
If (picSub = picArr. length-1 ){
  
  
PicSub = 0;
  
  
} Else {
  
  
PicSub + = 1;
  
  
} // Determine whether the length of the array is exceeded. If the length is exceeded, the array subscript is set to 0 so that it does not exceed
  
  

  
  
XElem. src = picArr [picSub]; // switch the image
  
  
}
  
  

  
  
Function changeFight ()
  
  
{
  
  
Pic1 = "./fight01.png ";
  
  
Pic2 = "./fight02.png ";
  
  
Pic3 = "./fight03.png ";
  
  
Pic4 = "./fight04.png ";
  
  

  
  
PicArr = [pic1, pic2, pic3, pic4]
  
  

  
  
SetTimeout (ction, 600 );
  
  
}
  
  

  
  
Function compute ()
  
  
{
  
  
Pic1 = "./01.png ";
  
  
Pic2 = "./02.png ";
  
  
Pic3 = "./03.png ";
  
  
Pic4 = "./01.png ";
  
  
PicArr = [pic1, pic2, pic3, pic4];
  
  
}
 
 

These Code uses my favorite array. Of course, the array here is also the core of the entire program. Here is my explanation:

 
 

  
  
1 var pic1 = "./01.png ";
  
  
2 var pic2 = "./02.png ";
  
  
3 var pic3 = "./03.png ";
  
  
4 var pic4 = "./01.png ";
  
  
5 var picArr = [pic1, pic2, pic3, pic4]; // defines the array and puts the corresponding variables of 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:

 
 

  
  
Var xElem = document. getElementById ("ID_IMG_ROLE ");
  
  
If (picSub = picArr. length-1 ){
  
  
PicSub = 0;
  
  
} Else {
  
  
PicSub + = 1;
  
  
} // Determine whether the length of the array is exceeded. If the length is exceeded, the array subscript is set to 0 so that it does not exceed
  
  
XElem. src = picArr [picSub]; // switch the 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:

 
 

  
  
Var time = 150; // time interval (MS)
  
  
SetInterval (changeImg, time); // enables the image to be switched over for a certain period of time
 
 

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

For the convenience of testing, I wrote all the code including html below:

 
 

  
  
<Html>
  
  
<Head>
  
  
<Script language = javascript>
  
  
Var picSub = 0;
  
  
Var noa = 0;
  
  
Var time = 150; // time interval (MS)
  
  
Var pic1 = "./01.png ";
  
  
Var pic2 = "./02.png ";
  
  
Var pic3 = "./03.png ";
  
  
Var pic4 = "./01.png ";
  
  
Var picArr = [pic1, pic2, pic3, pic4]; // defines the array and places the corresponding variables of the image position into it.
  
  
SetInterval (changeImg, time); // enables the image to be switched over for a certain period of time
  
  
Function changeImg ()
  
  
{
  
  
Var xElem = document. getElementById ("ID_IMG_ROLE ");
  
  

  
  
If (picSub = picArr. length-1 ){
  
  
PicSub = 0;
  
  
} Else {
  
  
PicSub + = 1;
  
  
} // Determine whether the length of the array is exceeded. If the length is exceeded, the array subscript is set to 0 so that it does not exceed
  
  

  
  
XElem. src = picArr [picSub]; // switch the image
  
  

  
  
/* For (var I = 0; I <2; I ++ ){
  
  
SetInterval (function () {changeFight (); noa + = 1 ;}, 2000 );
  
  
}*/
  
  
}
  
  
Function changeFight ()
  
  
{
  
  
Pic1 = "./fight01.png ";
  
  
Pic2 = "./fight02.png ";
  
  
Pic3 = "./fight03.png ";
  
  
Pic4 = "./fight04.png ";
  
  

  
  
PicArr = [pic1, pic2, pic3, pic4]
  
  

  
  
SetTimeout (ction, 600 );
  
  
}
  
  
Function compute ()
  
  
{
  
  
Pic1 = "./01.png ";
  
  
Pic2 = "./02.png ";
  
  
Pic3 = "./03.png ";
  
  
Pic4 = "./01.png ";
  
  
PicArr = [pic1, pic2, pic3, pic4];
  
  
}
  
  
</Script>
  
  
</Head>
  
  
<Body onkeydown = "changeFight ()">
  
  

  
  
</Body>
  
  
</Html>
 
 

Iii. demonstration results

Because it is dynamic, it is difficult to show you the demo diagram. But at least on my browser, the operation was successful.

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

The main image sequence is as follows:

If you press any key, the attack sequence is as follows:

Iv. Postscript

After reading this article, you must have a preliminary understanding of Javascript's 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.