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


Posted in Javascript onJanuary 23, 2013

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

一、图片准备

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

javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现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);。详情请看:https://3water.com/w3school/jquery/jquery_effects.htm,这里面还有很多其他jquery函数,可以多了解了解。

当然,animate显而易见,但callback呢???原来它藏在了animate里面。

function(){ //用jquery中的animate来控制人物行走 
actionST ++; if(actionST == 100){ 
standCaocao(); 
} 
}); //在动画做完时调用callback。callback里可以放函数。

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

另外还有一串代码:

function standCaocao() 
{ 
pic = 2; 
}

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

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

三、演示效果

首先是:

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

然后是:

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

最后是:

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

演示位置

四、后记

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

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

Javascript 相关文章推荐
使用Post提交时须将空格转换成加号的解释
Jan 14 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
深入理解js generator数据类型
Aug 16 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 #Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 #Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 #Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 #Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 #Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 #Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 #Javascript
You might like
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
详解Python的Django框架中的通用视图
2015/05/04 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
python计算auc指标实例
2017/07/13 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
python多进程实现文件下载传输功能
2018/07/28 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
最新党员的自我评价分享
2013/11/04 职场文书
博士生入学考试推荐信
2013/11/17 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
电视节目策划方案
2014/05/16 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
2014年行政工作总结
2014/11/19 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
python使用shell脚本创建kafka连接器
2022/04/29 Python