Pixi.js - 如何将代码分隔为每个文件作为函数？

Question

我是JS和Pixi.js的新手，我想要一些建议，下面是我的示例代码。我想知道如何将代码分隔为main.js，boss.js作为函数？我尝试但是它不是工作阶段是显示但我绘制的老板不显示，我想知道如何。谢谢

var stage = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer();
document.body.appendChild(renderer.view);

var screenWidth = window.innerWidth;
var  screenHeight = window.innerHeight;
var circle = new PIXI.Graphics();
var  rect = new PIXI.Graphics();

var rectWidth = 160;
var  rectHeight = 200;

var boss = new PIXI.Container();

rect.lineStyle(0);
rect.beginFill(0xffdbac, 1);
rect.drawRect((screenWidth / 2) - (rectWidth / 2), (screenHeight / 2) - 60, rectWidth, rectHeight);
rect.endFill();
boss.addChild(rect);

circle.lineStyle(0);
circle.beginFill(0xffdbac, 1);
circle.drawCircle(screenWidth / 2, (screenHeight / 2) - 140, 80);
circle.endFill();
boss.addChild(circle);

stage.addChild(boss);

stage.interactive = true;

renderer.view.style.position = "absolute";
renderer.view.style.display = "block";
renderer.autoResize = true;
renderer.resize(screenWidth, screenHeight);

rect.lineStyle(0);
rect.beginFill(0xffdbac, 1);
rect.drawRect((screenWidth / 2) - (rectWidth / 2), (screenHeight / 2) - 60, 160, 200);
boss.addChild(rect);

circle.lineStyle(0);
circle.beginFill(0xffdbac, 1);
circle.drawCircle(screenWidth / 2, (screenHeight / 2) - 140, 80);
boss.addChild(circle);

stage.addChild(boss);

animate();

function animate() {

    renderer.render(stage);
    requestAnimationFrame( animate );
}

Answer 1

下面是一个boss创建的例子，它与你自己的文件和函数分开：http://plnkr.co/edit/43GgC3nPvFKEpflGhwvV?p=preview

main.js

document.addEventListener("DOMContentLoaded", function(event) {
  var stage = new PIXI.Container();
  var renderer = PIXI.autoDetectRenderer();
  document.body.appendChild(renderer.view);

  var screenSize = {
    width: window.innerWidth,
    height: window.innerHeight
  }
  var rectSize = {
    width: 160,
    height: 200
  };

  var boss = createBoss(screenSize, rectSize);

  stage.addChild(boss);

  stage.interactive = true;

  renderer.view.style.position = "absolute";
  renderer.view.style.display = "block";
  renderer.autoResize = true;
  renderer.resize(screenSize.width, screenSize.height);

  boss = window.createBoss(screenSize, rectSize);

  stage.addChild(boss);

  animate();

  function animate() {
      renderer.render(stage);
      requestAnimationFrame( animate );
  }
});

boss.js

function createBoss(screenSize, rectSize) {
  var circle = new PIXI.Graphics();
  var rect = new PIXI.Graphics();
  var boss = new PIXI.Container();

  rect.lineStyle(0);
  rect.beginFill(0xffdbac, 1);
  rect.drawRect((screenSize.width / 2) - (rectSize.width / 2), (screenSize.height / 2) - 60, rectSize.width, rectSize.height);
  rect.endFill();
  boss.addChild(rect);

  circle.lineStyle(0);
  circle.beginFill(0xffdbac, 1);
  circle.drawCircle(screenSize.width / 2, (screenSize.height / 2) - 140, 80);
  circle.endFill();
  boss.addChild(circle);

  return boss;
}