三国志曹超传开发典籍javascript编程

《三国志曹超传开发典籍javascript编程》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、用Javascript开发《三国志曹操传》-开源讲座(一)-让静态人物动起来首先来说，让一个游戏赋有可玩性必须要动静结合。（哈哈，大家以为我要讲作文了。。。但其实我今天要讲的是Javascript）静态的东西谁不会做呢？因为东西一生下来就是静态的（除非你是用的gif动画），所以不需要任何处理就能完成静态。那么我将要在下面告诉大家如何运用Javascript将静态图片变为动态图片。一、图片准备    fight01.pngfight02.pngfight03.pngfight04.png03.png02.png01.png首先，我找了一些出自经典游戏《三国志曹操传》

2、里的素材（这些是魏将庞德的图片）。在下面我要用这些静态图片来演示如何化静为动。如果自己要演示代码，请把以上的图片下载下来，图片名为图片对应下面那一栏。二、代码讲解先看以下javascript代码：[javascript]viewplaincopyprint?1.var picSub = 0;     2.    3.var time = 150; //时间间隔(毫秒)     4.    5.var pic1 = "./01.png";     6.var pic2 = "./02.png";     7.var pic3 = "./03.png";     8.

3、var pic4 = "./01.png";     9.var picArr = [pic1, pic2, pic3, pic4]; //定义数组，并将图片的位置所对应的变量放入其中    1.    2.setInterval(changeImg, time); //使图片按一定时间切换    3.    4.function changeImg()     5.{     6.    var xElem = document.getElementById("ID_IMG_ROLE");     7.    8.    if(picSub == picArr.

4、length-1){     9.        picSub = 0;     10.    }else{     11.        picSub += 1;     12.    } //判断是否超出数组长度，若超出，便使数组下标归0,使其不超出    13.        14.    xElem.src = picArr[picSub]; //切换图片    15.}     16.    17.function changeFight()    18.{    19.    pic1 = "./fight01.png";    20.    pic2

5、 = "./fight02.png";    21.    pic3 = "./fight03.png";    22.    pic4 = "./fight04.png";    23.    24.    picArr = [pic1, pic2, pic3, pic4];    25.        26.    setTimeout(reduction, 600);    27.}    28.    29.function reduction()    30.{    31.    pic1 = "./01.png";     32.    pic2 =

6、 "./02.png";     33.    pic3 = "./03.png";     34.    pic4 = "./01.png";    35.    picArr = [pic1, pic2, pic3, pic4];    36.}  varpicSub=0;vartime=150;//时间间隔(毫秒)varpic1="./01.png";varpic2="./02.png";varpic3="./03.png";varpic4="./01.png";varpicArr=[pic1,pic2,pic3,pic4];//定义数组，并将图片的位置所对

7、应的变量放入其中setInterval(changeImg,time);//使图片按一定时间切换functionchangeImg(){varxElem=document.getElementById("ID_IMG_ROLE");if(picSub==picArr.length-1){picSub=0;}else{picSub+=1;}//判断是否超出数组长度，若超出，便使数组下标归0,使其不超出xElem.src=picArr[picSub];//切换图片}functionchangeFight(){pic1="./fight01.png";pic2="./f

8、ight0