《三国志曹操传》 JavaScript游戏开发部分开发(一)让静态角色动起来

首先，赋予一款游戏可玩性，需要动静结合。(哈哈，大家都以为我要写作文了。但是我今天要讲的是Javascript。谁不会做静态的事情？因为事物天生是静态的(除非你使用gif动画)，所以它们可以是静态的，无需任何处理。然后我会告诉你如何用Javascript把静态图片变成动态图片。1.图片准备。

fight 01 . png light 02 . png light 03 . png light 04 . png 03 . png 02 . png 01 . png首先，我从经典游戏《三国志曹操传》中找到了一些素材(这些是姜维庞德的照片)。在下面，我将使用这些静态图片来演示如何将静态转化为行动。如果你想自己演示代码，请下载上面的图片，叫做下面的专栏。二、代码解释先看下面的javascript代码：复制代码如下： var picSub=0；变化时间=150；//时间间隔(毫秒)var pic1='。/01 . png '；var pic2='。/02 . png '；var pic3='。/03 . png '；var pic4='。/01 . png '；var picArr=[pic1，pic2，pic3，pic4]；//定义一个数组，把图片位置对应的变量放进去。setInterval(changeImg，time)；//使图片切换功能根据一定的时间{ var xelem=document . getelementbyid(' id _ img _ role ')}进行改变；if(picSub==Picarr . length-1){ picSub=0；} else { PiCsub=1；}//判断是否超过数组长度，如果超过，则返回数组下标为0，使其不超过xelem . src=picArr[picSub]；//switch pictures}函数change fight () {pic1='。/fight 01 . png '；pic2='。/fight 02 . png '；pic3='。/fight 03 . png '；pic4='。/fight 04 . png '；picar=[pic1，pic2，pic3，pic4]；setTimeout(减少，600)；}函数约简(){ pic1='。/01 . png '；pic2='。/02 . png '；pic3='。/03 . png '；pic4='。/01 . png '；picar=[pic1，pic2，pic3，pic4]；}这些代码使用了我最喜欢的数组。当然，这里的数组也是整个程序的核心。以下是我一字一句的解释：复制代码如下：var pic1='。/01 . png '；var pic2='。/02 . png '；var pic3='。/03 . png '；var pic4='。/01 . png '；var picArr=[pic1，pic2，pic3，pic4]；//定义一个数组，把图片位置对应的变量放进去。首先，我在数组中放了几个对应图片位置的变量。以便用于以下操作。再看一下代码：复制的代码如下： var xelem=document . getelementbyid(' id _ img _ role ')；if(picSub==Picarr . length-1){ picSub=0；} else { PiCsub=1；}//判断是否超过数组长度，如果是，则返回数组下标为0，使其不超过xelem . src=picArr[picSub]；//切换图片在这里，使用if.else语句判断数组下标是否超过数组长度，如果超过，让下标返回0。然后取出数组中下标对应的图片位置，赋给id属性为ID_IMG_ROLE的img标签中的src属性。这样，图片就可以不断变化。所以这个时候只要给他一个调用函数的地方，就大功告成了！为了让图片显示不是瞬间，我们应该给它一个等待的秒数，然后在等待后显示下一张图片。因此，我使用了以下代码来调用该函数：复制代码如下：var time=150//时间间隔(毫秒)setInterval(changeImg，time)；//让图片在某个时间切换，让图片可以移动。我这里还增加了一个功能：当你在绿框里按下鼠标左键，里面的角色就会攻击，原理很简单。让我们慢慢研究吧！为了方便大家测试，我把包括html在内的所有代码放在下面供大家下载：我提供下载代码：三、示范效应始于：。

然后：。

后记看完这篇文章，大家一定对做动态Javascript的角色有了初步的了解。在未来，每个人都可以充分发挥自己的想象力，用这种方法制作出漂亮的动态游戏。当然，节目的神秘感不仅限于这些，而且也不容易理解！以后我会给大家讲讲其他的Javascript游戏开发技术。希望大家喜欢。