0

我正在编写一个在许多典型角色扮演游戏中都可以看到的 Javascript 对话脚本。替代文字 http://www.dailynintendo.com/wp-content/uploads/2008/12/luminous-arc-2-dialogue.jpg

目前我得到了一个包含文本字符串的数组，你可以跳过它。我已经到了可以做出决定的地步，并根据输入显示不同的字符串。

但是，我认为这不是正确的方法。这些是脚本的要求：

  • 支持多个对话脚本
  • 多个字符
  • 用户决策输入（“你喜欢我吗？”-yes -no）

这是我目前的代码：

// 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 回答