First of all, let a game be endowed with the gameplay must be combined with static and dynamic. Haha, people think I want to talk about the composition ... But actually I'm going to talk about JavaScript today) static stuff who wouldn't do it. Because things are static in life (unless you are using GIF animation), so do not need any processing to complete the static. So I'm going to tell you how to use JavaScript to turn a static picture into a dynamic picture.
first, picture preparation
|
|
|
|
|
|
|
Fight01.png |
Fight02.png |
Fight03.png |
Fight04.png |
03.png |
02.png |
01.png |
First of all, I found some from the classic game "Kingdoms Cao Chuan" in the material (these are Wei will Pound's picture). Below I want to use these static pictures to demonstrate how to move static. If you want to demonstrate the code, please download the above pictures, the picture name for the picture corresponding to the column below.
Second, the code explanation First look at the following JavaScript code:
[JavaScript] View Plain copy print? var picsub = 0; var time = 150; Time interval (milliseconds) var pic1 = "./01.png"; var pic2 = "./02.png"; nbsp; var pic3 = "./03.png"; var pic4 = "./01.png"; var Picarr = [Pic1, Pic2, PIC3, pic4];//define an array, and place the corresponding variable in the position of the picture setinterval (changeimg, Time); Switch the picture to a certain time function changeimg () { var Xelem = document.getElementById ("Id_img_role"); if (picsub = picarr.length-1) { Picsub = 0; }else{ picsub + + 1; }//Judge whetherBeyond the length of the array, if exceeded, the array subscript 0, so that it does not exceed xelem.src = PICARR[PICSUB]; Toggle Picture } function changefight () { pic1 = "./fight01.png"; pic2 = "./fight02.png"; nbsp; pic3 = "./fight03.png"; pic4 = "./ Fight04.png "; Picarr = [Pic1, Pic2, PIC3, pic4]; & nbsp settimeout (reduction); } function reduction () { Pic1 = "./01.png"; pic2 = "./02.png"; PIC3 = "./03.png"; pIc4 = "./01.png"; Picarr = [Pic1, Pic2, PIC3, pic4]; }
var picsub = 0; var time = 150;
Time interval (milliseconds) var pic1 = "./01.png";
var pic2 = "./02.png";
var pic3 = "./03.png";
var pic4 = "./01.png"; var Picarr = [Pic1, Pic2, PIC3, PIC4]; Define the array and put the corresponding variable in the picture's position in the SetInterval (changeimg, time);
Switch the picture to a certain time function changeimg () {var Xelem = document.getElementById ("Id_img_role");
if (picsub = = picarr.length-1) {picsub = 0;
}else{picsub + + 1; //Judge whether the array length is exceeded, and if it is exceeded, make the array subscript 0 so that it does not exceed xelem.src = picarr[picsub];
Toggle Picture} function Changefight () {pic1 = "./fight01.png";
Pic2 = "./fight02.png";
PIC3 = "./fight03.png";
Pic4 = "./fight04.png";
Picarr = [Pic1, Pic2, PIC3, PIC4];
settimeout (reduction, 600);
function reduction () {Pic1 = "./01.png";
Pic2 = "./02.png";
PIC3 = "./03.png";
Pic4 = "./01.png"; Picarr = [Pic1, pic2, PIC3, PIC4]; }
This code uses my favorite array, and of course, the array here is the core of the entire program. The following is my word explanation:
[JavaScript]View Plain copy print? var pic1 = "./01.png"; var pic2 = "./02.png"; var pic3 = "./03.png"; var pic4 = "./01.png"; var Picarr = [Pic1, Pic2, PIC3, pic4];//defines an array and puts the corresponding variable in the position of the picture.
var pic1 = "./01.png";
var pic2 = "./02.png";
var pic3 = "./03.png";
var pic4 = "./01.png";
First in the array I put a few pictures of the position of the corresponding variable. For the following actions.
Look at the code again:
[JavaScript]View Plain copy print? var Xelem = document.getElementById ("Id_img_role"); if (picsub = = picarr.length-1) {picsub = 0; }else{picsub + + 1; //Judge whether the array length is exceeded, and if it is exceeded, make the array subscript 0 so that it does not exceed xelem.src = picarr[picsub]; Toggle Picture
var Xelem = document.getElementById ("Id_img_role");
if (picsub = = picarr.length-1) {
picsub = 0;
} else{
picsub + = 1;/
/judge whether the array length is exceeded, and if it is exceeded, the array is subscript 0 so that it does not exceed
xelem.src = picarr[picsub];//Toggle Picture
Here use the If...else statement to determine whether the array subscript exceeds the length of the array, so that the subscript is 0. Then remove the corresponding picture position in the array and assign the SRC attribute in the IMG tag with the id attribute id_img_role. This will allow the picture to change constantly. So just give him a function call where it's done. In order to let the picture Show is not an instant thing, we have to give it a wait seconds, wait for the end of the next picture. So I used the following code to make a function call:
[JavaScript]View Plain copy print? var time = 150; Interval (milliseconds) setinterval (changeimg, time); Make pictures switch over time
var time = 150; Time interval (milliseconds)
This will make the picture move. I also added a function here: when you press the left mouse button in the green frame, the characters inside will attack, the principle is very simple, we slowly study it.
For your testing convenience, I put all the code including HTML below for everyone to download:
I provide the location of the download code: Http://files.cnblogs.com/ducle/chgpicPangde.rar
third, the demonstration effect
Let's start with:
Then it is:
Demo Location: http://www.cnblogs.com/yorhom/archive/2012/09/15/2686027.html
Four, PostScript
After reading this article, you must have a preliminary understanding of JavaScript to do dynamic characters.
later you can play your own imagination, using this method to make a beautiful dynamic game.
Of course, the mystery of the program is not only this, it is not easy to go through it. I'll tell you about other JavaScript game development techniques in the future. I hope you like it.