Using JavaScript to develop "kingdoms Cao Chuan"-Open source lectures (i)-let static characters move __java

Source: Internet
Author: User
Tags array length setinterval

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.

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.