Question

我正在编写一个Javascript对话框脚本，可以在许多典型的角色扮演游戏中看到。alt text 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比Array更好吗？我特别需要一些关于如何在脚本中实现多个选择的提示。

谢谢！

Answer 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');

然后代码显示当前状态，并且选项很简单，根据用户选择的内容从一个状态转换到另一个状态。

需要Javascript对话框脚本反馈

1 个答案: