往復移動処理(キャラクターの画像反転)

今回のサンプル
サンプルの全ファイル

主なプログラムはこちら。

      bear.ax = 5;
      bear.addEventListener('enterframe', function(e) {
        this.x += this.ax;
        if (this.x < 0) {
          this.x = -this.x;
          this.ax *= -1;
          this.scaleX *= -1;
        }
        var rightEnd = game.width-this.width;
        if (this.x > rightEnd) {
          this.x = rightEnd*2-this.x;
          this.ax *= -1;
          this.scaleX *= -1;
        }
      });

ax で1フレームでの移動量を設定。

      bear.ax = 5;

画面、左側からはみ出した場合の反転処理はこちら。

        if (this.x < 0) {
          this.x = -this.x;
          this.ax *= -1;
          this.scaleX *= -1;
        }

1フレームでの移動量の ax の符号を反転。キャラクターの描画を反転する為に scaleX の符号を反転。

画面、右側からはみ出した場合の反転処理はこちら。

        var rightEnd = game.width-this.width;
        if (this.x > rightEnd) {
          this.x = rightEnd*2-this.x;
          this.ax *= -1;
          this.scaleX *= -1;
        }

画面の右側の場合は(画面サイズ-キャラの幅)の位置を超えた時点で画面からはみ出るのでその位置基準に処理する。今回はrightEndに保存。

はみ出した分だけ、反転した位置に移動させる計算についてはまず、はみ出した量の計算は

this.x-rightEnd

それを rightEnd から引くと反転した位置が算出出来るの以下の計算。

rightEnd - (this.x-rightEnd)

整形したものが最終的なこちらの式。

          this.x = rightEnd*2-this.x;