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.pngfight02.pngfight03.pngfight04.png03.png02.png01.png First of all, I found some classic game, "Kingdoms Cao Chuan Material (these are the pictures of the Wei Pound). 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
Read the following JavaScript code first:
Copy Code code as follows:
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 position of the picture
SetInterval (changeimg, time); Make pictures switch over time
function changeimg ()
{
var Xelem = document.getElementById ("Id_img_role");
if (picsub = = picarr.length-1) {
picsub = 0;
}else{
Picsub + 1;
//Determine if the array length is exceeded, and if it is exceeded, the array is labeled 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:
Copy Code code as follows:
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 position of the picture
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:
Copy Code code as follows:
var Xelem = document.getElementById ("Id_img_role");
if (picsub = = picarr.length-1) {
picsub = 0;
}else{
Picsub + 1;
//Determine if the array length is exceeded, and if it is exceeded, the array is labeled 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:
Copy Code code as follows:
var time = 150; Time interval (milliseconds)
SetInterval (changeimg, time); Make pictures switch over time
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 download code:
Third, the demonstration effect
Let's start with:
Then it is:
Demo Location:
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.
