phew

demo/character.js

@@ -41,8 +41,10 @@ export default class Character extends Component {
     const { keys, store } = this.props;
     const { body } = this.body;
 
-    const shouldMoveStageLeft = body.position.x < 448 && store.stageX < 0;
-    const shouldMoveStageRight = body.position.x > 448 && store.stageX > -1024;
+    const midPoint = Math.abs(store.stageX) + 448;
+
+    const shouldMoveStageLeft = body.position.x < midPoint && store.stageX < 0;
+    const shouldMoveStageRight = body.position.x > midPoint && store.stageX > -1024;
 
     if (body.velocity.y === 0) {
       this.isJumping = false;
@@ -62,18 +64,18 @@ export default class Character extends Component {
       if (keys.isDown(keys.LEFT) || gamepad.button(0, 'button 14')) {
         if (shouldMoveStageLeft) {
           store.setStageX(store.stageX + 5);
-        } else {
-          this.move(body, -5);
         }
 
+        this.move(body, -5);
+
         characterState = 1;
       } else if (keys.isDown(keys.RIGHT) || gamepad.button(0, 'button 15')) {
         if (shouldMoveStageRight) {
           store.setStageX(store.stageX - 5);
-        } else {
-          this.move(body, 5);
         }
 
+        this.move(body, 5);
+
         characterState = 0;
       }
 
@@ -82,14 +84,22 @@ export default class Character extends Component {
       this.setState({
         characterState,
       });
+    } else {
+      const targetX = store.stageX + (this.lastX - body.position.x);
+      if (shouldMoveStageLeft || shouldMoveStageRight) {
+        store.setStageX(targetX);
+      }
     }
+
+    this.lastX = body.position.x;
   };
 
   constructor(props) {
     super(props);
 
     this.loopID = null;
     this.isJumping = false;
+    this.lastX = 0;
 
     this.state = {
       characterState: 2,
@@ -105,13 +115,14 @@ export default class Character extends Component {
   }
 
   getWrapperStyles() {
-    const { characterPosition } = this.props.store;
+    const { characterPosition, stageX } = this.props.store;
     const { scale } = this.context;
     const { x, y } = characterPosition;
+    const targetX = x + stageX;
 
     return {
       position: 'absolute',
-      transform: `translate(${x * scale}px, ${y * scale}px)`,
+      transform: `translate(${targetX * scale}px, ${y * scale}px)`,
       transformOrigin: 'left top',
     };
   }

demo/demo.js

@@ -27,15 +27,15 @@ export default class Demo extends Component {
     );
 
     const leftWall = Matter.Bodies.rectangle(
-      -96, 288,
+      -64, 288,
       64, 576,
       {
         isStatic: true,
       },
     );
 
     const rightWall = Matter.Bodies.rectangle(
-      992, 288,
+      1984, 288,
       64, 576,
       {
         isStatic: true,

demo/level.js

@@ -37,7 +37,7 @@ export default class Level extends Component {
   getWrapperStyles() {
     return {
       position: 'absolute',
-      transform: `translate(${this.state.stageX}px, 0px)`,
+      transform: `translate(${this.state.stageX}px, 0px) translateZ(0)`,
       transformOrigin: 'top left',
     };
   }

demo/stores/game-store.js

@@ -10,7 +10,13 @@ class GameStore {
   }
 
   setStageX(x) {
-    this.stageX = x;
+    if (x > 0) {
+      this.stageX = 0;
+    } else if (x < -1024) {
+      this.stageX = -1024;
+    } else {
+      this.stageX = x;
+    }
   }
 }