const app = new PIXI.Application({
  view: document.getElementById('main'),
  width: 500,
  height: 500,
  antialias: true,
  transparent: false,
  backgroundColor: 0x00CC99,
});

const container = new PIXI.Container();
app.stage.addChild(container);

let graphics = new PIXI.Graphics();
graphics.lineStyle(5, 0x000000, 1);
graphics.drawCircle(60, 60, 50);
graphics.endFill();
container.addChild(graphics);

const body = document.querySelector('body');

body.addEventListener('keydown',(e) => {
  switch(e.keyCode) {
    case 38:
    case 87:
      container.y -= 5;
      break;
    case 40:
    case 83:
      container.y += 5;
      break;
    case 37:
    case 65:
      container.x -= 5;
      break;
    case 39:
    case 68:
      container.x += 5;
      break;
    default:
      break;
  }
})

const container2 = new PIXI.Container();
app.stage.addChild(container2);

let graphics2 = new PIXI.Graphics();
graphics2.lineStyle(5, 0x000000, 1);
graphics2.drawCircle(0, 0, 50);
graphics2.endFill();

container2.addChild(graphics2);
container2.x = 200;
container2.y = 200;

app.ticker.add((delta) => {
  if (boxesIntersect(container, container2)) {
    container.y -= 20;
    container.x -= 20;
    alert('你撞到我了!');
  }
})


function boxesIntersect(a, b)
{
  var ab = a.getBounds();
  var bb = b.getBounds();
  return ab.x + ab.width > bb.x && ab.x < bb.x + bb.width && ab.y + ab.height > bb.y && ab.y < bb.y + bb.height;
}