javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(二)人物行走的實現(xiàn)
更新時間：2013年01月23日 17:13:17 作者：
上一講我們談到了如何讓靜態(tài)人物變?yōu)閯討B(tài)，今天我們來談?wù)勅绾问谷宋镆苿?，感興趣的朋友可以了解下哦，順便鞏固一下animate方法的應(yīng)用，希望本文對你有所幫助
上一講我們談到了如何讓靜態(tài)人物變?yōu)閯討B(tài)，今天我們來談?wù)勅绾问谷宋镆苿樱驗檫@一講涉及上一講內(nèi)容所以我把上一講的鏈接寫在下方：
一、圖片準備
今天我準備換幾張圖片，這樣更新鮮些。
這些素材照樣來自《三國志曹操傳》，如果我沒記錯，應(yīng)該是曹操的素材。接下來我要結(jié)合上一次的技術(shù)，來告訴大家如何使人物走動起來。不過今天我們著重在于如何使人物走動，因為我們上一講已經(jīng)講了如何使人物化靜態(tài)為動態(tài)。
二、代碼講解
先看總的javascript代碼：復(fù)制代碼 代碼如下:
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();
}
}); //在動畫做完時調(diào)用callback。callback里可以放函數(shù)。
$("#ID_IMG_CAOCAO").animate({marginTop: moveLengthTop}, 10);
moveLengthLeft += 2;
moveLengthTop += 1;
}
}
function standCaocao()
{
pic = 2;
}
局部分析如下：
復(fù)制代碼 代碼如下:
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)在上一講提到過了，所以今天就不再過問了，直接講如何移動人物。
首先來說，使物體移動無疑要想到j(luò)query，不錯今天我們是要用到它的一個函數(shù)：animate。
再看代碼：
復(fù)制代碼 代碼如下:
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();
}
}); //在動畫做完時調(diào)用callback。callback里可以放函數(shù)。
$("#ID_IMG_CAOCAO").animate({marginTop: moveLengthTop}, 10);
moveLengthLeft += 2;
moveLengthTop += 1;
}
}
這些代碼能實現(xiàn)人物走動和停住主要在于callback和animate。callback主要是使人物停下，animate主要是使人物移動。
通常，animate的語法是：animate({css代碼的改變}, 完成要用的時間, callback);。詳情請看：http://www.dhdzp.com/w3school/jquery/jquery_effects.htm，這里面還有很多其他jquery函數(shù)，可以多了解了解。
當然，animate顯而易見，但callback呢？？？原來它藏在了animate里面。
復(fù)制代碼 代碼如下:
function(){ //用jquery中的animate來控制人物行走
actionST ++;
if(actionST == 100){
standCaocao();
}
}); //在動畫做完時調(diào)用callback。callback里可以放函數(shù)。
這段代碼便是callback。只不過我們把他的位置放上了函數(shù)，所以不怎么讓人看得見。
callback的一些教程: http://www.dhdzp.com/w3school/jquery/jquery_callback.htm
另外還有一串代碼：
復(fù)制代碼 代碼如下:
function standCaocao()
{
pic = 2;
}
這段代碼主要是用來使動態(tài)人物變?yōu)殪o態(tài)人物。這樣移動停止后，人物動作也沒了。
源代碼下載:(包括一個jquery-1.8.0.js文件)
三、演示效果
首先是：
然后是：
最后是：
演示位置
四、后記
首先人物行走和動作是游戲制作必不可少的環(huán)節(jié)，選擇良好的算法和函數(shù)是成功的關(guān)鍵。
下一次我們將研究如何用js仿《三國志曹操傳》人物情節(jié)對話。敬請期待！
希望大家多支持，謝謝。我會以更好的文章來回報大家。
相關(guān)文章
這篇文章主要介紹了JavaScript Window窗口對象屬性和使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-01-01
本文給大家整理了有關(guān)js四十條常用技巧，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09
JavaScript可以說是最讓人初學(xué)者難以理解的單一屬性。我看了一些資料后，開始明白其實這些困難很大程度來自prototype這個名字本身的二義性2012-02-02
JavaScript使用promise處理多重復(fù)請求
處理重復(fù)請求的文章想必大家也看過了很多，大多數(shù)都是分為在response返回之前發(fā)現(xiàn)重復(fù)請求就return掉的和使用節(jié)流/防抖來間接規(guī)避用戶頻繁操作兩種版本的。本文主要介紹了JavaScript使用promise處理多重復(fù)請求，感興趣的可以了解一下2021-05-05
下面小編就為大家?guī)硪黄猦tml中鼠標滾輪事件onmousewheel的處理方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了Javascript如何遞歸遍歷本地文件夾，文中代碼非常細致，幫助大家更好的理解和學(xué)習JavaScript遞歸，感興趣的朋友可以了解下2020-08-08
關(guān)于JavaScript數(shù)組你所不知道的3件事
這篇文章主要為大家詳細介紹了關(guān)于JavaScript數(shù)組三個并不那么常見的功能，你所不知道的事情，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了微信小程序中使用 async/await的方法,結(jié)合實例形式分析了微信小程序中async/await的功能、使用方法及操作注意事項,需要的朋友可以參考下2020-05-05
本文主要介紹了js獲取數(shù)組對象中的全部key和value值，主要使用JavaScript的?map()?函數(shù)和?values()?迭代器來實現(xiàn)取出數(shù)組對象的所有key值和value值，感興趣的可以了解下2024-01-01
javascript模擬post提交隱藏地址欄的參數(shù)
想要隱藏地址欄的參數(shù)，就只能用javascript模擬post提交，下面是示例代碼，需要的朋友可以看看2014-09-09