Javascript game development-component development of "Three Kingdoms Cao Zhuan Chuan" (1) Let static characters move

Source: Internet
Author: User

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

Fight01.pngfight02.pngfight03.pngfight04.png03.png02.png01.png ). 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

First look at the following javascript code:Copy codeThe Code is as follows: 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:Copy codeThe Code is as follows: 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.

First, I put the variables corresponding to the positions of several images in the array. For the following operations.
Look at the code again:Copy codeThe Code is as follows: 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:Copy codeCode: var time = 150; // 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 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:

Download Code:
Iii. demonstration results

Start:

Then:

Demo location:
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 a beautiful dynamic game.
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.