Javascript中的基本LED追逐器动画循环

Question

>我正在尝试用Javascript在LED灯条上模拟一个无限循环的追逐者。

我要完成的：

• 仅使用循环或递归函数。没有花哨的JS。
• 支持任意长度的LED灯条(var ledLength(
• 支持多个追逐者
• 支持任意数量的 LED(var ledDepth 个(分隔追逐者的空间 ( var blankDepth (
• 无限循环
• 没有幻数

我为 1 个追逐者工作：

$(function(){
  var ledLength = 20;
  for(var i = 0; i < ledLength; i++) {
    $('#led').append($('<div>').addClass('node'));
  }
  $('#led').css('width', ($('.node').length + 1) * $('.node').last().outerWidth(true));
  var colors = ['green', 'red', 'blue'];
  // add a "clearing" color
  colors.push('black');
  var ledDepth = 3;
  var blankDepth = 2;
  var chaserSize = ledDepth + blankDepth;
  var iteration = 0;
  var loop = setInterval(animate, 250);
  function animate() {
    if(iteration == ledLength + ledDepth) iteration = 0;
    var offset = iteration < chaserSize ? iteration : chaserSize;
    for(var i = 0; i <= offset; i ++) {
      var colorOffset = i < ledDepth ? i : ledDepth;
      $('.node').eq(iteration-i).css('background', colors[colorOffset]);
    }
    iteration++;
  }
});

或者你可以在JSBin上查看它。

我将如何跟踪一条带上的多个追逐者？这意味着在创建初始chaserSize并向右移动后，将创建另一个并随之长距离移动并无限循环。

任何对正确方向的帮助将不胜感激。

Answer 1

我决定使用array.push方法采取不同的方法。

基本上，我继续添加点，遍历它们以增加它们的位置，如果它们的位置大于条带的长度，则删除它们。

这适用于所有 LED 长度、追逐器尺寸(每个追逐器之间的颜色 + 空白(。

法典：

$(function(){

  // create the strip
  var ledLength = 30;
  for(var i = 0; i < ledLength; i++) {
    $('#led').append($('<div>').addClass('node'));
  }
  $('#led').css('width', ($('.node').length + 1) * $('.node').last().outerWidth(true));
  var points = [];
  var colors = ['green', 'red', 'blue', 'pink', 'orange', 'purple'];
  var ledDepth = colors.length || 6;
  var blankDepth = 2;
  var chaserSize = ledDepth + blankDepth;
  // push blank nodes on the back of colors array
  for(var i = 0; i < blankDepth; i++) {
    colors.push('blank');
  }
  var iteration = 0;
  // loop!
  var loop = setInterval(animate, 100);
  function animate() {
    if(points.length) {
      for(var i = 0; i < points.length; i++) {
        // increase each pin by 1
        points[i].pin++;
        // remove point if pin is greater than led length
        if(points[i].pin > ledLength) {
          points.splice(i, 1);
        }
      }
    }
    if(iteration < chaserSize) {
      points.push({pin: 0, color: colors[iteration]});
    }
    // draw points
    for(var i = 0; i < points.length; i++) {
      if(points[i].color == 'blank') { // this if for 'resetting'
        $('.node').eq(points[i].pin).css('background', 'black');
      } else { // this is for changing color
        $('.node').eq(points[i].pin).css('background', points[i].color);
      }
    }
    // iterate before reset
    iteration++;
    // reset sub-iterator (creator)
    if(iteration >= chaserSize) {
      iteration = 0;
    }
  }
});

或JSBin