javascript游戲開發之《三國志曹操傳》零部件開發(二)人物行走的實現_javascript技巧

一、圖片準備

今天我準備換幾張圖片，這樣更新鮮些。

這些素材照樣來自《三國志曹操傳》，如果我沒記錯，應該是曹操的素材。接下來我要結合上一次的技術，來告訴大家如何使人物走動起來。不過今天我們著重在于如何使人物走動，因為我們上一講已經講了如何使人物化靜態為動態。

二、代碼講解

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.gxlcms.com/w3school/jquery/jquery_effects.htm，這里面還有很多其他jquery函數，可以多了解了解。

當然，animate顯而易見，但callback呢？？？原來它藏在了animate里面。
代碼如下:
function(){ //用jquery中的animate來控制人物行走
actionST ++;

if(actionST == 100){
standCaocao();
}
}); //在動畫做完時調用callback。callback里可以放函數。

這段代碼便是callback。只不過我們把他的位置放上了函數，所以不怎么讓人看得見。
callback的一些教程: http://www.gxlcms.com/w3school/jquery/jquery_callback.htm

另外還有一串代碼：
代碼如下:
function standCaocao()
{
pic = 2;
}

這段代碼主要是用來使動態人物變為靜態人物。這樣移動停止后，人物動作也沒了。

源代碼下載:(包括一個jquery-1.8.0.js文件)

三、演示效果

首先是：

然后是：

最后是：

演示位置

四、后記

首先人物行走和動作是游戲制作必不可少的環節，選擇良好的算法和函數是成功的關鍵。
下一次我們將研究如何用js仿《三國志曹操傳》人物情節對話。敬請期待！

希望大家多支持，謝謝。我會以更好的文章來回報大家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com