Jugando con colisiones elásticas

() translation by (you can also view the original English article)

En este tutorial crearemos un juego donde el objetivo es evitar que otros objetos colisionen con el cursor. No usaremos los métodos hitTestObject() integrados de Flash; en cambio, escribiremos nuestras propias rutinas de detección de colisiones.

Tutorial republicado

Cada pocas semanas, volvemos a visitar algunas de las publicaciones favoritas de nuestros lectores a lo largo de la historia del sitio. Este tutorial se publicó por primera vez en febrero de 2011.

Vista previa del resultado final

Echemos un vistazo al resultado final para el que trabajaremos:

Paso 1: Comienza

Crear un nuevo archivo Flash (ActionScript 3.0)

Establezca las dimensiones del escenario a 500x500 px y FPS a 32.

Paso 2: la clase Ball

Esta clase contendrá todos los datos relacionados con una pelota. Una pelota tiene _mass, _radius, _xSpeedy _ySpeed. Así que haremos una propiedad para cada uno. En el constructor pasamos la masa, el ángulo y la velocidad de la pelota. Debido a que la clase se vinculará a un objeto de visualización, podemos recuperar el radio de nuestra bola dividiendo el ancho del objeto de visualización por 2. La _xSpeed y _ySpeed pueden calcularse utilizando funciones simples de seno y coseno.


package
{
  import flash.display.Stage
  import flash.display.Sprite
  import flash.events.Event

  public class Ball extends Sprite
  {
    private var _radius:Number = 0
    private var _mass:Number = 0
    private var _xSpeed:Number = 0
    private var _ySpeed:Number = 0

    public function Ball(mass:Number = 10.0, angle:Number = Math.PI, speed:Number = 10.0):void
    {
      this.mass = mass
      this._radius = this.width/2
      this.xSpeed = speed*Math.sin(angle)
      this.ySpeed = speed*Math.cos(angle)
    }
  }
}

Para obtener más información sobre estas funciones trigonométricas Math.sin() y Math.cos(), consulte esta sugerencia rápida.

Paso 3: Proporcionando Getters y Setters

En nuestra clase Ball proporcionamos getters y setters para nuestras propiedades.


public function get radius():Number
{
  return this._radius
}

public function set mass(mass:Number):void
{
  this._mass = mass
}

public function get mass():Number
{
  return this._mass
}

public function set xSpeed(xSpeed:Number):void
{
  this._xSpeed = xSpeed
}

public function get xSpeed():Number
{
  return this._xSpeed
}

public function set ySpeed(ySpeed:Number):void
{
  this._ySpeed = ySpeed
}

public function get ySpeed():Number
{
  return this._ySpeed
}

Paso 4: Función de actualización

Esta función actualiza las propiedades xey de nuestra bola de acuerdo con _xSpeed y _ySpeed. Implementaremos esta función en nuestra clase Ball.


public function update():void
{
  this.x += _xSpeed
  this.y += _ySpeed
}

Paso 5: la clase completada

Terminaremos nuestra clase Ball en este paso.


package
{
  import flash.display.Stage
  import flash.display.Sprite
  import flash.events.Event

  public class Ball extends Sprite
  {
    private var _radius:Number = 0
    private var _mass:Number = 0
    private var _xSpeed:Number = 0
    private var _ySpeed:Number = 0

    public function Ball(mass:Number = 10.0, angle:Number = Math.PI, speed:Number = 10.0):void
    {
      this.mass = mass
      this._radius = this.width/2
      this.xSpeed = speed*Math.sin(angle)
      this.ySpeed = speed*Math.cos(angle)
    }

    public function get radius():Number
    {
      return this._radius
    }

    public function set mass(mass:Number):void
    {
      this._mass = mass
    }

    public function get mass():Number
    {
      return this._mass
    }

    public function set xSpeed(xSpeed:Number):void
    {
      this._xSpeed = xSpeed
    }

    public function get xSpeed():Number
    {
      return this._xSpeed
    }

    public function set ySpeed(ySpeed:Number):void
    {
      this._ySpeed = ySpeed
    }

    public function get ySpeed():Number
    {
      return this._ySpeed
    }

    public function update():void
    {
      this.x += _xSpeed
      this.y += _ySpeed
    }
  }
}

Paso 6: mostrar objetos para nuestra clase Ball

En los archivos fuente incluí un inicio FLA que contiene todos los elementos de la biblioteca que necesita. Puedes dibujarlos tú mismo si quieres, por supuesto. Asegúrese de que su FLA tenga los siguientes objetos de visualización:

(Nota del editor: es un error tipográfico: "ennemyball" debería decir "enemyball").

Paso 7: Vinculación de nuestros objetos de biblioteca

La clase Ball que acabamos de crear tiene que estar vinculada al Sprite enemyball en la biblioteca.

El Sprite playerball debe tener Ball como clase base y PlayerBall como clase.

El clip de película score debe tener una clase Score.

Paso 8: la clase de la aplicación (clase de documento)

La clase Application contendrá toda la lógica del juego. Importamos todas las clases que necesitamos. Como puede ver, usaremos TweenMax.

A continuación definimos nuestras variables de campo. La primera variable de campo es ballPlayer.

Debido a que la clase base de nuestro Playerball Sprite es Ball, podemos almacenar esta Clase en la variable ballPlayer. Esto hace que sea más fácil verificar las colisiones entre el ballPlayer y las pelotas enemigas.

La segunda variable de campo es una matriz que contendrá todas nuestras bolas enemigas. La tercera variable es el temporizador que se usará para realizar el ciclo principal del juego. El cuarto y último campo es una instancia de nuestro objeto de la biblioteca Score que se usará para mostrar el tiempo transcurrido del juego. En el constructor llamamos a la función init() que explicaré en el siguiente paso.


package
{
  import flash.display.Sprite
  import flash.display.Graphics
  import flash.events.Event
  import flash.events.TimerEvent
  import flash.events.MouseEvent
  import flash.geom.Matrix
  import flash.utils.Timer
  import flash.ui.Mouse
  import com.greensock.TweenMax
  import com.greensock.easing.*

  public class Application extends Sprite
  {

    private var ballPlayer:Ball
    private var eballs:Array
    private var tmr:Timer
    private var score:Score

    public function Application():void
    {
      init()
    }
  }
}

¡No olvides vincular la clase document!.

Paso 9: La función init()

Eche un vistazo a este código:


private function init():void
{
  ballPlayer = new PlayerBall()
  eballs = new Array()
  tmr = new Timer(10)
  score = new Score()

  stage.align = "TL"
  stage.scaleMode = "noScale"
  Mouse.hide()

  setBackground()

  score.x = stage.stageWidth/2
  score.y = stage.stageHeight/2
  stage.addChild(score)

  stage.addEventListener(MouseEvent.MOUSE_MOVE, updatePlayerBall)
  stage.addChild(ballPlayer)

        tmr.addEventListener(TimerEvent.TIMER, updateTime)

  stage.addEventListener(MouseEvent.CLICK, startGame)
}

En las primeras cuatro líneas, inicializamos nuestras variables de campo.

A continuación, nos aseguramos de que nuestra etapa esté alineada con la esquina superior izquierda y no se escale.

Ocultamos el cursor del mouse Nuestro cursor será reemplazado por el Sprite playerball . Luego llamamos a la función setBackground (explicada en el siguiente paso).

Centramos nuestro score en la pantalla y lo agregamos a la lista de visualización. Para actualizar la posición de ballPlayer, adjuntamos un evento MouseEvent.MOUSE_MOVE al escenario.

La función updatePlayerBall (explicada en el paso 11) manejará este evento MouseEvent. A continuación, agregamos ballPlayer a la lista de visualización.

El temporizador se usará para mostrar el tiempo del juego. Adjuntamos un oyente TimerEvent.TIMER a nuestro temporizador, que activará la función updateTime() (explicada en el Paso 12) cada 10 milisegundos.

Finalmente, agregamos un MouseEvent.CLICK a nuestro escenario. La función startGame (explicada en el paso 13) comenzará nuestro juego.

Paso 10: función setBackground()

Esta función agrega un fondo degradado radial a la lista de visualización. Para dibujar un degradado en un Sprite debe definir el tipo de degradado, los colores que desea usar, los valores alfa de los colores, las relaciones (esto define la distribución de los colores) y el método de dispersión.

Para obtener más información, consulte esta sugerencia rápida sobre degradados.


private function setBackground():void
{
  var type:String = "radial"
  var colors:Array = [0xffffff,0xcccccc]
  var alphas:Array = [ 1, 1 ]
  var ratios:Array = [ 0, 255 ]
  var matr:Matrix = new Matrix()
  matr.createGradientBox(stage.stageWidth, stage.stageHeight, Math.PI / 2, 0, 0 )
  //SpreadMethod will define how the gradient is spread. Note!!! Flash uses CONSTANTS to represent String literals
  var sprMethod:String = "pad"
  //Start the Gradietn and pass our variables to it
  var sprite:Sprite = new Sprite()
  //Save typing + increase performance through local reference to a Graphics object
  var g:Graphics = sprite.graphics
  g.beginGradientFill( type, colors, alphas, ratios, matr, sprMethod )
  g.drawRect(0,0,stage.stageWidth,stage.stageHeight)

  stage.addChild(sprite)
}

Paso 11: Función updatePlayerBall()

Esta función actualiza la posición de ballPlayer según la posición del mouse.


private function updatePlayerBall(e:MouseEvent):void
{
  ballPlayer.x = mouseX
  ballPlayer.y = mouseY
}

Paso 12: función updateTime()

Calculamos el tiempo en segundos y lo colocamos dentro del cuadro de texto de nuestro Sprite score. Cada 5000 ms (cinco segundos) agregamos una nueva pelota al juego.


private function updateTime(e:TimerEvent):void
{
  score.txtScore.text = String(((tmr.currentCount*tmr.delay)/1000).toFixed(2));
  if((tmr.currentCount*tmr.delay) % 5000 == 0)
  {
    addBall();
  }
}

Paso 13: función startGame()

El juego se inicia haciendo clic en el escenario. Primero eliminamos el oyente para el clic de escenario, de modo que no podemos comenzar el juego varias veces. Agregamos tres bolas al juego llamando a la función addBall() (explicada en el siguiente paso) tres veces. Comenzamos nuestro temporizador que actualizará nuestro tiempo de juego.

Finalmente, agregamos un evento ENTER_FRAME a nuestra etapa. La función gameLoop() (explicada en el Paso 15) actualizará la posición de nuestras bolas enemigas.


private function startGame(e:MouseEvent):void
{
  stage.removeEventListener(MouseEvent.CLICK, startGame)
  addBall()
  addBall()
  addBall()
  tmr.start()
  stage.addEventListener(Event.ENTER_FRAME, gameLoop)
}

Paso 14: Función addBall()

Primero hacemos una nueva instancia de nuestra clase Ball. Posicionamos la ball aleatoriamente en el escenario con un alfa de 0 y lo agregamos a la lista de visualización.

A continuación, volvemos a conectar el alfa a 1. (Utilizo TweenMax, está incluido en los archivos de origen. También puede usar el motor de interpolación Flash incorporado). La segunda interpolación no es realmente una interpolación. Simplemente espera un segundo y la función onComplete empuja la ball hacia nuestra matriz de eballs. De esta forma, la función gameLoop() (explicada en el siguiente paso) puede manejar el resto.


private function addBall():void
{
  var ball:Ball = new Ball(10, Math.random()*Math.PI*2, 5)
  ball.x = Math.random()*stage.stageWidth
  ball.y = Math.random()*stage.stageHeight
  ball.alpha = 0
  stage.addChild(ball)
  TweenMax.to(ball, 0.5, {alpha:1})
  TweenMax.to(ball, 0, {delay: 1, onComplete:function():void{eballs.push(ball)}})
}

Paso 15: Función gameLoop()

Cada cuadro pasará por esta función.


private function gameLoop(e:Event):void
{
  for (var i:uint = 0; i < eballs.length; i++)
  {
    for (var j:uint = i + 1; j < eballs.length; j++)
    {
      if (collision(eballs[i], eballs[j]))
      {
        doCollision(eballs[i], eballs[j])
      }
    }

    if(collision(eballs[i], ballPlayer))
    {
      endOfGame()
      break
    }

    eballs[i].update()
    checkBounds(eballs[i])
  }
}

Comenzamos iterando a través de todas nuestras bolas enemigas.

El segundo for-loop comprueba las colisiones entre las bolas enemigas. El ciclo comienza en 'i + 1'. De esta forma no verificamos las colisiones.

A continuación, verificamos si ballPlayer golpea la bola enemiga. Si es así, el juego está terminado. Luego actualizamos la posición de nuestra bola enemiga.

Nos aseguramos de que las bolas permanezcan en la pantalla del juego llamando a la función checkBounds() (explicada más adelante).

Paso 16: función collision()

Esta función verifica si un par determinado de bolas está colisionando.

Primero calculamos la distancia xy la distancia y entre las dos bolas. Usando el Teorema de Pitágoras (ver el siguiente diagrama) calculamos la distancia absoluta entre ellos. Si la distancia es menor o igual a la suma de los radios de las bolas, tenemos una colisión.


private function collision(ball1:Ball, ball2:Ball):Boolean
{
  var xDist:Number = ball1.x - ball2.x
  var yDist:Number = ball1.y - ball2.y
  var Dist:Number = Math.sqrt(xDist * xDist + yDist * yDist)

  return Dist <= ball1.radius + ball2.radius
}

Paso 17: Función doCollision()

Esta función calculará las nuevas velocidades x e y de las bolas según la velocidad y el ángulo de la colisión. Advertencia: matemática;)

Primero calculamos la distancia horizontal entre las dos bolas y luego la distancia vertical entre las bolas. Con estas distancias (y un poco más de trigonometría) podemos calcular el ángulo entre las bolas (ver diagrama).

Luego calculamos lo que llamo la magnitud de cada bola. (Tenemos un vector xspeed y un vector yspeed, la magnitud es la suma de esos). Luego calculamos el ángulo de cada bola (similar al cálculo del ángulo anterior).

Luego rotamos las nuevas velocidades x e y de cada bola. Lo que realmente estamos haciendo es rotar el sistema de coordenadas. Al rotar nuestros ejes tenemos una colisión 1D. (Ver el siguiente diagrama).

Newton dice que la cantidad total de energía cinética en un sistema cerrado es constante. Ahora usamos estas fórmulas:

v1 = (u1*(m1-m2) + 2*m2*u2)/(m1+m2)
v2 = (u2*(m2-m1) + 2*m1*u1)/(m1+m2)

dónde:

v1 = final xSpeedBall 1

v2 = final xSpeedBall 2

m1 = masa de bola 1

m2 = masa de bola 2

u1 = velocidad inicial de bola 1

u2 = velocidad inicial de bola 2

Las velocidades y no cambian ya que es una colisión 1D.

Con estas fórmulas podemos calcular el xSpeed y el ySpeed de cada bola.

Ahora tenemos las nuevas velocidades x e y en nuestro sistema de coordenadas giradas. El último paso es convertir todo a un sistema de coordenadas normal. Usamos Math.PI/2 porque el ángulo entre xSpeed y ySpeed debe ser siempre de 90 grados (pi/2 radianes).


private function doCollision(ball1:Ball, ball2:Ball):void
{
  var xDist:Number = ball1.x - ball2.x
  var yDist:Number = ball1.y - ball2.y
  var collisionAngle:Number = Math.atan2(yDist, xDist)

  var magBall1:Number = Math.sqrt(ball1.xSpeed*ball1.xSpeed+ball1.ySpeed*ball1.ySpeed)
  var magBall2:Number = Math.sqrt(ball2.xSpeed*ball2.xSpeed+ball2.ySpeed*ball2.ySpeed)

  var angleBall1:Number = Math.atan2(ball1.ySpeed, ball1.xSpeed)
  var angleBall2:Number = Math.atan2(ball2.ySpeed, ball2.xSpeed)

  var xSpeedBall1:Number = magBall1 * Math.cos(angleBall1-collisionAngle)
  var ySpeedBall1:Number = magBall1 * Math.sin(angleBall1-collisionAngle)
  var xSpeedBall2:Number = magBall2 * Math.cos(angleBall2-collisionAngle)
  var ySpeedBall2:Number = magBall2 * Math.sin(angleBall2-collisionAngle)

  var finalxSpeedBall1:Number = ((ball1.mass-ball2.mass)*xSpeedBall1+(ball2.mass+ball2.mass)*xSpeedBall2)/(ball1.mass+ball2.mass)
  var finalxSpeedBall2:Number = ((ball1.mass+ball1.mass)*xSpeedBall1+(ball2.mass-ball1.mass)*xSpeedBall2)/(ball1.mass+ball2.mass)
  var finalySpeedBall1:Number = ySpeedBall1
  var finalySpeedBall2:Number = ySpeedBall2

  ball1.xSpeed = Math.cos(collisionAngle)*finalxSpeedBall1+Math.cos(collisionAngle+Math.PI/2)*finalySpeedBall1
  ball1.ySpeed = Math.sin(collisionAngle)*finalxSpeedBall1+Math.sin(collisionAngle+Math.PI/2)*finalySpeedBall1
  ball2.xSpeed = Math.cos(collisionAngle)*finalxSpeedBall2+Math.cos(collisionAngle+Math.PI/2)*finalySpeedBall2
  ball2.ySpeed = Math.sin(collisionAngle)*finalxSpeedBall2+Math.sin(collisionAngle+Math.PI/2)*finalySpeedBall2
}

Para encontrar más información sobre colisiones elásticas, visite hoomanr.com.

Paso 18: Función endOfGame()

Esto se ejecuta cuando el juego termina.


private function endOfGame():void
{
  tmr.stop()
  Mouse.show()
  stage.removeEventListener(MouseEvent.MOUSE_MOVE, updatePlayerBall)
  stage.removeEventListener(Event.ENTER_FRAME, gameLoop)

  while(eballs.length > 0)
  {
    TweenMax.to(eballs[0], 0.5, {scaleX:0, scaleY:0, ease:Bounce.easeOut})
    eballs.splice(0,1)
  }

  TweenMax.to(ballPlayer, 0.5, {scaleX:0, scaleY:0, ease:Bounce.easeOut})
}

Primero, detengamos el temporizador. Mostramos el mouse nuevamente A continuación, eliminamos los detectores de eventos MOUSE_MOVE y ENTER_FRAME. Finalmente hacemos que todas las bolas en el escenario sean invisibles.

Paso 19: función checkBounds()

Esta función asegura que las bolas permanezcan dentro de la pantalla del juego. Entonces, si la pelota golpea el lado superior o inferior, invertimos la velocidad y ySpeed. si la pelota golpea el lado izquierdo o el derecho de la pantalla invertimos la xSpeed. Utiliza una lógica similar a la función de detección de colisión de bolas para comprobar si los bordes de la pelota golpean un borde de la pantalla.


private function checkBounds(ball:Ball):void
{
  if((ball.x + ball.radius) > stage.stageWidth)
  {
    ball.x = stage.stageWidth - ball.radius
    ball.xSpeed *= -1
  }
  if((ball.x - ball.radius) < 0)
  {
    ball.x = 0 + ball.radius
    ball.xSpeed *= -1
  }
  if((ball.y + ball.radius) > stage.stageHeight)
  {
    ball.y = stage.stageHeight - ball.radius
    ball.ySpeed *= - 1
  }
  if((ball.y - ball.radius) < 0)
  {
    ball.y = 0 + ball.radius
    ball.ySpeed *= - 1
  }
}

Paso 20: la completa clase de la aplicación

Hemos completado nuestra clase de Aplicación. ¡Ahora tenemos un juego funcionando!


package
{
  import flash.display.Sprite;
  import flash.display.Graphics;
  import flash.events.Event;
  import flash.events.TimerEvent;
  import flash.events.MouseEvent;
  import flash.geom.Matrix;
  import flash.utils.Timer;
  import flash.ui.Mouse;
  import com.greensock.TweenMax;
  import com.greensock.easing.*;
  public class Application extends Sprite
  {

    private var ballPlayer:Ball;
    private var eballs:Array;
    private var tmr:Timer;
    private var score:Score;
    public function Application():void
    {
      init();
    }

    private function init():void
    {
      ballPlayer = new PlayerBall();
      eballs = new Array();
      tmr = new Timer(10);
      score = new Score();

      stage.align = "TL";
      stage.scaleMode = "noScale";
      Mouse.hide();

      setBackground();

      score.x = stage.stageWidth / 2;
      score.y = stage.stageHeight / 2;
      stage.addChild(score);

      stage.addEventListener(MouseEvent.MOUSE_MOVE, updatePlayerBall);
      stage.addChild(ballPlayer);

      tmr.addEventListener(TimerEvent.TIMER, updateTime);

      stage.addEventListener(MouseEvent.CLICK, startGame);
    }

    private function setBackground():void
    {
      var type:String = "radial";
      var colors:Array = [0xffffff,0xcccccc];
      var alphas:Array = [1,1];
      var ratios:Array = [0,255];
      var matr:Matrix = new Matrix();
      matr.createGradientBox(stage.stageWidth, stage.stageHeight, Math.PI / 2, 0, 0 );
      //SpreadMethod will define how the gradient is spread. Note!!! Flash uses CONSTANTS to represent String literals
      var sprMethod:String = "pad";
      //Start the Gradietn and pass our variables to it
      var sprite:Sprite = new Sprite();
      //Save typing + increase performance through local reference to a Graphics object
      var g:Graphics = sprite.graphics;
      g.beginGradientFill( type, colors, alphas, ratios, matr, sprMethod );
      g.drawRect(0,0,stage.stageWidth,stage.stageHeight);
      stage.addChild(sprite);
    }

    private function updatePlayerBall(e:MouseEvent):void
    {
      ballPlayer.x = mouseX;
      ballPlayer.y = mouseY;
    }

    private function updateTime(e:TimerEvent):void
    {
      score.txtScore.text = String(((tmr.currentCount*tmr.delay)/1000).toFixed(2));
      if ((tmr.currentCount*tmr.delay) % 5000 == 0)
      {
        addBall();
      }
    }

    private function startGame(e:MouseEvent):void
    {
      stage.removeEventListener(MouseEvent.CLICK, startGame);
      addBall();
      addBall();
      addBall();
      tmr.start();
      stage.addEventListener(Event.ENTER_FRAME, gameLoop);
    }

    private function addBall():void
    {
      var ball:Ball = new Ball(10,Math.random() * Math.PI * 2,5);
      ball.x = Math.random() * stage.stageWidth;
      ball.y = Math.random() * stage.stageHeight;
      ball.alpha = 0;
      stage.addChild(ball);
      TweenMax.to(ball, 0.5, {alpha:1});
      TweenMax.to(ball, 0, {delay: 1, onComplete:function():void{eballs.push(ball)}});
    }

    private function gameLoop(e:Event):void
    {
      for (var i:uint = 0; i < eballs.length; i++)
      {
        for (var j:uint = i + 1; j < eballs.length; j++)
        {
          if (collision(eballs[i],eballs[j]))
          {
            doCollision(eballs[i], eballs[j]);
          }
        }

        if (collision(eballs[i],ballPlayer))
        {
          endOfGame();
          break;
        }

        eballs[i].update();
        checkBounds(eballs[i]);
      }
    }

    private function collision(ball1:Ball, ball2:Ball):Boolean
    {
      var xDist:Number = ball1.x - ball2.x;
      var yDist:Number = ball1.y - ball2.y;
      var Dist:Number = Math.sqrt(xDist * xDist + yDist * yDist);

      if (Dist <= ball1.radius + ball2.radius)
      {
        if (ball1.x < ball2.x)
        {
          ball1.x -=  2;
          ball2.x +=  2;
        }
        else
        {
          ball1.x +=  2;
          ball2.x -=  2;
        }

        if (ball1.y < ball2.y)
        {
          ball1.y -=  2;
          ball2.y +=  2;
        }
        else
        {
          ball1.y +=  2;
          ball2.y -=  2;
        }
      }


      return Dist <= ball1.radius + ball2.radius;
    }

    private function doCollision(ball1:Ball, ball2:Ball):void
    {
      var xDist:Number = ball1.x - ball2.x;
      var yDist:Number = ball1.y - ball2.y;
      var collisionAngle:Number = Math.atan2(yDist,xDist);
      var magBall1:Number = Math.sqrt(ball1.xSpeed * ball1.xSpeed + ball1.ySpeed * ball1.ySpeed);
      var magBall2:Number = Math.sqrt(ball2.xSpeed * ball2.xSpeed + ball2.ySpeed * ball2.ySpeed);
      var angleBall1:Number = Math.atan2(ball1.ySpeed,ball1.xSpeed);
      var angleBall2:Number = Math.atan2(ball2.ySpeed,ball2.xSpeed);
      var xSpeedBall1:Number = magBall1 * Math.cos(angleBall1 - collisionAngle);
      var ySpeedBall1:Number = magBall1 * Math.sin(angleBall1 - collisionAngle);
      var xSpeedBall2:Number = magBall2 * Math.cos(angleBall2 - collisionAngle);
      var ySpeedBall2:Number = magBall2 * Math.sin(angleBall2 - collisionAngle);
      var finalxSpeedBall1:Number = ((ball1.mass-ball2.mass)*xSpeedBall1+(ball2.mass+ball2.mass)*xSpeedBall2)/(ball1.mass+ball2.mass);
      var finalxSpeedBall2:Number = ((ball1.mass+ball1.mass)*xSpeedBall1+(ball2.mass-ball1.mass)*xSpeedBall2)/(ball1.mass+ball2.mass);
      var finalySpeedBall1:Number = ySpeedBall1;
      var finalySpeedBall2:Number = ySpeedBall2;
      ball1.xSpeed = Math.cos(collisionAngle) * finalxSpeedBall1 + Math.cos(collisionAngle + Math.PI / 2) * finalySpeedBall1;
      ball1.ySpeed = Math.sin(collisionAngle) * finalxSpeedBall1 + Math.sin(collisionAngle + Math.PI / 2) * finalySpeedBall1;
      ball2.xSpeed = Math.cos(collisionAngle) * finalxSpeedBall2 + Math.cos(collisionAngle + Math.PI / 2) * finalySpeedBall2;
      ball2.ySpeed = Math.sin(collisionAngle) * finalxSpeedBall2 + Math.sin(collisionAngle + Math.PI / 2) * finalySpeedBall2;
    }

    private function endOfGame():void
    {
      tmr.stop();
      Mouse.show();
      stage.removeEventListener(MouseEvent.MOUSE_MOVE, updatePlayerBall);
      stage.removeEventListener(Event.ENTER_FRAME, gameLoop);

      while (eballs.length > 0)
      {
        TweenMax.to(eballs[0], 0.5, {scaleX:0, scaleY:0, ease:Bounce.easeOut});
        eballs.splice(0,1);
      }

      TweenMax.to(ballPlayer, 0.5, {scaleX:0, scaleY:0, ease:Bounce.easeOut});
    }

    private function checkBounds(ball:Ball):void
    {
      if ((ball.x + ball.radius) > stage.stageWidth)
      {
        ball.x = stage.stageWidth - ball.radius;
        ball.xSpeed *=  -1;
      }
      if ((ball.x - ball.radius) < 0)
      {
        ball.x = 0 + ball.radius;
        ball.xSpeed *=  -1;
      }
      if ((ball.y + ball.radius) > stage.stageHeight)
      {
        ball.y = stage.stageHeight - ball.radius;
        ball.ySpeed *=  -1;
      }
      if ((ball.y - ball.radius) < 0)
      {
        ball.y = 0 + ball.radius;
        ball.ySpeed *=  -1;
      }
    }
  }
}

Conclusión

Eso es todo por este tutorial. Por supuesto, podrías agregar la posibilidad de reiniciar el juego, pero eso no debería ser demasiado difícil. Este ejemplo básico de colisiones elásticas se puede utilizar para juegos más grandes como un juego de billar o similar.

Espero que les haya gustado este tutorial, ¡gracias por leer!