软件开发培训班 >> 编程开发 >> JavaScript


javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现

上一讲我们谈到了如何让静态人物变为动态，今天我们来谈谈如何使人物移动，因为这一讲涉及上一讲内容所以我把上一讲的链接写在下方：

一、图片准备

今天我准备换几张图片，这样更新鲜些 。


这些素材照样来自《三国志曹操传》，如果我没记错，应该是曹操的素材 。接下来我要结合上一次的技术，来告诉大家如何使人物走动起来 。不过今天我们着重在于如何使人物走动，因为我们上一讲已经讲了如何使人物化静态为动态 。

二、代码讲解

先看总的javascript代码：
复制代码 代码如下:

var moveLengthLeft = 0;
var moveLengthTop = 0;

var actionST = 0;

var timeInterval = 150;

var pic = 0;

function action()
{
var pic1 = "./pic2.png";
var pic2 = "./pic3.png";
var pic3 = "./pic1.png";
var actionArray = [pic1, pic2, pic3];

var doc = document.getElementById("ID_IMG_CAOCAO");

if (pic == actionArray.length - 2){
pic = 0;
}else{
pic += 1;
}

if(pic > 2){
pic = 2;
doc.src = "./pic1.png"
}

doc.src = actionArray[pic];
}

function walk()
{
setInterval(action, timeInterval);

for(var i = 0; i < 100; i++){
$("#ID_IMG_CAOCAO").animate({marginLeft: moveLengthLeft}, 10, function(){ //用jquery中的animate来控制人物行走
actionST ++;

if(actionST == 100){
standCaocao();
}
}); //在动画做完时调用callback 。callback里可以放函数 。

$("#ID_IMG_CAOCAO").animate({marginTop: moveLengthTop}, 10);

moveLengthLeft += 2;
moveLengthTop += 1;
}
}

function standCaocao()
{
pic = 2;
}

局部分析如下：
复制代码 代码如下:

function action()
{
var pic1 = "./pic2.png";
var pic2 = "./pic3.png";
var pic3 = "./pic1.png";
var actionArray = [pic1, pic2, pic3];

var doc = document.getElementById("ID_IMG_CAOCAO");

if (pic == actionArray.length - 2){
pic = 0;
}else{
pic += 1;
}

if(pic > 2){
pic = 2;
doc.src = "./pic1.png"
}

doc.src = actionArray[pic];
}

以上代码我已经在上一讲提到过了，所以今天就不再过问了，直接讲如何移动人物 。

首先来说，使物体移动无疑要想到jquery，不错今天我们是要用到它的一个函数：animate 。
再看代码：
复制代码 代码如下:

function walk()
{
setInterval(action, timeInterval);

for(var i = 0; i < 100; i++){
$("#ID_IMG_CAOCAO").animate({marginLeft: moveLengthLeft}, 10, function(){ //用jquery中的animate来控制人物行走
actionST ++;

if(actionST == 100){
standCaocao();
}
}); //在动画做完时调用callback 。callback里可以放函数 。

$("#ID_IMG_CAOCAO").animate({marginTop: moveLengthTop}, 10);

moveLengthLeft += 2;
moveLengthTop += 1;
}
}

这些代码能实现人物走动和停住主要在于callback和animate 。callback主要是使人物停下，animate主要是使人物移动 。

通常，animate的语法是：animate({css代码的改变}, 完成要用的时间, callback); 。详情请看：http://www.jb51.net/w3school/jquery/jquery_effects.htm，这里面还有很多其他jquery函数，可以多了解了解 。

当然，animate显而易见，但callback呢？？？原来它藏在了animate里面 。
复制代码 代码如下:

function(){ //用jquery中的animate来控制人物行走
actionST ++;

if(actionST == 100){
standCaocao();
}
}); //在动画做完时调用callback 。callback里可以放函数 。

这段代码便是callback 。只不过我们把他的位置放上了函数，所以不怎么让人看得见 。
callback的一些教程: http://www.jb51.net/w3school/jquery/jquery_callback.htm

另外还有一串代码：
复制代码 代码如下:

function standCaocao()
{
pic = 2;
}

这段代码主要是用来使动态人物变为静态人物 。这样移动停止后，人物动作也没了 。

源代码下载:(包括一个jquery-1.8.0.js文件)

三、演示效果

首先是：


然后是：


最后是：


演示位置

四、后记

首先人物行走和动作是游戏制作必不可少的环节，选择良好的算法和函数是成功的关键 。
下一次我们将研究如何用js仿《三国志曹操传》人物情节对话 。敬请期待！

希望大家多支持，谢谢 。我会以更好的文章来回报大家 。