0

我有以下数组：

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

然后我循环遍历数组：

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

这显然输出：

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

我需要帮助的是创建一个函数，它将遍历接下来的 3 行然后显示：

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

..等等。

这是我为 JavaScript/HTML5 游戏编写的聊天气泡代码，其中我的聊天对话在任何给定时间仅容纳 3 行文本。

一旦对话到达最后一句话。我希望它从头开始。

4

5 回答 5

1

我认为您需要一个通用方法，也许这个小提琴应该有所帮助。
这是JS方法。

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/>');
}
于 2012-11-04T06:40:09.117 回答
1

如果我理解正确，您可以做的是备份您的阵列，splice直到所有行都被读取。换句话说：

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

以上将每秒记录 3 行，直到读取所有行。
顺便说一句，您不需要每个字符串末尾的空格，因为您可以使用join空格。

演示：http: //jsbin.com/atenib/9/edit

于 2012-11-04T06:55:32.730 回答
0

我不太确定这是什么意思，但您可以创建一个简单的函数：

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

那么你会调用它 3 次：

display_text(0, 2)
display_text(3, 5)
display_text(6, 6)
于 2012-11-04T06:31:38.047 回答
0

如果我正确地想象你的聊天气泡，这样的事情可能对你有用：

    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);
}​
于 2012-11-04T07:04:14.350 回答
0

这不是一个干净的解决方案，但有效：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++;    
}
​
于 2012-11-04T07:13:53.647 回答