塔防游戏中在对象外部更新Tower的Radius属性无效，如何解决？

你在Building类的构造函数里把this.radius赋值为全局变量towerRadius的初始值——这是一次值的拷贝，并非引用关联。之后修改全局towerRadius只会改变这个变量本身，不会同步到已创建的Building实例的this.radius属性上，所以塔楼的视觉半径不会有变化。

方案1：直接修改单个塔楼实例的radius属性 #

如果游戏里只有一个塔楼，先确保你保存了塔楼实例的引用：

// 示例：创建塔楼并保存实例
const playerTower = new Building({ position: { x: 200, y: 200 } })

然后在点击事件里直接修改该实例的radius：

upgradeTowerButton.addEventListener('click', (event) => {
    if(coins - currentRangeUpgrade * 100 >= 0) {
        coins -= currentRangeUpgrade * 100
        document.querySelector('#coins').innerHTML = coins
        // 直接修改实例的radius，而非全局变量
        playerTower.radius += 1000
        document.querySelector('#upgradeRangeText').style.display = 'flex'
        setTimeout(() => {
            document.querySelector('#upgradeRangeText').style.display = 'none'
        }, 3000);
        currentRangeUpgrade++
        // 修正变量名：把currentUpgrade改成currentRangeUpgrade，避免报错
        document.querySelector('#upgradeRangeButton').innerHTML = "UPGRADE RANGE: " + currentRangeUpgrade * 100
    }
})

方案2：多塔楼场景下，通过实例数组批量修改 #

如果游戏里有多个塔楼，先创建数组存储所有塔楼实例：

const towers = []
// 创建塔楼时添加到数组
towers.push(new Building({ position: { x: 200, y: 200 } }))
towers.push(new Building({ position: { x: 400, y: 300 } }))

点击事件里遍历数组修改每个塔楼的radius：

upgradeTowerButton.addEventListener('click', (event) => {
    if(coins - currentRangeUpgrade * 100 >= 0) {
        coins -= currentRangeUpgrade * 100
        document.querySelector('#coins').innerHTML = coins
        // 遍历所有塔楼实例更新半径
        towers.forEach(tower => tower.radius += 1000)
        document.querySelector('#upgradeRangeText').style.display = 'flex'
        setTimeout(() => {
            document.querySelector('#upgradeRangeText').style.display = 'none'
        }, 3000);
        currentRangeUpgrade++
        document.querySelector('#upgradeRangeButton').innerHTML = "UPGRADE RANGE: " + currentRangeUpgrade * 100
    }
})

你代码里的点击事件最后一行，currentUpgrade是未定义变量，必须改成currentRangeUpgrade，否则会触发报错中断升级逻辑。

内容的提问来源于stack exchange，提问作者deeeeeeeezy