Main.js 定义与模块不一致答案

【问题标题】：Main.js Definitions Inconsistent from ModuleMain.js 定义与模块不一致
【发布时间】：2018-10-14 06:46:54
【问题描述】：

我正在使用 Phaser 框架来创建游戏。我有两个文件，一个 main.js 和一个 Player.js 用于保存 Player 类。

main.js：

import 'pixi'
import Phaser from 'phaser'

import Player from './controllers/Player.js'

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

var player;

function preload() {
    this.stage.backgroundColor = '#eee',
    this.scale.pageAlignHorizontally = true,
    this.scale.pageAlignVertically = true,
    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL,

    game.load.spritesheet( 'idle', '../../assets/sheet_hero_idle.png', 64, 64 ),
    game.load.spritesheet( 'wall', '../../assets/roguelike-cave-pack/Spritesheet/roguelikeDungeon_transparent.png', 16, 16 )
}

function create() {
    //Player Controller
    //===========================
    //Enable Physics on the world
    game.physics.startSystem( Phaser.Physics.ARCADE );
    game.physics.arcade.setBoundsToWorld();

    //Enable input
    game.inputEnabled = true;

    //create player
    player = new Player( game, game.world.centerX, game.world.centerY, 'idle' );
    game.add.existing( player ); //Create on screen
    game.physics.arcade.enable( player ); //Create physics body on this object

    console.log("player is\t", player); //TEST
    console.log("player body is\t", player.body); //TEST
    console.log("player body is enabled\t", player.body.enable); //TEST

    player.playAnim( 'idle', 10, true );

    game.input.onDown.add( player.thisIsMyBody, this ); //When a click input occurs, call player.thisIsMyBody()

Player.js：

export default function Player( game, x, y, animKey ) {
    Phaser.Sprite.call( this, game, x, y, animKey),
    this.anchor.setTo( 0.5 ),
    this.inputEnabled = true,
    this.assets = {
        animations: {}
    },
    this.animations.add( 'idle' ),
    this.animations.play( 'idle', 10, true ), 
    this.alive = true
};

Player.prototype = Object.create( Phaser.Sprite.prototype );

Player.prototype.constructor = Player;

Player.prototype.thisIsMyBody = function(){ //TEST
    console.log( "I am ", this );
    console.log( "My body is ", this.body);
},

Player.prototype.playAnim = function( key, speed, isLoop ) {
    this.animations.play( key, speed, isLoop );
},

Player.prototype.move = function() {
    this.body.velocity.x = 30;
}

console.log("player is\t", player); 返回 Player 对象

console.log("player body is\t", player.body); 返回玩家正文

console.log("player body is enabled\t", player.body.enable); 返回true

但是，player.thisIsMyBody 返回 game 对象和 undefined

我有什么遗漏或滥用this吗？

【问题讨论】：

标签： javascript webpack phaser-framework

【解决方案1】：

您是对的，您在绑定到input.onDown 时误用了this。

没测试过，换个试试

game.input.onDown.add(player.thisIsMyBody, this);

到

game.input.onDown.add(this.thisIsMyBody, player);

或者可能只是

game.input.onDown.add(thisIsMyBody, player);

添加Phaser.Signal监听器时，第二个参数基本回答了“调用回调时this应该是什么意思？”的问题。

【讨论】：

不幸的是，您的第一个解决方案返回“Phaser.Signal：侦听器是 add() 的必需参数，应该是一个函数”，而您的第二个解决方案返回“thisIsMyBody 未定义”。要评论您的理由，如果我的第二个参数是 Player 对象，为什么我们需要调用 game 作为 Player 方法的上下文？

【解决方案2】：

经过一番修改，我发现以下工作：

this.player = new Player( game, game.world.centerX, game.world.centerY, 'idle' );
game.add.existing( this.player ); //<--WILL NOT WORK WITHOUT
game.physics.arcade.enable( this.player );

game.camera.follow( this.player );
game.input.onDown.add( this.player.thisIsMyBody, this.player );

【讨论】：