Phaser 3中RectangleToRectangle布尔判断逻辑失效问题求助

我用Phaser 3开发了一款小游戏，规则是玩家需要将游戏元素放置到屏幕指定位置，全部放置正确则加1分，否则游戏重置至之前状态。但目前代码存在问题：只要第一个元素处于正确位置，无论其他元素位置如何，都会触发加分逻辑。我尝试将===替换为==，但问题依旧。

我的代码步骤如下：

1. 获取对象边界：

var bounds_po_orderid = this.answer_element_po_orderid.getBounds();
var bounds_po_eventid = this.answer_element_po_eventid.getBounds();
var bounds_po_orderdate = this.answer_element_po_orderdate.getBounds();
...............

2. 对比边界是否相交：

var overl_answerzone_one_bounds_po_orderid  = Phaser.Geom.Intersects.RectangleToRectangle(bounds_po_orderid, bounds_answerzone_one);
var overl_answerzone_one_bounds_po_eventid  = Phaser.Geom.Intersects.RectangleToRectangle(bounds_po_eventid, bounds_answerzone_one);
var overl_answerzone_one_bounds_po_orderdate  = Phaser.Geom.Intersects.RectangleToRectangle(bounds_po_orderdate, bounds_answerzone_one);
var overl_answerzone_one_bounds_po_line_purchaseorderid = Phaser.Geom.Intersects.RectangleToRectangle(bounds_po_line_purchaseorderid, bounds_answerzone_one);

3. 点击按钮时校验布尔值：

this.input.on("gameobjectdown", function (pointer, gameObject) 
    {
        if (gameObject.name == "check_answer_button") 
        {
            if (overl_answerzone_one_bounds_po_orderid ===  true && 
              overl_answerzone_one_bounds_po_eventid === false && 
              overl_answerzone_one_bounds_po_orderdate === false && 
              overl_answerzone_one_bounds_po_line_purchaseorderid === false && 
              overl_answerzone_one_bounds_po_line_orderlineid === false 
             ) 
            {
                this.count = 1
                eventsCenter.emit('update-count', this.count)
            }
            else
            {
                // reset all the controls
            }

问题根源 #

你当前的边界相交判断变量是提前一次性计算好的，只在代码初始化阶段执行了一次。之后玩家拖动元素改变位置时，这些变量的值并不会自动更新，判断逻辑始终用的是最初的布尔值，自然会出现逻辑错误。

修复方案 #

把边界获取和相交判断的代码移到按钮点击的回调函数内部，每次点击校验时，重新计算当前所有元素的边界和相交状态：

this.input.on("gameobjectdown", function (pointer, gameObject) 
{
    if (gameObject.name == "check_answer_button") 
    {
        // 每次点击校验时，重新获取所有元素的最新边界
        var bounds_po_orderid = this.answer_element_po_orderid.getBounds();
        var bounds_po_eventid = this.answer_element_po_eventid.getBounds();
        var bounds_po_orderdate = this.answer_element_po_orderdate.getBounds();
        var bounds_po_line_purchaseorderid = this.answer_element_po_line_purchaseorderid.getBounds();
        var bounds_po_line_orderlineid = this.answer_element_po_line_orderlineid.getBounds();

        // 重新计算每个元素与目标区域的相交状态
        var overl_answerzone_one_bounds_po_orderid = Phaser.Geom.Intersects.RectangleToRectangle(bounds_po_orderid, bounds_answerzone_one);
        var overl_answerzone_one_bounds_po_eventid = Phaser.Geom.Intersects.RectangleToRectangle(bounds_po_eventid, bounds_answerzone_one);
        var overl_answerzone_one_bounds_po_orderdate = Phaser.Geom.Intersects.RectangleToRectangle(bounds_po_orderdate, bounds_answerzone_one);
        var overl_answerzone_one_bounds_po_line_purchaseorderid = Phaser.Geom.Intersects.RectangleToRectangle(bounds_po_line_purchaseorderid, bounds_answerzone_one);
        var overl_answerzone_one_bounds_po_line_orderlineid = Phaser.Geom.Intersects.RectangleToRectangle(bounds_po_line_orderlineid, bounds_answerzone_one);

        // 执行校验逻辑
        if (overl_answerzone_one_bounds_po_orderid === true && 
            overl_answerzone_one_bounds_po_eventid === false && 
            overl_answerzone_one_bounds_po_orderdate === false && 
            overl_answerzone_one_bounds_po_line_purchaseorderid === false && 
            overl_answerzone_one_bounds_po_line_orderlineid === false 
        ) 
        {
            this.count = 1
            eventsCenter.emit('update-count', this.count)
        }
        else
        {
            // 重置所有元素位置的逻辑
        }
    }
}, this); // 绑定this上下文，确保回调内能访问场景实例的属性

额外注意点 #

• 回调函数末尾要加上, this，确保回调内部的this指向当前Phaser场景实例，避免访问this.answer_element_xxx时出现未定义错误。
• 如果元素支持拖动，无需额外处理拖动后的状态更新，因为每次点击校验都会重新计算最新的边界数据。

内容的提问来源于stack exchange，提问作者Gerard B.