pixi 小游戏_关于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();

作者：谭瞎

链接：https://www.jianshu.com/p/8a48a332d7e1

打开App，阅读手记