*{
  margin: 0;
  padding: 0;
}
function init() {
  //Create application
  var app = new PIXI.Application({
    width: window.innerWidth, 
    height: window.innerHeight, 
    antialias: true,
    transparent: false,
    resolution: 1
  });
  document.body.appendChild(app.view);
  
  // Draw a square so I can listen to events
  var backgroundSquare = new PIXI.Graphics();
  backgroundSquare.beginFill(0xEFEFEF, 1);
  backgroundSquare.drawRect(0, 0, app.screen.width, app.screen.height);
  
  // Add square to stage
  app.stage.addChild(backgroundSquare);

  //make square interactive
  backgroundSquare.interactive = true;
  
  //create the enemies 
  //Number of enemies and size
  let numberOfEnemies = 100,
      enemySize = 5;
  var colorArray = [
        '0x0000ff',
        '0x27E027',
        '0x353535',
        '0x8300FC',
        '0xFF5F06',
      ];
  
  enemies = [];
  createEnemies();
  function createEnemies(){
    for (let i = 0; i < numberOfEnemies; i++) {
      let enemy = new PIXI.Graphics();
      enemy.speedX = (Math.random() - 0.5) * 3;
      enemy.speedY = (Math.random() - 0.5) * 3;
      enemy.beginFill(colorArray[Math.floor(Math.random()*colorArray.length)], 1);
      enemy.drawCircle(0,0,enemySize);
      enemy.endFill();
      let enemyX = Math.random() * (app.screen.width - enemySize * 2) + enemySize,
          enemyY = Math.random() * (app.screen.height - enemySize * 2) + enemySize;
      enemy.position.set(enemyX, enemyY);
      
      //enemy scale
      enemy.scale.set(randomEnemySize(1,3));

      enemy.vy = enemy.speedY;
      enemy.vx = enemy.speedX;

      enemies.push(enemy);

      app.stage.addChild(enemy);
    }
  }
  
  //Create the player circle
  var mainCircle = new PIXI.Graphics();
  mainCircle.beginFill(0xFF0092, 1);
  mainCircle.drawCircle(0, 0, 10);
  mainCircle.endFill();
  mainCircle.position.set(app.screen.width / 2, app.screen.height / 2);
  mainCircle.hit = false;
  app.stage.addChild(mainCircle);
  
  // move player circle
  var duration = mainCircle.position.x/1000;
  
  backgroundSquare.on('mousemove', function(event){
    var mouseX = event.data.global.x;
    var mouseY = event.data.global.y;
    
    TweenMax.to(mainCircle, duration, {x: mouseX, y: mouseY, ease: Back.easeOut});
    });
  
  //scale the player circle
  var circleScaleX = mainCircle.scale.x;
  var circleScaleY = mainCircle.scale.y;
  
  //scale player on click
  //backgroundSquare.on('click', function(event){
    //circleScaleX++;
    //circleScaleY++;
    //TweenMax.to(mainCircle.scale, duration, {x: circleScaleX, y: circleScaleY, ease: Back.easeOut});
  //});
  
  //removing the cursor 
  backgroundSquare.cursor = 'none';
  
  //setting the game to play
  state = play;
  app.ticker.add(delta => gameLoop(delta));
  
  //play the game
  function play(delta){
    
    //move the enemies and bounce on the edges
      if(enemies.length > 0) {
        enemies = moveEnemies();
      }
    
      function moveEnemies(){
        let _enemies = [];
        
        enemies.forEach(function(enemy){
        enemy.x += enemy.speedX;
        enemy.y += enemy.speedY;

        if (enemy.x + enemySize > backgroundSquare.width || enemy.x - enemySize < 0){
          enemy.speedX = -enemy.speedX;
        };

        if (enemy.y + enemySize > backgroundSquare.height || enemy.y - enemySize < 0) {
          enemy.speedY = -enemy.speedY;
        };
          
        if (hitEnemy(mainCircle, enemy)) {
            circleScaleX+=0.3;
            circleScaleY+=0.3;
            TweenMax.to(mainCircle.scale, duration, {x: circleScaleX, y: circleScaleY, ease: Back.easeOut});
          
            app.stage.removeChild(enemy);
          
          }
          else {
            _enemies.push(enemy);
          }
          
          
        });
        
        return _enemies;
      }
    }
}
init();

function gameLoop(delta){
  state(delta);
}

//enemies size random 
function randomEnemySize(min, max){
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function hitEnemy(r1, r2) {

  //Define the variables we'll need to calculate
  let combinedHalfWidths, combinedHalfHeights, dx, dy;

  //Find the center points of each sprite
  r1.centerX = r1.x + r1.width / 2;
  r1.centerY = r1.y + r1.height / 2;
  r2.centerX = r2.x + r2.width / 2;
  r2.centerY = r2.y + r2.height / 2;

  //Find the half-widths and half-heights of each sprite
  r1.halfWidth = r1.width / 2;
  r1.halfHeight = r1.height / 2;
  r2.halfWidth = r2.width / 2;
  r2.halfHeight = r2.height / 2;

  //Calculate the distance vector between the sprites
  dx = r1.centerX - r2.centerX;
  dy = r1.centerY - r2.centerY;

  //Figure out the combined half-widths and half-heights
  combinedHalfWidths = r1.halfWidth + r2.halfWidth;
  combinedHalfHeights = r1.halfHeight + r2.halfHeight;
  
  //Check for a collision on the x axis
  return Math.abs(dx) < combinedHalfWidths ? Math.abs(dy) < combinedHalfHeights : false;
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://pixijs.download/release/pixi.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js