Javascriptゲーム開発：『三國志 曹操伝』コンポーネント開発（1）固定キャラ作成 move_javascriptスキル

まず、ゲームをプレイ可能にするには、動きと動きを組み合わせる必要があります。 (笑、みんな私が構成について話すつもりだと思っていました...しかし実際、私が今日話したいのは Javascript です) 静的なことを行う方法を知らない人はいないでしょうか?物体は生成された時点では静的であるため (GIF アニメーションを使用しない限り)、静的な状態を実現するための処理は必要ありません。次に、JavaScript を使用して静止画像を動画像に変換する方法を説明します。

1. 画像の準備

fight01.pngfight02.pngfight03.pngfight04.png03.png02.png01.png まず最初に、古典的なゲームをいくつか見つけました。ゲーム「Three Kingdoms」「曹操伝」の資料（魏の将軍ポンドの写真です）。以下では、これらの静止画像を使用して、静止を動きに変える方法を説明します。コードをデモしたい場合は、上の画像をダウンロードしてください。画像の名前は下の列に対応しています。

2. コードの説明

まず次の JavaScript コードを見てください:

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

var picSub = 0;

var time = 150; //時間間隔 (ミリ秒)

var pic1 = "。 /01.png";
var pic2 = "./02.png";
var pic3 = "./03.png";
var pic4 = "./01.png";
var picArr = [pic1 , pic2, pic3, pic4] // 配列を定義し、画像の位置に対応する変数を入れます

setInterval(changeImg, time); // 画像を作成します。一定の時間に応じて切り替える

function changeImg()
{
var xElem = document.getElementById("ID_IMG_ROLE");

if(picSub == picArr.length- 1){
picSub = 0;
}else{
picSub = 1;
} //配列の長さを超えているかどうかを判断し、超えている場合は配列の添字を 0 にリセットします。

xElem.src = picArr[picSub]; //画像を切り替える
}

function changeFight()
{
pic1 = "./fight01.png ";
pic2 = "./fight02.png";
pic3 = "./fight03.png";
pic4 = "./fight04.png";

picArr = [ pic1, pic2, pic3, pic4];

setTimeout(reduction, 600);

関数duction()
{
pic1 = "./01. png";
pic2 = "./02 .png";
pic3 = "./03.png";
pic4 = "./01.png";
picArr = [pic1, pic2, pic3, pic4];
}

これらのコードは、もちろん、ここの配列もプログラム全体の中核です。以下は私の説明です:

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

var pic1 = "./01.png";
var pic2 = "./02.png";
var pic4 = " ./01.png";
var picArr = [pic1, pic2, pic3, pic4]; // 配列を定義し、画像の位置に対応する変数をその中に入れます

まず、配列に写真の位置に対応する変数をいくつか入れます。以下の操作のために。
コードをもう一度見てください:

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

var xElem = document.getElementById("ID_IMG_ROLE");

if(picSub == picArr.length-1){
picSub = 0; 🎜>picSub = 1;
} //配列の長さを超えているかどうかを判断し、超えている場合は、

xElem.src = picArr[picSub]; を超えないように配列の添字を 0 に戻します。 // 画像を切り替えます


ここでは、if...else ステートメントを使用して、配列の添字が配列の長さを超えているかどうかを判断します。超過した場合、添字は 0 に返されます。次に、配列内の添字に対応する画像位置を取り出し、id 属性 ID_IMG_ROLE を使用して img タグの src 属性に割り当てます。これにより、画像が変化し続けることができます。したがって、この時点で関数を呼び出す場所を提供すれば完了です。画像の表示を瞬時に行わないようにするには、待機秒数を与え、待機後に次の画像を表示する必要があります。そこで、次のコードを使用して関数呼び出しを行いました。

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

var time = 150; //時間間隔 (ミリ秒)

setInterval(changeImg, time) //特定の時間で画像を切り替える

これにより、画像が動きます。ここにも機能を追加しました。緑色の枠内でマウスの左ボタンを押すと、内側のキャラクターが攻撃します。原理も非常に簡単です。ゆっくり勉強してみましょう。
誰もがテストできるように、HTML を含むすべてのコードを以下に置き、誰でもダウンロードできるようにしました。

ダウンロード コードを提供します

: 3. デモンストレーション効果
最初は次のとおりです:

その後:

デモの場所

: 追記
この記事を読んだ後は、JavaScript を使用した動的文字についての予備的な理解が必要です。

将来的には、誰もが想像力を最大限に発揮し、この方法を使用して美しくダイナミックなゲームを作成できるようになります。

もちろん、プログラムの謎はこれだけではなく、解明するのは簡単ではありません。他の Javascript ゲーム開発技術については、今後説明していきます。皆さんも気に入っていただければ幸いです。