<div class="stage">
  <div class="stage-floor"> </div>  
  <div class="stage-bg"> </div> 
  <div class="stage-player"> <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/man-1.gif"> </div>
  
  
</div>
body { background: #005f15; }
* { box-sizing: border-box; }

.stage { position: relative; margin: 0 auto; width: 400px; height: 500px; background: #fff; overflow:hidden; }

.stage-floor { position: absolute; bottom: 0; left: 0; width: 2000px; height: 450px;
	background: url(https://wanchen-travel.com/wp-content/uploads/2020/10/stage-floor-bg-1.png) top center no-repeat; z-index: 3 }

.stage-bg { position: absolute; top: 0; left: 0; width: 2000px; height:500px;
	background: url(https://wanchen-travel.com/wp-content/uploads/2020/10/stage-floor-bg-2.png) top center no-repeat; z-index: 2; opacity: 0.6 }

.stage-player { position: absolute; top: 300px; left: calc(50% - 30px);  width: 50px; height: 100px; background:; z-index: 10; }



var gameRun;
var speed = 5;
var stageFloor = $(".stage-floor");
var stageBg = $(".stage-bg");

var stage = $(".stage");
var player = $(".stage-player");
var playerDir = 0;
var jumpLock = false;
var skyLimit = 100;
var floorLimit = 300;
var keyBoard = 32;


function playerControl() { //遊戲控制    

    function keyDown() {
        if(jumpLock == false) playerDir = -10;     
    };

    function keyUp() {
        playerDir = 10
        jumpLock = true;
    };

    stage.on('touchstart', function() {
        keyDown();
    });

    stage.on('touchend', function() {
        keyUp();
    });

    document.onkeydown = function() {
        if (event.keyCode == keyBoard ) {
            keyDown();
        };
    };
    document.onkeyup = function() {
        if (event.keyCode == keyBoard ) {
            keyUp();
        };
    };



};
playerControl();



async function start() {
    function floorMov() {
        var nowL = parseInt(stageFloor.css("left").replace("px"), "");
        if (nowL > -1600) {
            stageFloor.css({
                "left": nowL - (speed / 2.5)
            });
        }else{
            stageFloor.css({
                "left": 0
            });
        };
      
      var nowL = parseInt(stageBg.css("left").replace("px"), "");
        if (nowL > -1600) {
            stageBg.css({
                "left": nowL - (speed / 5)
            });
        }else{
            stageBg.css({
                "left":0
            });
        };
      
    };//flooeMov
  
  
  function playerMov() {
        var nowT = parseInt(player.css("top").replace("px"), "");
        if (nowT > skyLimit && nowT < (floorLimit + 1) ) {
            player.css({
                "top": nowT + playerDir
            });
        };

        if (nowT == skyLimit ) {
            playerDir = 10;
            jumpLock = true;
            player.css({
                "top": nowT + playerDir
            });
        };

        if (nowT >= ( floorLimit + 10 ) ) {
            playerDir = 0;
            jumpLock = false;
            player.css({
                "top": floorLimit
            });
        };


    }; //playerMov();
  
  await floorMov();
  await playerMov();
};
gameRun = setInterval(function() {
  start();
}, 50);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js