Javascript游戏开发 -- 让你的静态人物动起来.docVIP

首先来说，让一个游戏赋有可玩性必须要动静结合。（哈哈，大家以为我要讲作文了。。。但其实我今天要讲的是Javascript）静态的东西谁不会做呢？因为东西一生下来就是静态的（除非你是用的gif动画），所以不需要任何处理就能完成静态。那么我将要在下面告诉大家如何运用Javascript将静态图片变为动态图片。 一、图片准备 　　　　　　　　　------------------------------图片对应的名称表----------------------------- fight01.png fight02.png fight03.png fight04.png 03.png 02.png 01.png 首先，我找了一些出自经典游戏《三国志曹操传》里的素材（这些是魏将庞德的图片）。在下面我要用这些静态图片来演示如何化静为动。如果自己要演示代码，请把以上的图片下载下来，图片名为图片对应下面那一栏。 二、代码讲解 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 var pic4 = ./01.png; 9 var picArr = [pic1, pic2, pic3, pic4]; //定义数组，并将图片的位置所对应的变量放入其中 10 11 setInterval(changeImg, time); //使图片按一定时间切换 12 13 function changeImg() 14 { 15 var xElem = document.getElementById(ID_IMG_ROLE); 16 17 if(picSub == picArr.length-1){ 18 picSub = 0; 19 }else{ 20 picSub += 1; 21 } //判断是否超出数组长度，若超出，便使数组下标归0,使其不超出 22 23 xElem.src = picArr[picSub]; //切换图片 24 } 25 26 function changeFight() 27 { 28 pic1 = ./fight01.png; 29 pic2 = ./fight02.png; 30 pic3 = ./fight03.png; 31 pic4 = ./fight04.png; 32 33 picArr = [pic1, pic2, pic3, pic4] 34 35 setTimeout(reduction, 600); 36 } 37 38 function reduction() 39 { 40 pic1 = ./01.png; 41 pic2 = ./02.png; 42 pic3 = ./03.png; 43 pic4 = ./01.png; 44 picArr = [pic1, pic2, pic3, pic4]; 45 } 这些代码用到了我最爱的数组，当然，这里的数组也是整个程序的核心。以下是我一字一句的讲解： ? 1 var pic1 = ./01.png; 2 var pic2 = ./02.png; 3 var pic3 = ./03.png; 4 var pic4 = ./01.png; 5 var picArr = [pic1, pic2, pic3, pic4]; //定义数组，并将图片的位置所对应的变量放入其中 ? 首先在数组里我放了几个图片的位置所对应的变量。以便用于以下操作。 再看代码： 1 var xElem = document.getElementById(ID_IMG_ROLE); 2 3 if(picSub == picArr.length-1){ 4 picSub = 0; 5 }else{ 6 picSub += 1; 7 } //判断是否超出数组长度，若超出，便使数组下标归0,使其不超出 8 9 xElem.src = picArr[picSub]; //切换图片