javascript - 用JavaScript编写模式

我正在做一个“史蒂夫·赖希-拍手音乐”，用“ xoxoxoxx”作为拍手。但我希望它在继续向右移动的同时写模式。所以你会有这样的写法：

xoxoxoxxxoxoxoxxxoxoxoxxxoxoxoxx

xoxoxoxxoxoxoxoxxxoxoxxoxoxxxoxoxo

因此它会打印X或O，然后向右移一点并再次打印。我希望这很清楚，英语不是我的母语，所以如果很难理解，我感到抱歉。这是两行的完整代码，因为我不好解释：

var noise, env;
var seq = "o x o x o x o x o x o x o x x x";
var steps = seq.split(" ");
var speed = 8;
var count = 0;
var count2 = 0;
var count3=0;
var shift = 0;
var repeat = 1;
var sf, sf2, sf3;
var f;


function preload() {
  sf = loadSound("./files/clap.wav");
  sf2 = sf;
  sf3 = sf;
}

function setup() {
  createCanvas(400, 400);

  env = new p5.Env(0.01, 1, 0.2, 0.1);
  env2 = new p5.Env(0.1, 0.8, 0.01, 0.1);
  env3 = new p5.Env(0.05, 0.9, 0.1, 0.1);
}

function hitMeSteve(when, env, loc) {
  if (when == 'x' && frameCount % speed == 0) {
    env.play();
  }

}

function draw() {

  if (frameCount % speed == 0) {
    count++;

  }
  if (frameCount % (steps.length * speed * repeat) == 0) {
    shift++;
    count2=count2+2;
    count3=count3+4;
  }
  if(shift==4){
    shift=0;
    count2=0;
    count3=0;
  }
  shift = shift % steps.length;
  shift2 = shift + 2;
  var now = steps[count % steps.length];
  hitMeSteve(now, sf, 10);
  var canon = steps[(count + shift) % steps.length];
  hitMeSteve(canon, sf2, width / 2 + 10);
  var canon2 = steps[(count + shift+count2) % steps.length];
  hitMeSteve(canon2, sf3, width / 2 + 20);

 textSize(30);
  //1
  for (var i = 0; i < steps.length; i++) {
    if (i == count % steps.length) {

      fill(255, 180, 0);
    } else {

      fill(0);
    }
    text(steps[i],10+ ( + i) * 15,20);
    //text(steps[i], 110 + (shift / 2 + i) * 15, height / 2);
  }
  //2
  for (var i = 0; i < steps.length; i++) {
    if (i == (count + shift) % steps.length) {

      fill(255, 180, 0);
    } else {

      fill(0);
    }
    text(steps[i],10+( + i)*15,40);
    //text(steps[i], 110 + (-shift / 2 + i) * 15, height / 2 + 20);
  }

}

最佳答案

只是setInterval的建议，也许对您有用。

var content = "oxoxoxoxoxoxoxxx",
    target = document.getElementById('ticker'),
    i = 0,
    timer = setInterval(addChar, 800);

function addChar() {
    if (i < content.length) {
        target.innerHTML += ' ' + content[i];
        i++;
    } else {
        target.innerHTML = '';
        i=0;
    }
}

<div id="ticker"></div>

关于javascript - 用JavaScript编写模式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36131836/