关于PIXI引擎制作页面小游戏的几个总结

1.有交互的元素一定要设interactive属性为true,否则监听的事件都将无反应。

2.使用css旋转画布的方式会导致事件响应错乱，应该使用内置旋转的方法

3.Canvas横屏适配问题。

// 利用 CSS3 旋转 对根容器逆时针旋转 90 度
function detectOrient() {
let width = document.documentElement.clientWidth,
  height = document.documentElement.clientHeight,
  ratio = _view.height / height;

  // 横屏自适应
  _view.width = width*ratio;

if (width >= height) {
  // 判断是横屏
  isHorizontalScreen = true;

  // 隐藏--横屏提示
  $('#modal').hide();
  $('#loading').removeClass('hide');

  $('.section').css({
    'width': width,
    'height': height,
    'top': 0,
    'left': 0,
    '-webkit-transform': 'none',
    'transform': 'none',
    '-webkit-transform-origin': '0 0',
    'transform-origin': '0 0'
  });
} else {
  // 判断是竖屏
  isHorizontalScreen = true;

  // 隐藏--横屏提示
  $('#modal').show();

  $('.section').css({
    'font-size': '625%',
    'width': height,
    'height': width,
    'top': (height - width) / 2,
    'left': -(height - width) / 2,
    '-webkit-transform': 'rotate(90deg)',
    'transform': 'rotate(90deg)',
    '-webkit-transform-origin': 'center center',
    'transform-origin': 'center center'
  });
}
}

window.onresize = detectOrient;
detectOrient();