迭代数组中的3个项目

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

I think you need a generic method, Probably this fiddle should help.
Here's the JS Method.

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."
];
var len=3;
for(var i=0;i<text.length;i+=len)
{
  for(var j=0;j<len && (i+j)<text.length;j++)
  {
      $('#text').html($('#text').html()+text[i+j]+'<br/>');
  }
  $('#text').html($('#text').html()+'<br/><br/>');
}

Answer 2

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

Answer 3

I'm not quite sure what the point of this is, but you could just create a simple function:

function display_text(start, end) {
    for (var i = start; i < end; i++) {
        this.font.draw(text[i]);
    }
}

then you would call it 3 times:

display_text(0, 2)
display_text(3, 5)
display_text(6, 6)

Answer 4

If I'm imagining your chat bubbles correctly something like this may work for you:

    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."
];

var max_lines = 3;

var length = text.length;

num_bubbles = length/max_lines; 
if (!(length%max_lines)){
    num_bubbles = num_bubbles + 1;
}


var print_bubble = function(i,text){
    console.log("***start of text bubble****");
    for(j=i*max_lines; j<length && j<(i+1)*max_lines; ++j){
        console.log(text[j] + '\n');//print text bubble contents
    }
}

for (var i = 0; i <num_bubbles ;++i){
    print_bubble(i, text);
}​

Answer 5

It's not a clean solution but works: JS Fiddle here

document.getElementById("output").innerHTML= "";
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."
];
var counter = 0;
var s = 0;  //start index
var e = 0;  //end index
var l = text.length;
var out = "";  //just for testing/debugging

while(counter < 15)  //to prevent the browser from freezing/infinite loop
{
  if(e+3 < l)  //take 3 items if we have more than 3 left
      e = e +3;
  else
      e = l;  //else use the remaining

  for (var i = s; i < e; i++) {
    out = (text[i])+"<br>";
      document.getElementById("output").innerHTML+=out;

  }
document.getElementById("output").innerHTML+="<HR>";  //separates after 3 items
s = e;
if(e == l) //reset: start from zero
{
    s = 0;
    e = 0;
}

  counter++;    
}
​