需要Javascript對話框腳本反饋

我在寫很多典型的角色扮演遊戲中看到的Javascript對話框腳本。 alt text http://www.dailynintendo.com/wp-content/uploads/2008/12/luminous-arc-2-dialogue.jpg 需要Javascript對話框腳本反饋

目前我得到一個文本字符串數組，你可以跳過槽。我得到了可以做出決定的點，並根據輸入顯示了不同的字符串。

但是我不認爲這是正確的做法。這些都爲腳本的要求：

支持多種腳本對話框
多個字符
用戶輸入的決定（「你喜歡我嗎？」是的否）

這是我的代碼的時刻：

// 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更好？我特別需要關於如何在腳本中實現多項選擇的一些提示。

謝謝！

來源

2009-11-22 richard

如果這是一個有腳本流的腳本，我會使用狀態機模式。

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-22 18:43:28 Zoidberg

不錯的選擇。但是，您有一個錯誤：'start'未定義。我相信你的意思是'startState.transitionsOut.push（this）;' –

是的，讓我解決它，謝謝。 – Zoidberg

感謝您的提示。我在IBM上找到了一篇不錯的文章：ibm.com/developerworks/web/...。看起來所有新的和複雜的，但我會研究:)謝謝你的例子，也。歡迎提供更多提示。 – richard

需要Javascript對話框腳本反饋

回答

相關問題