建站
咨詢
售后
建站咨詢
新聞中心
上一講我們談到了如何讓靜態(tài)人物變?yōu)閯?dòng)態(tài)，今天我們來(lái)談?wù)勅绾问谷宋镆苿?dòng)，因?yàn)檫@一講涉及上一講內(nèi)容所以我把上一講的鏈接寫(xiě)在下方。
欽南ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書(shū)合作）期待與您的合作！
一、圖片準(zhǔn)備
今天我準(zhǔn)備換幾張圖片，這樣更新鮮些。
這些素材照樣來(lái)自《三國(guó)志曹操傳》，如果我沒(méi)記錯(cuò)，應(yīng)該是曹操的素材。接下來(lái)我要結(jié)合上一次的技術(shù)，來(lái)告訴大家如何使人物走動(dòng)起來(lái)。不過(guò)今天我們著重在于如何使人物走動(dòng)，因?yàn)槲覀兩弦恢v已經(jīng)講了如何使人物化靜態(tài)為動(dòng)態(tài)。
二、代碼講解
先看總的js代碼：
- 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來(lái)控制人物行走
- actionST ++;
- if(actionST == 100){
- standCaocao();
- }
- }); //在動(dòng)畫(huà)做完時(shí)調(diào)用callback。callback里可以放函數(shù)。
- $("#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];
- }
以上代碼我已經(jīng)在上一講提到過(guò)了，所以今天就不再過(guò)問(wèn)了，直接講如何移動(dòng)人物。
首先來(lái)說(shuō)，使物體移動(dòng)無(wú)疑要想到j(luò)query，不錯(cuò)今天我們是要用到它的一個(gè)函數(shù)：animate。
再看代碼：
- function walk()
- {
- setInterval(action, timeInterval);
- for(var i = 0; i < 100; i++){
- $("#ID_IMG_CAOCAO").animate({marginLeft: moveLengthLeft}, 10, function(){ //用jquery中的animate來(lái)控制人物行走
- actionST ++;
- if(actionST == 100){
- standCaocao();
- }
- }); //在動(dòng)畫(huà)做完時(shí)調(diào)用callback。callback里可以放函數(shù)。
- $("#ID_IMG_CAOCAO").animate({marginTop: moveLengthTop}, 10);
- moveLengthLeft += 2;
- moveLengthTop += 1;
- }
- }
這些代碼能實(shí)現(xiàn)人物走動(dòng)和停住主要在于callback和animate。callback主要是使人物停下，animate主要是使人物移動(dòng)。
通常，animate的語(yǔ)法是：animate({css代碼的改變}, 完成要用的時(shí)間, callback);。詳情請(qǐng)看：http://www.w3school.com.cn/jquery/jquery_effects.asp，這里面還有很多其他jquery函數(shù)，可以多了解了解。當(dāng)然，animate顯而易見(jiàn)，但callback呢？？？原來(lái)它藏在了animate里面。
- function(){ //用jquery中的animate來(lái)控制人物行走
- actionST ++;
- if(actionST == 100){
- standCaocao();
- }
- }); //在動(dòng)畫(huà)做完時(shí)調(diào)用callback。callback里可以放函數(shù)。
這段代碼便是callback。只不過(guò)我們把他的位置放上了函數(shù)，所以不怎么讓人看得見(jiàn)。
callback的一些教程:http://www.w3school.com.cn/jquery/jquery_callback.asp
另外還有一串代碼：
- function standCaocao()
- {
- pic = 2;
- }
這段代碼主要是用來(lái)使動(dòng)態(tài)人物變?yōu)殪o態(tài)人物。這樣移動(dòng)停止后，人物動(dòng)作也沒(méi)了。
源代碼下載:http://files.cnblogs.com/ducle/walk.rar(包括一個(gè)jquery-1.8.0.js文件)
三、演示效果
首先是：
然后是：
最后是：
四、后記
首先人物行走和動(dòng)作是游戲制作必不可少的環(huán)節(jié)，選擇良好的算法和庫(kù)函數(shù)是成功的關(guān)鍵。
下一次我們將研究如何用js仿《三國(guó)志曹操傳》人物情節(jié)對(duì)話。敬請(qǐng)期待！
標(biāo)題名稱：JS游戲開(kāi)發(fā)（二）讓目標(biāo)人物移動(dòng)
URL鏈接：http://m.5511xx.com/article/coisjoe.html
