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

などなど。

これは、チャット ダイアログが常に 3 行のテキストしか表示できない JavaScript/HTML5 ゲーム用に書いているチャット バブル コード用です。

対話が最後の文に達したら。最初から続けてほしい。

4

5 に答える 5

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 に答える
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 に答える
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 に答える
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 に答える