效果展示
关键技术点
事件
方式一
create ()
{
// 创建一个自己的事件监听实例
var emitter = new Phaser.Events.EventEmitter();
// 设置事件处理逻辑
emitter.on('addImage', this.handler, this);
// 触发事件
emitter.emit('addImage', 200, 300);
emitter.emit('addImage', 400, 300);
emitter.emit('addImage', 600, 300);
}
handler (x, y)
{
this.add.image(x, y, 'plush');
}
方式二
create ()
{
// 使用对象内的事件监听
this.events.on('chatsubo', this.handler, this);
// 触发事件
this.events.emit('chatsubo');
}
handler ()
{
this.add.image(400, 300, 'neuro');
}
方式三
create ()
{
// 使用Symbols来监听和处理事件
const girlSymbol = Symbol();
// 无论事件触发多少次,此处理程序都只会被调用一次
this.events.once(girlSymbol, this.addGirlHandler, this);
this.events.emit(girlSymbol);
this.events.emit(girlSymbol);
this.events.emit(girlSymbol);
}
addGirlHandler ()
{
let x = Phaser.Math.Between(100, 700);
let y = Phaser.Math.Between(300, 600);
this.add.image(x, y, 'girl');
}
方式四
create ()
{
// 无论事件触发多少次,此处理程序都只会被调用一次
this.events.once('addImage', this.handler, this);
// 发出事件3次,但处理程序只调用一次
this.events.emit('addImage');
this.events.emit('addImage');
this.events.emit('addImage');
}
handler ()
{
const x = Phaser.Math.Between(200, 600);
const y = Phaser.Math.Between(200, 400);
this.add.image(x, y, 'plush');
}
方式五
create ()
{
// 所有对象都可以发射和接收事件
const plush1 = this.add.image(400, 300, 'plush');
// 如果plush1对象发出turnRed事件,它将自身更改为淡红色
plush1.on('turnRed', this.handler);
// 发出事件并传递对其自身的引用
plush1.emit('turnRed', plush1);
}
handler (gameObject)
{
gameObject.setTint(0xff0000);
}
方式六
create ()
{
let i = 0;
this.events.on('addImage', function () {
var x = Phaser.Math.Between(100, 700);
var y = Phaser.Math.Between(100, 500);
this.add.image(x, y, 'plush');
i++;
if (i === 5)
{
// 在5次调用后删除事件
// 通过不提供处理程序,它将清除所有事件监听
this.events.off('addImage');
}
}, this);
// 触发10次事件
for (var e = 0; e < 10; e++)
{
this.events.emit('addImage');
}
}
方式六拆分
create ()
{
// 调用此处理程序
// 在处理程序中,它将在5次调用后被禁用
this.events.on('addImage', this.handler, this);
// 触发10次事件
for (var i = 0; i < 10; i++)
{
this.events.emit('addImage');
}
}
handler ()
{
const x = Phaser.Math.Between(100, 700);
const y = Phaser.Math.Between(100, 500);
this.add.image(x, y, 'plush');
i++;
if (i === 5)
{
this.events.off('addImage', this.handler);
}
}
部分主要文件代码
BootScene.js
import {Scene} from 'phaser'
import bear from '@/game/assets/xiong.png'
import up from '@/game/assets/up-bubble.png'
import down from '@/game/assets/down-bubble.png'
export default class BootScene extends Scene {
constructor() {
super({key: 'BootScene'});
}
preload() {
// 加载图片素材
this.load.image("bear", bear)
this.load.image("up", up)
this.load.image("down", down)
}
create() {
this.scene.start('PlayScene')
}
}
PlayScene.js
import {Scene, Math} from 'phaser'
export default class PlayScene extends Scene {
constructor() {
super({key: 'PlayScene'})
}
info;
upButton;
downButton;
alive = 0
total = [];
create() {
// 统计信息展示
this.info = this.add.text(30, 50, '', {font: '32px 楷体', fill: '#fff'});
// 添加按钮和事件
this.upButton = this.add.image(400, 100, 'up').setInteractive({useHandCursor: true});
this.downButton = this.add.image(600, 100, 'down').setInteractive({useHandCursor: true});
this.upButton.on('pointerup', () => {
this.alive++;
this.events.emit('addImage', Math.Between(50, 800), Math.Between(200, 500), this.alive - 1);
});
this.downButton.on('pointerup', () => {
if (this.alive > 0) {
this.alive--;
}
this.events.emit('reduceImage', this.alive)
});
// 设置两个事件
this.events.on('addImage', this.addHandler, this);
this.events.on('reduceImage', this.reduceHandler, this);
// Emit it a few times with varying arguments
}
update() {
this.info.setText('数量: ' + this.alive);
}
// 增加触发逻辑
addHandler(x, y, z) {
this.total[z] = this.add.image(x, y, 'bear');
}
// 减少触发逻辑
reduceHandler(z) {
this.total[z].setVisible(false);
}
}
本节完整代码下载地址
https://github.com/biwow/phaser3/tree/main/code/6