JavaScriptゲーム開発における「三國志 曹操」のコンポーネント開発(2)キャラクター歩行の実現_JavaScriptスキル

前回の講義では、静止したキャラクターを動かす方法について話しました。今回は、前回の講義の内容に関わるため、以下に前回の講義へのリンクを書きます。

1. 画像の準備

今日は写真をいくつか変更して、より新鮮なものにします。

これらの資料は、やはり『三国志 曹操伝』からのもので、確か曹操の資料だったはずです。次に、前回のテクニックを組み合わせて、キャラクターを動かす方法を説明します。ただし、前回の講義でキャラクターを静的な状態から動的な状態に動かす方法についてはすでに説明したため、今日はキャラクターを動かす方法に焦点を当てます。

2. コードの説明

まず JavaScript コード全体を確認します:

コードをコピーします コードは次のとおりです:

var moveLengthLeft = 0;

var actionST = 0; 🎜>
var pic = 0;

関数 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]; >
関数 walk()
{
setInterval(action, timeInterval);

for(var i = 0; i $("# ID_IMG_CAOCAO") .animate({marginLeft: moveLengthLeft}, 10, function(){ //jquery で animate を使用してキャラクターの歩行を制御します
actionST ;

if(actionST == 100){
standCaocao( );
}
}); // アニメーションが完了したらコールバックを呼び出します。コールバックに関数を入れることができます。

$("#ID_IMG_CAOCAO").animate({marginTop: moveLengthTop}, 10);

moveLengthLeft = 2;
moveLengthTop = 1;

functionstandCaocao()
{
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;
pic = 1;
}

if(pic > 2){
pic = 2;
doc.src = "./pic1.png"
}

doc.src = actionArray [pic];
}


上記のコードについては前回の講義ですでに説明したので、今日は説明せず、その方法についてのみ説明します。キャラクターを移動します。

まず、オブジェクトを動かすには間違いなく jquery が必要です。今日はその関数の 1 つである animate を使用します。
コードをもう一度見てください:

コードをコピーします


コードは次のとおりです:

関数 walk ()

{ setInterval(action, timeInterval); for(var i = 0; i $("# ID_IMG_CAOCAO").animate( {marginLeft: moveLengthLeft}, 10, function(){ //jquery で animate を使用してキャラクターの歩行を制御します actionST ;

if(actionST == 100){

standCaocao();
}
}); // アニメーションが完了したらコールバックを呼び出します。コールバックに関数を入れることができます。

$("#ID_IMG_CAOCAO").animate({marginTop: moveLengthTop}, 10);

moveLengthLeft = 2;
moveLengthTop = 1;



これらのコードは主にコールバックでキャラクターの移動や停止を実現し、アニメーションさせることができます。コールバックは主にキャラクターを停止させ、アニメーションは主にキャラクターを動かします。

通常、animate の構文は animate({css コードの変更}, 完了までの時間, callback); です。詳細については、
http://www.jb51.net/w3school/jquery/jquery_Effects.htm
を参照してください。ここには他にも多くの jquery 関数があります。詳細については、こちらをご覧ください。

もちろん、animate は明らかですが、コールバックはどうですか? ? ?それはアニメートの中に隠されていることが判明しました。

コードをコピー

コードは次のとおりです:

function(){ //Use animate in jquery to control character walking
actionST;

if(actionST == 100){
standCaocao();
}
}); // Call the callback when the animation is completed. You can put functions in callback.

This code is the callback. It's just that we put his position in the function, so it's not very visible.
Some tutorials on callback: http://www.jb51.net/w3school/jquery/jquery_callback.htm

There is also a string of code:

Copy code The code is as follows:

function standCaocao()
{
pic = 2;
}

This code is mainly used to turn dynamic characters into static characters. After this movement stops, the character's movements disappear.

Source code download: (includes a jquery-1.8.0.js file)

3. Demonstration effect

The first is:

Then:

Finally:

Demo location

4. Postscript

First of all, character walking and movement are essential aspects of game production. Choosing good algorithms and functions is the key to success.
Next time we will study how to use js to imitate the plot dialogue of the characters in "The Legend of Cao Cao" in "Three Kingdoms". Stay tuned!

I hope you will support me more, thank you. I will repay everyone with better articles.