6 Phaser3-按钮+事件+计数

效果展示

关键技术点

事件

方式一

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