0

私は、多くの典型的なロール プレイング ゲームで見られる Javascript ダイアログ スクリプトを作成しています。代替テキスト http://www.dailynintendo.com/wp-content/uploads/2008/12/luminous-arc-2-dialogue.jpg

現時点では、スキップできるテキスト文字列の配列を取得しています。決定を下すことができるポイントに到達し、入力に基づいて別の文字列が表示されます。

ただし、これが正しい方法だとは思いません。スクリプトの要件は次のとおりです。

  • 複数のダイアログ スクリプトのサポート
  • 複数の文字
  • ユーザー決定入力 (「私が好きですか?」 -はい -いいえ)

これは現時点での私のコードです:

// Intro script
var script_intro = [];
script_intro[0] = 'Hello how are you?';
script_intro[1] = 'So I heard..';
script_intro[2] = 'This is a cool game!';

script_intro[3] = [];
script_intro[3][0] = 'Do you like me?';
script_intro[3][1] = [];
script_intro[3][1][0] = 'Jah';
script_intro[3][1][1] = 4;
script_intro[3][2] = [];
script_intro[3][2][0] = 'Nah';
script_intro[3][2][1] = 5;

// Intro script: variation I
var script_intro_1 = [];
script_intro_1[0] = 'I love you too!';

// Intro script: variation II
var script_intro_2 = [];
script_intro_2[0] = 'Damn you...';

function initDialog()
{
    // This is where the text will be shown
    var dialog = document.getElementById('dialog');
    var content = document.getElementById('content');
    
    var nextButton = document.getElementById('nextButton');
    var optionButton_1 = document.getElementById('optionButton_1');
    var optionButton_2 = document.getElementById('optionButton_2');
    
    // How fast the characters will appear after each other (milliseconds)
    var scrollSpeed = 50;
}

// Scroll text per line, character
function scrollText(script, line)
{
    var char = 0;
    
    // If this line contains a question that requires user input
    if(typeof(script[line]) == 'object')
    {
        var textScroller = setInterval(
            function()
            {
                // Add the string char for char
                content.innerHTML += script[line][0][char];
                char ++;
                
                if(char >= script[line][0].length)
                {
                    clearInterval(textScroller);
                    
                    // Show options
                    options(script, line);
                }
            }, scrollSpeed);
    }
    else
    {
        var textScroller = setInterval(
            function()
            {
                content.innerHTML += script[line][char];
                char++;
        
                if(char >= script[line].length)
                {
                    clearInterval(textScroller);
                    
                    // Show next line
                    next(script, line);
                };
            }, scrollSpeed);
    }
}

function next(script, line)
{
    line = line + 1;
    
    // Last line has been shown
    if(script[line] == undefined)
    {
        //alert('End of dialog');
    }
    else
    {
        nextButton.style.visibility = 'visible';
        
        nextButton.onclick = function()
        {
            nextButton.style.visibility = 'hidden';
            content.innerHTML = '';
        
            scrollText(script, line);
        }
    }
}

function options(script, line)
{
    optionButton_1.innerHTML = script[line][1][0];
    optionButton_2.innerHTML = script[line][2][0];
    optionButton_1.style.visibility = 'visible';
    optionButton_2.style.visibility = 'visible';
    
    optionButton_1.onclick = function()
    {
        optionButton_1.style.visibility = 'hidden';
        optionButton_2.style.visibility = 'hidden';
        content.innerHTML = '';
        
        scrollText('script_intro_1', 0);
    }
    
    optionButton_2.onclick = function()
    {
        optionButton_1.style.visibility = 'hidden';
        optionButton_2.style.visibility = 'hidden';
        content.innerHTML = '';
        
        scrollText('script_intro_2', 0);
    }
}

html

<body onload="scrollText(script_intro, 0)">
    <h1>rpg</h1>
    <a id="reset" href="#">Reset</a>
    <div id="device">
        <div id="dialog">
            <strong>NPC:</strong>
            <div id="content"></div>
            <a id="nextButton" href="#">Next</a>
            <a id="optionButton_1" href="#"></a>
            <a id="optionButton_2" href="#"></a>
        </div>
    </div>
</body>

私は実際にいくつかのフィードバックを使用できます。上記の要件でそのようなスクリプトを作成する最良の方法は何ですか? ダイアログ スクリプトでは、配列よりも JSON または XML を使用する方が適切ですか? 特に、スクリプトに複数の選択肢を実装する方法についてのヒントが必要です。

ありがとうございました！

4

1 に答える 1

1

これがスクリプト化されたフローを持つスクリプトである場合は、ステート マシン パターンを使用します。

http://www.eventhelix.com/RealtimeMantra/HierarchicalStateMachine.htm

たくさんのリンクがあります。最初にグーグルで検索したものをつかみました。私がすることは、ユーザーがオプションを提示する状況ごとに状態を持つことです。各オプションは、別の状態への遷移になります。たとえば

function State(questionText){
    this.transitionsOut = [];
    this.questionText = questionText;
}
State.prototype = {
    transitionsOut:null,
    questionText:null,
}

function Transition(startState, endState, optionText){
    startState.transitionsOut[startState.transitionsOut.length] = this;
    this.start = startState;
    this.end = endState;
}

Transition.prototype = {
    start:null,
    end:null,
    optionText:null
}

次にできることは、ステートマシンを作成し、現在の状態について状態メッセージを出力し、その状態の各オプションを下にリストすることです。

var startState = new State('Where do you want to go');
var north = new State('North');
var south = new State('South');
var transition1 = new Transition(startState,north,'Lets go north');
var transition2 = new Transition(startState,south,'Lets go south');

現在の状態を表示するためのコードとオプションは簡単で、ユーザーの選択に基づいてある状態から別の状態に遷移します。

于 2009-11-22T18:43:28.903 に答える