上一讲我们谈到了如何让静态人物变为动态,今天我们来谈谈如何使人物移动,因为这一讲涉及上一讲内容所以我把上一讲的链接写在下方:
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
欢迎继续关注我的博客
分享到:
相关推荐
16款最流行的JavaScript框架-开源中国社区.docx16款最流行的JavaScript框架-开源中国社区.docx16款最流行的JavaScript框架-开源中国社区.docx16款最流行的JavaScript框架-开源中国社区.docx16款最流行的JavaScript...
16款最流行的JavaScript框架-开源中国社区.pdf16款最流行的JavaScript框架-开源中国社区.pdf16款最流行的JavaScript框架-开源中国社区.pdf16款最流行的JavaScript框架-开源中国社区.pdf16款最流行的JavaScript框架-...
这些素材照样来自《三国志曹操传》,如果我没记错,应该是曹操的素材。接下来我要结合上一次的技术,来告诉大家如何使人物走动起来。不过今天我们着重在于如何使人物走动,因为我们上一讲已经讲了如何使人物化静态为...
为了方便大家测试“Javascript游戏开发 -- 让你的静态人物动起来”里的代码,我把它的源代码放在这里供大家下载。
以上是一段导语,话不扯远,对《三国志曹操传》熟悉的玩家知道,《三国志曹操传》的地图是由小地图块拼成的,那要实现它就和导语说得一样:很麻烦。不过即使麻烦也是一门技术,因此在此分享给大家,希望大家喜欢。 ...
fight01.pngfight02.pngfight03.pngfight04.png03.png02.png01.png首先,我找了一些出自经典游戏《三国志曹操传》里的素材(这些是魏将庞德的图片)。在下面我要用这些静态图片来演示如何化静为动。如果自己要演示...
前两讲我告诉了大家如何使人物移动,那么今天我们就来看看如何实现仿《三国志曹操传》人物情景对话,感兴趣的朋友可以了解下,希望本文对你有所帮助
首先来说,我对游戏开发可以算是不怎么深入,因为现在的程序员爱用canvas,我却就只会拿几个div凑和。不过没关系,因为做出来的同样是游戏。哈!废话最近有点多,感兴趣的朋友可以了解下
sa-sdk-javascript, 传感器分析 JavaScript SDK sa-sdk-javascript传感器分析 JavaScript SDK紧急招聘前端工程师,运维工程师,大数据工程师等,各种级别的都需要,求发送到我邮箱( shengyonggen@sensorsdata.cn
本书的以那些期望提高自己在设计模式方面的知识并将它们应用到javascript编程语言中的专业开发者为目标读者。
JSDK是一个JavaScript框架,具有一个小的核心文件和许多扩展库,具有以下功能:Lang-Extension,BOM,DOM,Event,Reflect,AOP,Thread,JS2D,JSGF和JSUI。 您可以使用JSDK来开发Web应用程序,JS游戏或Web小部件。
IFRAME间链接变换.rar
Traceur 是一个 JavaScript.next-to-JavaScript-of-today 编译器,它允许您今天使用未来的功能。 Traceur 支持 ES6 以及一些实验性的 ES.next 特性。 Traceur 的目标是为新的 JavaScript 功能的设计提供信息,这些...
开源项目-pazams-go-for-javascript-developers.zip,pazams/go-for-javascript-developers
JavaScript-讲座.rar
五子棋 - in html5是一款使用Javascript开发的开源小游戏
ChakraCore 是微软开源的 Microsoft Edge 浏览器 Chakra JavaScript 引擎的核心部分,主要用于 Microsoft Edge 和 Windows 中 HTML/CSS/JavaScript 编写的应用。ChakraCore 支持 x86/x64/ARM 架构 JavaScript 的 ...
用开源软件实现的超美javascript特效,绝无仅有,附完整开发包