Javascriptゲーム開発：『三國志 曹操伝』コンポーネント開発(3) 状況依存ダイアログでタイプライター出力テキストを模倣_JavaScriptスキル

最初の 2 つの講義では、キャラクターを動かす方法を説明しました。今日は、「三国志」の「曹操伝説」のキャラクターを模倣したダイアログを実装する方法を見ていきます。以下に具体的なリンクを書きました。

1. はじめに

ニュースによっては、タイプライターのような方法でテキストを作成することにより、ひどい結果が生じることを誰もがまだ覚えていると思います。ということで、今日の主な目的はこれを行うことです。

9月5日、私はオフィスでこのような手続きをしようと思いつき、いくつかのアイデアを考えました。まず、マージンを調整する方法を使いたかったのは当然ですが、結局非常に面倒で技術が貧弱でした。そこで、配列とループを使用します。 9月13日に時間をかけて書きましたが、最近はとても忙しく、平日は基本的にブログに取り組むことができないため、皆さんにシェアする時間がありませんでした。今週末なので、私の経験を皆さんと共有したいと思います。私たちが一緒に進歩できることを願っています。

2. コードの説明

まずコードを見てみましょう:

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

var contentout = [];
var content = "デュクル、デュクル、デュクル...";
contentout = content.substring(0, content.length); ;

var time = 0;

function input(){
for(var i = 0; i setTimeout("ドキュメント.getElementById(' ID_P_CONTENT').innerHTML = contentout[sub], sub = 1", time);
time = 100;
}
}

これを使用しましたコードにより予期しない結果が発生しました。はは、説明は少し大げさですが、本当に欲しかったものを手に入れることができました。早速、分析を見てみましょう。

これらのコードは入力を完了し、配列、ループ、およびいくつかの一般変数のみを使用します。難易度はそれほど高くないことがわかります。

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

var contentout = []; var content = "デュクル、デュクル、デュクル...";
contentout = content.substring(0, content.length);
var sub = 0; ;


ここでグローバル変数を定義します。 1 つ目は配列を定義することです。結局のところ、配列とループがこのプログラムの核心です。次に、文字列を定義し、内容を「ducle、ducle、ducle、ducle...」に設定しました。次のステップでは、文字を 1 つずつ配列に入力します。そこで、文字列を 1 文字ずつ切り出すように設計された関数 substring() を使用しました。

サブストリング構文: stringObject.substring(start,stop)
w3cschool もチェックアウトできます:
http://www.jb51.net/w3school/js/jsref_substring .htm

文字列を 1 つずつ切り取った後、切り取った値を配列に割り当てる必要があります。この時点で、配列は各単語を 1 つずつメンバーとして正しく配置できます。添え字。私が次に何をしたいのかは誰でも推測できます。それは、ループを使用して配列の内容を表現することです。 残りの変数subは、後から配列要素を出力するために使用する添字変数です。時間は、後でループを入力する時間です。詳細な分析については以下で説明します。
コードをもう一度見てください:



コードをコピーします

コードは次のとおりです: function input(){ for(var i = 0; i setTimeout("document.getElementById('ID_P_CONTENT').innerHTML = contentout[sub], sub = 1", 時間);

時間 = 100;
}
}


これは、特にループを使用して配列内の要素を 1 つずつ出力するコア部分です。 JavaScript ループで最も厄介な点は、変数が最初にループされることであることは誰もが知っています。これは、ループするたびにアラートを使用して変数 i をここに入力すると、その値は常に同じ値になり、最大値と等しくなることを意味します。そこで、上で定義したサブ変数が役に立ちます。

サブ変数は待機してから処理するため、何度ループしても一定時間=1になるまで待機する必要があります。したがって、出力時に添え字として使用する方が適切です。

皆さんも setTimeout 関数について理解しています。同じ時刻の setTimeout 時間パラメーターが 2 つある場合、コードが同じ行に書かれていない場合でも、2 つのコードは同時に実行されます。したがって、ループするたびに 100 を追加すると、100 ミリ秒後にさらに 1 つのテキストが表示されます。

また、ここでオブジェクトの内容を変更するには = を使用する必要があることに注意してください。そうしないと、一度に 1 つの単語しか表示されません。

コードのダウンロードアドレス
3. デモンストレーション効果

最初は:

その後:

最後に:

デモアドレス:
追記

努力は報われます。一生懸命努力すれば、ゲームのデザインは難しくないと思います。今後も良い技術があればすぐに共有させていただきます。最近、これまで話したテクノロジーを整理し、小さなデモを作成しました。皆さんに気に入っていただければ幸いです。デモのダウンロードと試用プレイは近日中に発表される予定ですが、まだテスト中です。さらに、ゲーム開発とゲーム エンジンも重要です。これにより、ゲームの設計が容易になります。
ご支援ありがとうございます!