JavaScript中带有动画的动画

Question

是否可以将来自此循环的已记录数字存储在数组中？我必须解决以下问题：有些人排成两排。当他们排好队时，一个人就剩下了。与三人，四人，五人和六人的行显示相同。但是，随着人们排成七列，结果没人留下（结果是301）。我必须为该“人物”设置动画，直到每一行分别出现，直到301。这应该是一个带有用户输入（或只是按钮）的小游戏。我尝试了以下类似的方法，但是我完全不对，甚至都不知道。我认为，如果我尝试将输出存储在数组中并进行for ... in循环，以显示数组中每个数字的“人物动画”，那将是可行的。我会很高兴，如果能得到帮助或只是一点提示，非常感谢！我是新手，我很拼命。我已经有一个有效的动画脚本（用于一个“人”）。

var seven = 7;
var six;
var five;
var four;
var three;
var two;

while (six != 1 || five != 1|| four != 1|| three != 1|| two != 1)
{six = seven % 6;
five = seven % 5;
four = seven % 4;
three = seven % 3;
two = seven % 2;
console.log(seven);
seven += 7;}

Answer 1

这是将数字序列分成几行的简单方法。

var seven = [[]];
var six = [[]];
var five = [[]];
var four = [[]];
var three = [[]];
var two = [[]];

cnt = 1;

while (cnt <= 301) {
  seven[seven.length - 1].push(cnt);
  six[six.length - 1].push(cnt);
  five[five.length - 1].push(cnt);
  four[four.length - 1].push(cnt);
  three[three.length - 1].push(cnt);
  two[two.length - 1].push(cnt);
  if (!(cnt % 7) && (cnt < 301)) seven.push([]);
  if (!(cnt % 6) && (cnt < 301)) six.push([]);
  if (!(cnt % 5) && (cnt < 301)) five.push([]);
  if (!(cnt % 4) && (cnt < 301)) four.push([]);
  if (!(cnt % 3) && (cnt < 301)) three.push([]);
  if (!(cnt % 2) && (cnt < 301)) two.push([]);
  
  cnt++;
} 

console.log(seven);
console.log(six);
console.log(five);
console.log(four);
console.log(three);
console.log(two);

这里是改进版本：

var rows = {}; // object to keep the rows
var list = [...Array(8).keys()].slice(2); //creates a 2 to 7 range in an array
list.map(e=>rows[e] = [[]]); // initializes the rows object with empty array to store sequences

cnt = 1; //counter
while (cnt <= 301) { 
  //for each row type (2 to 7)
  list.forEach(row=> { 
        // get last row list and put current number
        rows[row][rows[row].length -1].push(cnt);
        // if there are already enough elements in that row type 
        // add another row in this row type
        if (!(cnt % row) && (cnt < 301)) rows[row].push([]);
  });  
  cnt++;
} 

console.log(rows);

希望它对您有帮助。

Answer 2

我希望我能正确理解您的问题，并且我的努力对您有用。如果我想我知道您的意思是想添加分为几行的行。例如7 people divided over 3 columns等于：

...
...
.

或带有数字的数组：

[
  3,
  3,
  1
]

并且您或用户可以动态设置每列的长度，但是每组行增加7个人（在您的情况下）。

我已经建立了一个类，可以使用该类创建一个对象，该对象存储所有值，并可以执行添加行时所需的计算。您将可以在游戏中使用它，让您由用户决定应添加多少列的人。

尝试一下，让我知道我的理解是否正确，因为我的问题和@NelsonTeixeira的答案相差很大。

class Crowd {

  /**
   * Store maxColumnLength and setup the default peopleLimit.
   */
  constructor(maxColumnLength, peopleLimit = 301) {
    this.maxColumnLength = maxColumnLength;
    this.peopleLimit = peopleLimit;
    this.totalPeople = 0;
    this.rows = [];
  }
  
  /**
   * Adds a new set of rows to the main rows collection
   *
   * @param {number} columnLength
   * @return {this}
   */
  addPeopleInColumnsOf(columnLength) {
    if (columnLength <= this.maxColumnLength && this.totalPeople + this.maxColumnLength <= this.peopleLimit) {
    
      // Create rows and calculate columns.
      let row = [];
      const amountOfFullRows = Math.floor(this.maxColumnLength / columnLength);
      const peopleInLastRow = this.maxColumnLength % columnLength;
      
      // Add all the full rows to the array.
      for (let i = 0; i < amountOfFullRows; i++) {
        row.push(columnLength);
      }
      
      // Add the last row to the array.
      if (peopleInLastRow !== 0) {
        row.push(peopleInLastRow);
      }
      
      // Push new rows to main row collection.
      // And add the total.
      this.rows.push(row);
      this.totalPeople += this.maxColumnLength;
    }
    
    return this;
  }
  
  /**
   * Outputs each row in the console.
   */
  showRows() {
    this.rows.forEach(row => {
      console.log(row);
    });
  }

}

/** 
 * Create an instance with a maximum column 
 * length of 7 and start adding people in columns of...
 */
const crowd = new Crowd(7)
  .addPeopleInColumnsOf(4)
  .addPeopleInColumnsOf(5)
  .addPeopleInColumnsOf(6)
  .addPeopleInColumnsOf(2)
  .addPeopleInColumnsOf(3)
  .addPeopleInColumnsOf(4)
  .addPeopleInColumnsOf(8) // This one will silently fail.
  .addPeopleInColumnsOf(1)
  .addPeopleInColumnsOf(6);

// Show the results
crowd.showRows();
console.log(crowd.totalPeople);