Question

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

我通过生成许多Landscape类遇到的一个问题是，最后创建的景观会覆盖其他类。控制台应该写下按下的横向的名称，但是按下每个横向都会生成我上次创建的横向对象的名称。

查看我的解决方案，并没有按照我想要的方式得到它，我想知道我是否以错误的方式看待我的游戏结构。

有更好的方法吗？

以下是游戏目前状态的链接：http://postimg.org/image/l5jthna4x/

<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>

我很欣赏我能得到的所有建议！

提前谢谢。

Answer 1

我认为主要问题是将Landscape称为函数而不是构造函数。

如果您将Landscape每次调用更改为new Landscape，您将创建4个单独的格局，而this的范围将是对象而非全局范围。

javascript：多个可点击的精灵

1 个答案: