Script de dialogue JavaScript requis

J'écris un script de dialogue Javascript qui est vu dans beaucoup de jeux de rôles typiques. À l'heure actuelle, j'ai obtenu un tableau avec des chaînes de texte que vous pouvez ignorer. J'ai obtenu au point où vous pouvez prendre une décision et basé sur l'entrée une chaîne différente montrera.Script de dialogue JavaScript requis

Cependant, je ne pense pas que ce soit la bonne façon de le faire. Ce sont les conditions requises pour le script:

Prise en charge de plusieurs scripts de dialogue
caractères multiples
entrée de la décision de l'utilisateur ("Avez-vous comme moi?" -oui -NO)

Cette est mon code au moment:

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

Je pourrais vraiment utiliser quelques commentaires. Quelle est la meilleure façon d'écrire un tel script avec les exigences ci-dessus? L'utilisation de JSON ou XML est-elle une meilleure option qu'un tableau pour les scripts de dialogue? J'ai particulièrement besoin de quelques conseils sur la façon d'implémenter plusieurs choix dans le script.

Merci!

Source

2009-11-22 richard

S'il s'agit d'un script dont le flux est scripté, j'utiliserais le modèle de machine d'état.

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

Il y a des tonnes de liens, je viens attrapé le premier que je recherché de Google. Ce que je ferais est d'avoir un état pour chaque situation que l'utilisateur présentera avec des options. Chaque option serait une transition vers un autre état. Ainsi, par exemple

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 
}

Alors ce que vous pouvez faire, est de rendre votre machine d'état, puis de l'état actuel, imprimez votre état message, puis sous chaque option liste pour cet état.

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

Le code pour afficher alors ce qui est dans l'état actuel et les options est trivial, comme le passage d'un état à un autre en fonction de ce que les choix de l'utilisateur.

Source

2009-11-22 18:43:28 Zoidberg

Bon choix. Cependant, vous avez une erreur: 'start' est indéfini. Je crois que vous vouliez dire 'startState.transitionsOut.push (this);' –

Oui, lemme corrige, merci. – Zoidberg

Merci pour le conseil. J'ai trouvé un bel article sur IBM: ibm.com/developerworks/web/.... Regarde tout nouveau et compliqué mais je vais étudier :) Merci pour l'exemple, aussi. Plus de conseils sont les bienvenus. – richard

Répondre

Questions connexes