javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
更新时间：2013年01月23日 17:13:17 作者：
上一讲我们谈到了如何让静态人物变为动态，今天我们来谈谈如何使人物移动，感兴趣的朋友可以了解下哦，顺便巩固一下animate方法的应用，希望本文对你有所帮助
上一讲我们谈到了如何让静态人物变为动态，今天我们来谈谈如何使人物移动，因为这一讲涉及上一讲内容所以我把上一讲的链接写在下方：
一、图片准备
今天我准备换几张图片，这样更新鲜些。
这些素材照样来自《三国志曹操传》，如果我没记错，应该是曹操的素材。接下来我要结合上一次的技术，来告诉大家如何使人物走动起来。不过今天我们着重在于如何使人物走动，因为我们上一讲已经讲了如何使人物化静态为动态。
二、代码讲解
先看总的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);。详情请看：https://www.jb51.net/w3school/jquery/jquery_effects.htm，这里面还有很多其他jquery函数，可以多了解了解。
当然，animate显而易见，但callback呢？？？原来它藏在了animate里面。
复制代码 代码如下:
function(){ //用jquery中的animate来控制人物行走
actionST ++;
if(actionST == 100){
standCaocao();
}
}); //在动画做完时调用callback。callback里可以放函数。
这段代码便是callback。只不过我们把他的位置放上了函数，所以不怎么让人看得见。
callback的一些教程: https://www.jb51.net/w3school/jquery/jquery_callback.htm
另外还有一串代码：
复制代码 代码如下:
function standCaocao()
{
pic = 2;
}
这段代码主要是用来使动态人物变为静态人物。这样移动停止后，人物动作也没了。
源代码下载:(包括一个jquery-1.8.0.js文件)
三、演示效果
首先是：
然后是：
最后是：
演示位置
四、后记
首先人物行走和动作是游戏制作必不可少的环节，选择良好的算法和函数是成功的关键。
下一次我们将研究如何用js仿《三国志曹操传》人物情节对话。敬请期待！
希望大家多支持，谢谢。我会以更好的文章来回报大家。
相关文章
这篇文章主要为大家介绍了cypress e2e测试编写注意点总结分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
大家都知道Promise解决了回调地狱的问题,“回调地狱”所说的嵌套其实是指异步的嵌套,它带来了两个问题:可读性的问题和信任问题,下面这篇文章主要给大家介绍了关于JS中promise特点与信任问题解决的相关资料,需要的朋友可以参考下2022-06-06
这篇文章主要为大家详细介绍了JavaScript实现简单计时器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
JavaScript面试中常考的字符串操作方法大全(包含ES6)
对于JavaScript字符串操作方法，你真的全部掌握了吗？来看看这篇面试中常考的字符串操作大全，包含最新的ES6字符串操作方法，值得收藏哦2020-05-05
这篇文章主要介绍了原生javascript实现图片按钮切换,需要的朋友可以参考下2015-01-01
JS中的对象强调的是一种复合类型，JS中创建对象及对对象的访问是极其灵活的，下面与大家分享下创建类/对象的几种方式，感兴趣的朋友可以了解下哈2013-05-05
使用了移动层，可里面的输入框却不能使用了，下面是解决方法需要的朋友可以参考下。2009-11-11
rollup是一款用来es6模块打包代码的构建工具(支持css和js打包)。这篇文章主要介绍了Rollup处理并打包JS文件项目实例,需要的朋友可以参考下2018-05-05
下面小编就为大家带来一篇javascript基础进阶_深入剖析执行环境及作用域链。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
简单对比分析JavaScript中的apply,call与this的使用
简单的说call，apply都属于Function.prototype的一个方法，它是JavaScript引擎内在实现的，因为属于Function.prototype，所以每个Function对象实例(就是每个方法)都有call，apply属性。既然作为方法的属性，那它们的使用就当然是针对方法的了，这两个方法是容易混淆的2015-12-12
最新评论