Tengo un programa que se supone que es una carrera entre cuatro "animales", que en este caso están representados por divisiones cuadradas. Sin embargo, cuando agrego un animal, se coloca aleatoriamente debido a esta función:

 var animal = new animalMakerFunction( $("body").height() * Math.random(), $("body").width() * Math.random(), Math.random() * 1000 );

Esta es la clase padre, la clase Animal.

 var Animal = function(top, left, timeBetweenSteps) { this.$node = $('<span class="animal"></span>'); this.top = top; this.left = left; this.timeBetweenSteps = timeBetweenSteps; this.step(); this.setPosition(this.top, this.left); }; Animal.prototype.step = function() { setTimeout(this.step.bind(this), this.timeBetweenSteps); }; Animal.prototype.setPosition = function(top, left) { this.position = { top: top, left: left }; this.$node.css(this.position); };

Esta es una clase que hereda de la clase animal.

 var Caracal = function(top, left, timeBetweenSteps) { Animal.call(this, top, left, timeBetweenSteps); }; Caracal.prototype = Object.create(Animal.prototype); Caracal.prototype.constructor = Caracal; Caracal.prototype.step = function() { Animal.prototype.step.call(this); this.$node.css("background-color", "purple") };

Entonces, ¿cómo alinearía los animales (divs) verticalmente (en diferentes filas) con el clic de un botón?