上一講我們談到了如何讓靜態人物變為動態,今天我們來談談如何使人物移動,因為這一講涉及上一講內容所以我把上一講的連結寫在下方:
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檔案)
三、示範效果首先是:
然後是:
最後是:
示範位置:http://www.cnblogs.com/yorhom/archive/2012/09/15/2686100.html
四、後記
首先人物行走和動作是遊戲製作必不可少的環節,選擇良好的演算法和函數是成功的關鍵。
下一次我們將研究如何用js仿《三國志曹操傳》人物情節對話。敬請期待!
希望大家多支援,謝謝。我會以更好的文章來回報大家。
----------------------------------------------------------------
歡迎大家轉載我的文章。
轉載請註明:轉自Yorhom's Game Box
歡迎繼續關注我的部落格