角色在Phaser中移动时无限循环背景？

Question

我有一个背景图像和一个单独的地面图像，只要角色向前移动，就想无限循环。当角色停止时，背景和地面不应移动。对于类似的游戏，通常建议添加this.game.background.tilePosition.x -= 1 更新功能。这不是我想要的，因为无论角色是否移动，它都会使背景不断移动。目前，我的背景图像和地面图像正在重复，但仅限于this.game.world.setBounds(0, 0, 1280, 800);。任何建议将不胜感激。我的代码如下：

function Hero(game, x, y) {
        Phaser.Sprite.call(this, game, x, y, 'player');
//rest of code for Hero constructor....
}

Hero.prototype = Object.create(Phaser.Sprite.prototype);
Hero.prototype.constructor = Hero;

//code for Hero.prototype....

PlayState = {};

PlayState.init = function () {
   //code for keyboard...
};

PlayState.preload = function () {

      this.game.load.json('level:1', 'data/level01.json');

      this.game.load.image('ground', 'images/ground.png'); // I need this to 
      //repeat infinitely

      this.game.load.image('background', 'images/background.png'); // I need 
      //this to repeat infinitely

      this.game.load.spritesheet('player', 'images/player.png', 64, 64);

};


PlayState.create = function () {

      this.game.world.setBounds(0, 0, 1280, 800);

      this.game.background = this.game.add.tileSprite(0, 0, 
      this.game.world.width, 800, 'background');

      this.game.ground = this.game.add.tileSprite(0, 680, 
      this.game.world.width, 166, 'ground');

      this.game.physics.arcade.enable(this.game.ground);
      this.game.ground.body.immovable = true;
      this.game.ground.body.allowGravity = false; 

      this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

      this._loadLevel(this.game.cache.getJSON('level:1'));

};


PlayState.update = function () {

      this.physics.arcade.collide(this.player, this.game.ground); 

 };

PlayState._loadLevel = function (data) {

       this._spawnPlayer({player: data.player});
       const GRAVITY = 1200;
       this.game.physics.arcade.gravity.y = GRAVITY;
      };

PlayState._spawnPlayer = function (data) {

       this.player = new Hero(this.game, data.player.x, data.player.y);
       this.game.add.existing(this.player);
       this.game.camera.follow(this.player, 
        Phaser.Camera.FOLLOW_PLATFORMER);
      };

window.onload = function () {
        let game = new Phaser.Game(866, 520, Phaser.CANVAS, 'game');
        game.state.add('play', PlayState);
        game.state.start('play');
};

我尝试了以下解决方案（请参见下文），其中为后台创建了构造函数。这个想法来自使用TypeScript完成的现有教程，该教程完全可以满足我的需求。但是，我对TypeScript并不熟悉，因此我只是尽最大努力解释了教程中的代码并将其放入Javascript中，但此刻在控制台中出现错误TypeError: "a is undefined"。我仍在学习Javascript，看不到哪里出了问题。 （为清楚起见，我这次包括了键盘逻辑和字符移动。）

function MyBackground(game, x, y) {
    Phaser.Sprite.call(this, game, x, y, 'background');

}

MyBackground.prototype = Object.create(Phaser.Sprite.prototype);
MyBackground.prototype.constructor = MyScene;

MyBackground.prototype.repeatScene = function () {
    this.nextFrame = new Phaser.Sprite(this.game, this.width, 0, "background", 0);
    this.game.add.existing(this.nextFrame);
};



function Hero(game, x, y) {
        Phaser.Sprite.call(this, game, x, y, 'player');

this.anchor.set(0.5, 0.5);
    this.game.physics.enable(this);
    this.body.collideWorldBounds = false;


    this.animations.add('stop', [0]);
    this.animations.add('run', [1, 2, 3, 4, 5], 14, true); // 14fps looped
    this.animations.add('jump', [6]);
    this.animations.add('fall', [7]);
    this.animations.add('die', [8, 9, 8, 9, 8, 9, 8, 9], 12); // 12fps no loop

}

Hero.prototype = Object.create(Phaser.Sprite.prototype);
Hero.prototype.constructor = Hero;

Hero.prototype.move = function (direction) {
  const SPEED = 200;
    this.body.velocity.x = direction * SPEED;


    // update image flipping & animations
    if (this.body.velocity.x < 0) {
        this.scale.x = -1;
    }
    else if (this.body.velocity.x > 0) {
        this.scale.x = 1;
    }
};

Hero.prototype.jump = function () {
    const JUMP_SPEED = 600;
    let canJump = this.body.touching.down;


    if (canJump) {
    this.body.velocity.y = -JUMP_SPEED;
  }
  return canJump;
};

Hero.prototype.bounce = function () {
   const BOUNCE_SPEED = 200;
   this.body.velocity.y = -BOUNCE_SPEED;
};

Hero.prototype.update = function () {
    // update sprite animation, if it needs changing
    let animationName = this._getAnimationName();
    if (this.animations.name !== animationName) {
        this.animations.play(animationName);
    }

};

Hero.prototype.die = function () {
    this.alive = false;
    this.body.enable = false;

    this.animations.play('die').onComplete.addOnce(function () {
        this.kill();
    }, this);
};


Hero.prototype._getAnimationName = function () {
    let name = 'stop'; // default animation

    if (!this.alive) {
        name = 'die';
    }

    else if (this.body.velocity.y > 0 && !this.body.touching.down) { 
        name = 'fall';
    }

    else if (this.body.velocity.y < 0) {
        name = 'jump';
    }

    else if (this.body.velocity.x !== 0 && this.body.touching.down ) {
        name = 'run';
    }

    return name;

PlayState = {};

PlayState.init = function () {
    this.game.renderer.renderSession.roundPixels = true;

    this.keys = this.game.input.keyboard.addKeys({
        left: Phaser.KeyCode.LEFT,
        right: Phaser.KeyCode.RIGHT,
        up: Phaser.KeyCode.UP
};

PlayState.preload = function () {

      this.game.load.json('level:1', 'data/level01.json');

      this.game.load.image('ground', 'images/ground.png'); // I need this to repeat infinitely

      this.game.load.image('background', 'images/background.png'); // I need this to repeat infinitely

      this.game.load.spritesheet('player', 'images/player.png', 64, 64);

};


PlayState.create = function () {

  this.background = new MyBackground(this.game, 0, 0);
  this.game.add.existing(this.MyBackground);


  this.game.physics.arcade.enable(this.game.ground);
  this.game.ground.body.immovable = true; 
  this.game.ground.body.allowGravity = false; 

  this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

  this._loadLevel(this.game.cache.getJSON('level:1'));
  this.game.world.setBounds(0, 0, this.MyBackground.width * 2, 800);

};


PlayState.update = function () {

   var backgroundWidth = this.game.stage.getChildAt(0).getBounds().width; //getChildAt(0) because the background is created first in create


   if (this.x > backgroundWidth * .75) {

      this.x = backgroundWidth * .25;

      repeatScene();  

     };

  this._handleInput();
  this.physics.arcade.collide(this.player, this.game.ground); 

 };


    PlayState._handleInput = function () {


                if (this.keys.up.isDown) {
                    this.player.jump();

                } else  if (this.keys.right.isDown) { // move hero right
                    this.player.move(1);

                  } else if (this.keys.left.isDown) { // move hero left
                    this.player.move(-1);
                } else { // stop
                    this.player.move(0);
                }
      };


PlayState._loadLevel = function (data) {

       this._spawnPlayer({player: data.player});
       const GRAVITY = 1200;
       this.game.physics.arcade.gravity.y = GRAVITY;
      };

PlayState._spawnPlayer = function (data) {

       this.player = new Hero(this.game, data.player.x, data.player.y);
       this.game.add.existing(this.player);
       this.game.camera.follow(this.player, Phaser.Camera.FOLLOW_PLATFORMER);
      };

window.onload = function () {
        let game = new Phaser.Game(866, 520, Phaser.CANVAS, 'game');
        game.state.add('play', PlayState);
        game.state.start('play');
};