在构造函数中引用原型函数,如何?

时间:2016-05-30 20:47:49

标签: javascript phaser-framework

我正在使用Phaser.js开发JavaScript游戏,但我遇到了某种范围问题,我不知道如何解决它。

当玩家获胜时,会出现带有分数和一些按钮的ResultPanel。播放器可以按下按钮进入下一级或重置等。处理返回/重置/下一个的代码在原型函数中,但在调用构造函数时(?)尚未定义。

就在现在,当我按下按钮时,永远不会调用函数doBtnBack 我究竟做错了什么?什么是正确的方法?

// level complete panel constructor
ResultPanel = function(game, stars) {

    this.game = game;

    // display how many yellow stars
    var star1 = stars > 0 ? 'star_yellow' : 'star_grey';
    var star2 = stars > 1 ? 'star_yellow' : 'star_grey';
    var star3 = stars > 2 ? 'star_yellow' : 'star_grey';

    // add text and stars
    this._panelCaption = this.game.add.bitmapText(144, 12, 'bigrigsfont', 'you are winner!', 48);
    this._panelStar1   = this.game.add.sprite(300-160, 144, 'buttonicon', star1);
    this._panelStar2   = this.game.add.sprite(300,     144, 'buttonicon', star2);
    this._panelStar3   = this.game.add.sprite(300+160, 144, 'buttonicon', star3);

    // add button icons
    // NOTE: below code runs but something is wrong because
    // this.doBtnBack this.doBtnReset etc. is undefined
    this.btnBack  = this.game.add.button(300-100, 300, 'buttonicon', this.doBtnBack,  this, 'back_grey',  'back_hl');
    this.btnReset = this.game.add.button(300,     300, 'buttonicon', this.doBtnReset, this, 'reset_grey', 'reset_hl');
    this.btnNext  = this.game.add.button(300+100, 300, 'buttonicon', this.doBtnNext,  this, 'next_grey',  'next_hl');

};

ResultPanel.prototype.doBtnBack = function() {
    console.log('Panel button BACK pressed') // never reaches here
};

ResultPanel.prototype.doBtnReset = function() {
    console.log('Panel button RESET pressed');
};

ResultPanel.prototype.doBtnNext = function() {
    console.log('Panel button NEXT pressed');
};

我也试过这个,但这会产生错误Uncaught TypeError: this.doBtnBack is not a function

this.btnBack  = this.game.add.button(300-100, 300, 'buttonicon', function(){this.doBtnBack();},  this, 4, 0, 8);

1 个答案:

答案 0 :(得分:0)

好的,我实际上在所有对象上都使用了MyGame前缀/命名空间,因为它也在this code example中使用。我承认我不太清楚var MyGame = {}; MyGame.Bootup = function() { //etc. MyGame.GameState = function() { create: function() { var panel = new MyGame.ResultPanel(this, 3); } }; 究竟做了什么。

所以我的代码实际上是这样的:

MyGame.

请参阅下面的面板对象代码。现在,如果我从下面的代码中删除所有// level complete panel constructor MyGame.ResultPanel = function(game, stars) { this.game = game; // etc. }; MyGame.ResultPanel.prototype.doBtnBack = function() { console.log('Panel button BACK pressed') // never reaches here }; MyGame.ResultPanel.prototype.doBtnReset = function() { console.log('Panel button RESET pressed'); }; MyGame.ResultPanel.prototype.doBtnNext = function() { console.log('Panel button NEXT pressed'); }; // level complete panel constructor MyGame.GameState = function() { create: function() { var panel = new MyGame.ResultPanel(this, 3); } }; ,但保留在上面的代码中(除了在var panel = new ResultPanel(this,3)"然后它工作(?)。没有线索为什么会这样。

import matplotlib.pyplot as plt
import numpy as np

with open('SampleData.txt') as f:
    data = f.read()
data = data.split('\n')

x = [row.split(' ')[0] for row in data]
y = [row.split(' ')[1] for row in data]

fig = plt.figure()
ax = fig.add_subplot(111)
ax.plot(x,y)
ax.legend()
plt.show()