用Javascript开发《三国志曹操传》-开源讲座(二)-人物行走的实现
上一讲我们谈到了如何让静态人物变为动态，今天我们来谈谈如何使人物移动，因为这一讲涉及上一讲内容所以我把上一讲的链接写在下方：
http://blog.csdn.net/yorhomwang/article/details/7984576
一、图片准备
今天我准备换几张图片，这样更新鲜些。
|
|
|
| pic1.png | pic2.png | pic3.png |
这些素材照样来自《三国志曹操传》，如果我没记错，应该是曹操的素材。接下来我要结合上一次的技术，来告诉大家如何使人物走动起来。不过今天我们着重在于如何使人物走动，因为我们上一讲已经讲了如何使人物化静态为动态。
二、代码讲解
先看总的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.w3school.com.cn/jquery/jquery_effects.asp，这里面还有很多其他jquery函数，可以多了解了解。
当然，animate显而易见，但callback呢？？？原来它藏在了animate里面。
function(){ //用jquery中的animate来控制人物行走 actionST ++; if(actionST == 100){ standCaocao(); }
}); //在动画做完时调用callback。callback里可以放函数。这段代码便是callback。只不过我们把他的位置放上了函数，所以不怎么让人看得见。
callback的一些教程: http://www.w3school.com.cn/jquery/jquery_callback.asp
另外还有一串代码：
function standCaocao()
{ pic = 2;
} 这段代码主要是用来使动态人物变为静态人物。这样移动停止后，人物动作也没了。
源代码下载:http://files.cnblogs.com/ducle/walk.rar(包括一个jquery-1.8.0.js文件)
三、演示效果
四、后记
首先人物行走和动作是游戏制作必不可少的环节，选择良好的算法和函数是成功的关键。
下一次我们将研究如何用js仿《三国志曹操传》人物情节对话。敬请期待！
----------------------------------------------------------------
欢迎大家转载我的文章。
转载请注明：转自Yorhom's Game Box
欢迎继续关注我的博客
用Javascript开发《三国志曹操传》-开源讲座(二)-人物行走的实现相关推荐
- 用Javascript开发《三国志曹操传》-开源讲座(五)-可移动地图的实现
前几章的位置: 用Javascript开发<三国志曹操传>-开源讲座(四)-用地图块拼成大地图 http://blog.csdn.net/yorhomwang/article/detail ...
- 用Javascript开发《三国志曹操传》-开源讲座(四)-用地图块拼成大地图
小时候我们玩过拼图游戏,是用自己的手去拼的.今天我们来研究研究用javascript来拼图.同样是拼图,但用js拼图要比用手拼图麻烦多了,因此以后我要把它优化成引擎. 一.前言 以上是一段导语,话不扯 ...
- 用Javascript开发《三国志曹操传》-开源讲座(三)-情景对话中，仿打字机输出文字
前两讲我告诉了大家如何使人物移动,那么今天我们就来看看如何实现仿<三国志曹操传>人物情景对话.其他讲的具体链接我写在下方. 用Javascript开发-<三国志曹操传>-开源讲 ...
- 用Javascript开发《三国志曹操传》-开源讲座(三)-情景对话中，仿打字机输出文字...
前两讲我告诉了大家如何使人物移动,那么今天我们就来看看如何实现仿<三国志曹操传>人物情景对话.其他讲的具体链接我写在下方. 用Javascript开发-<三国志曹操传>-开源讲 ...
- 用Javascript开发《三国志曹操传》-开源讲座(一)-让静态人物动起来
首先来说,让一个游戏赋有可玩性必须要动静结合.(哈哈,大家以为我要讲作文了...但其实我今天要讲的是Javascript)静态的东西谁不会做呢?因为东西一生下来就是静态的(除非你是用的gif动画),所 ...
- 用Javascript开发《三国志曹操传》-零部件开发(三)-人物对话中，仿打字机输出文字...
前两讲我告诉了大家如何使人物移动,那么今天我们就来看看如何实现仿<三国志曹操传>人物情景对话.具体的链接我写在下方. Javascript游戏开发-<三国志曹操传>-开源讲座( ...
- 用Javascript开发《三国志曹操传》-零部件开发(一)-让静态人物动起来
首先来说,让一个游戏赋有可玩性必须要动静结合.(哈哈,大家以为我要讲作文了...但其实我今天要讲的是Javascript)静态的东西谁不会做呢?因为东西一生下来就是静态的(除非你是用的gif动画),所 ...
- 用Javascript开发《三国志曹操传》-零部件开发(五)-可移动地图的实现
前几章的位置: 用Javascript开发<三国志曹操传>-零部件开发(四)-用地图块拼成大地图 http://www.cnblogs.com/ducle/archive/2012/09/ ...
- 用Javascript开发《三国志曹操传》-零部件开发(四)-用地图块拼成大地图
小时候我们玩过拼图游戏,是用自己的手去拼的.今天我们来研究研究用javascript来拼图.同样是拼图,但用js拼图要比用手拼图麻烦多了,因此以后我要把它优化成引擎. 一.前言 以上是一段导语,话不扯 ...
最新文章
- 1084 Broken Keyboard
- YOLOv5在建筑工地中安全帽佩戴检测的应用
- 执行startx后Ubuntupassword正确进不去的问题
- Spring Security OAuth2——自定义OAuth2第三方登录（Gitee）
- 前端实现只显示年月日
- 框架学习八：二维码(Zxing)
- lvs,haproxy实现负载均衡
- [转]2020年4月github上最热门项目-python
- 笔记本功耗测试软件,笔记本功率一般多大 笔记本功率检测【图文】
- JavaScript获取浏览器高度和宽度值
- Matlab安装minGW
- 借助echarts制作酷炫3d地球动画
- 杂谈：加班中离世的人
- 这些道理不懂，你注定就是穷打工的命！
- pandas笔记（3）——DataFrame数据查看，缺失值，异常值，重复值预处理
- STM32学习之温湿度检测——DHT11
- Android 相机预览方向和拍照方向
- i春秋百度杯CTF比赛2016年12月场writeup
- 使用word写论文必备技巧（设置目录，目录导航）
- 湖南大学计算机考研群2021,湖南大学2021年硕士研究生拟录取名单公示