| | |
| | | |
| | | export default class Player { |
| | | |
| | | constructor(dom) { |
| | | this.app = new PIXI.Application({ |
| | | background: '#f1f2f6', |
| | | antialias: true, |
| | | resizeTo: dom, // 自动调整 canvas 尺寸 |
| | | }) |
| | | this.app.stage.eventMode = 'static'; |
| | | this.app.stage.hitArea = this.app.screen; |
| | | this.app.view.addEventListener('contextmenu', (event) => { |
| | | event.preventDefault(); |
| | | }); |
| | | constructor(dom, themeMode) { |
| | | this.themeMode = themeMode; |
| | | |
| | | this.app = generateApp(themeMode); |
| | | dom.appendChild(this.app.view); |
| | | |
| | | globalThis.__PIXI_APP__ = this.app; |
| | |
| | | this.mapContainer = generateMapContainer('mapContainer'); |
| | | |
| | | const bunny = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png'); |
| | | |
| | | bunny.anchor.set(0.5); |
| | | |
| | | bunny.x = this.app.screen.width / 2; |
| | | bunny.y = this.app.screen.height / 2; |
| | | |
| | | this.app.stage.addChild(bunny); |
| | | |
| | | this.app.ticker.add((delta) => { |
| | | bunny.rotation += 0.1 * delta; |
| | | }); |
| | | } |
| | | |
| | | } |
| | | |
| | | const generateApp = (themeMode) => { |
| | | const app = new PIXI.Application({ |
| | | background: themeMode === 'dark' ? '#2f3542' : '#f1f2f6', |
| | | antialias: true, |
| | | }) |
| | | app.stage.eventMode = 'static'; |
| | | app.stage.hitArea = app.screen; |
| | | app.view.addEventListener('contextmenu', (event) => { |
| | | event.preventDefault(); |
| | | }); |
| | | return app; |
| | | } |
| | | |
| | | const generateMapContainer = (name) => { |