Question

I have the following array:

var text = [
    "RISE AND SHINE, JONATHON! HMM, ", 
    "THAT'S A MOUTHFUL, HOW ABOUT ", 
    "I JUST CALL YOU JOHN? MY ", 
    "NAME IS PROFESSOR ", 
    "PHIL. I BUILT YOU FROM ", 
    "SCRATCH. I WANT TO TELL YOU ",
    "A LITTLE STORY BEFORE WE START."
];

I then loop through the array:

for (var i = 0; i < 3; i++) {
    this.font.draw(text[i]);
}

This obviously outputs:

RISE AND SHINE, JONATHON! HMM,
THAT'S A MOUTHFUL, HOW ABOUT 
I JUST CALL YOU JOHN? MY

What I need help with is creating a function that will iterate through the next 3 lines to then display:

NAME IS PROFESSOR
PHIL. I BUILT YOU FROM
SCRATCH. I WANT TO TELL YOU

..and so forth.

This is for the chat bubble code I’m writing for a JavaScript/HTML5 game where my chat dialogue only accommodates 3 lines of text at any given time.

Once the dialogue has reached the last sentence. I would like it to continue from the beginning.

Answer 1

If I understand correctly what you could do is backup your array and splice it till all lines have been read. In other words:

var textOut = text,
    len = text.length / 3,
    i = 0;
for ( ; i < len; i++ ) {
  setTimeout(function() {
    console.log( textOut.splice(0, 3).join(' ') );
  }, i*1000 );
}

The above will log 3 lines every second until all lines are read.
By the way you don’t need the spaces at the end of each string since you can use join with spaces.

Demo: http://jsbin.com/atenib/9/edit