javascript：多个可点击的精灵

我正在使用带有phaser的JavaScript创建一个web游戏。我已经习惯了Java，很难掌握构建简单的基于按钮的游戏的正确方法。该游戏是一个简单的地图，瑞典的每一个景观。游戏内容将根据我按下的方向进行更改。要更新的元素可以是按钮标题、文本数据等

我在生成许多景观类时遇到的一个问题是，上次创建的景观覆盖了其他景观。控制台应该写入按下的风景的名称，但按下每个风景会生成我上次创建的风景对象的名称

审视我的解决方案，并不是真的按照我想要的方式去做，我想知道我是否以错误的方式看待我的游戏结构

有更好的方法吗

以下是游戏当前外观的链接：

var game=new Phaser.game（480700，Phaser.AUTO，，{preload:preload，create:create，update:update}）；
函数create（）{
game.stage.backgroundColor='7dc3ff'；
瑞典（0,0，'瑞典'，10000000）；
var btnLand=新的btnLand（）；
btnLand.changeText（“瑞典”）；
}
函数更新（）{
}
函数render（）{
}
var BtnLand=函数（）{
this.btn=game.add.sprite（game.world.centerX，game.world.height，'btn main'）；
此.btn.刻度设置为（0.8,1）；
此.btn.anchor.set（0.5,1）
this.btn.inputEnabled=true；
}
BtnLand.prototype.changeText=函数（标题）{
this.title=标题；
var style={font:“32px Arial”，fill:#000000，wrap:true，wrapwidth:this.width，align:“center”}；
this.text=game.add.text（this.btn.x，this.btn.y，this.title，style）；
this.text.anchor.set（0.5,1.5）；
}
变量横向=函数（x，y，名称）{
this.landname=名称；
this.area=game.add.sprite（x，y，this.landname）；
该区域锚定设置（0.5）；
this.area.inputEnabled=true；
this.area.events.onInputDown.add（侦听器，this）；
}
var瑞典=函数（x，y，名称）{
this.smaland=景观（230+x，483+y，'smaland'，720358）；
this.skane=景观（200+x，600+y，'skane'，1289000）；
这个.布莱金=风景（277+x565+y，'布莱金'，152315）；
哈兰=风景（127+x505+y，'halland'，152315）；
}
函数侦听器（）{
控制台日志（“按下”+landname）；
btnLand.changeText（landname）；
}

我很感激能得到的所有建议

---

提前谢谢。

我认为主要的问题是将

横向调用作为函数而不是构造函数

如果将每个
横向
调用更改为
新横向
，则将创建4个单独的横向，并且
此
的范围将是对象而不是全局范围

<script type="text/javascript">

var game = new Phaser.Game(480, 700, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function create() {
    game.stage.backgroundColor = '#7dc3ff';

    sweden(0, 0, 'sweden', 10000000);

    var btnLand = new BtnLand();
    btnLand.changeText("Sweden");

}

function update() {

}

function render() {

}


var BtnLand = function (){ 
    this.btn = game.add.sprite(game.world.centerX, game.world.height, 'btn-main');
    this.btn.scale.setTo(0.8, 1);
    this.btn.anchor.set(0.5, 1)
    this.btn.inputEnabled = true;
}

BtnLand.prototype.changeText = function (title) {
    this.title = title;
    var style = { font: "32px Arial", fill: "#000000", wordWrap: true, wordWrapWidth: this.width, align: "center" };
    this.text = game.add.text(this.btn.x, this.btn.y, this.title, style);
    this.text.anchor.set(0.5, 1.5);
}


var Landscape = function(x, y, name) {
    this.landname = name;

    this.area = game.add.sprite(x, y, this.landname);
    this.area.anchor.set(0.5);

    this.area.inputEnabled = true;
    this.area.events.onInputDown.add(listener, this);

}

var sweden = function(x, y, name) {
    this.smaland = Landscape(230 + x, 483 + y, 'smaland', 720358);
    this.skane = Landscape(200 + x, 600 + y, 'skane', 1289000);
    this.blekinge = Landscape(277 + x, 565 + y, 'blekinge', 152315);
    this.halland = Landscape(127 + x, 505 + y, 'halland', 152315);

}


function listener () {
    console.log("pressed " + landname);
    btnLand.changeText(landname);
}

</script>