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);

const loader = new PIXI.Loader();
loader
  .add('fakeimg','https://i.imgur.com/j5QyG2t.png')
  .load((loader, resource)=> {
    console.log('Done');
    init(resource);
  })
function init(item) {
  console.log(item);
  const sprite = new PIXI.Sprite(item.fakeimg.texture);
  container.addChild(sprite);
}

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;
  }
})