<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 class="stage-control">
            <div class="stage-control-start button">
                開始遊戲
            </div>
            <div class="stage-control-text">
                <p>你獲得</p>
                <p class="big"><span class="stage-control-text-endScore">0</span> 分</p>
            </div>
            <div class="stage-control-reStart button">
                重新遊戲
            </div>
            
        </div>
  <div class="stage-score"> 0</div> 
  
  <div class="stage-coinBase"> <!--金幣-->
            <ul> 
                <li class="c1">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c2">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c3">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c4">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c5">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c6">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c7">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c8">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c9">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c10">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c11">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>


                <li class="c12">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c13">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c14">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c15">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c16">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c17">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c18">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c19">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c20">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c21">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>
                <li class="c22">  <img src="   https://wanchen-travel.com/wp-content/uploads/2020/09/coin-1.gif">   </li>

            </ul>
            
        </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; }

.stage-control { position: absolute; top:0; left: 0; padding-top: 20%; width: 100%; height: 100%; text-align: center; z-index: 20; background: rgba(0,0,0,0.65) }
.stage-control .button { display: block; margin: 0 auto; padding: 0; width: 70%; border-radius: 20px; font: 20px/2 "微軟正黑體"; color: #fff200 ; border:1px solid #fff200; transition: .5s; cursor: pointer;  }
.stage-control .button:hover { color: #000; background: #fff200; }
.stage-control .stage-control-reStart { display: none; }
.stage-control-text { display: none; font: 50px /50px "arial"; color: #fff200 ;   }

.stage-score { position: absolute; top:0; left: 0; width: 100%;  font: 50px /50px "arial"; color: #fff200 ; text-align: center; z-index: 6; background: rgba(0,0,0,0.5); }


.stage-coinBase  { position: absolute; top: 0; left: 0; width: 2000px; height:500px;
	background: rgba(255,0,0,0.0); ; z-index: 4;  }

.stage-coinBase ul { position: relative; top:0; left: 0; width: 100%; height: 100%;
 border:0px dotted red; }	

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

.stage-score { position: absolute; top:0; left: 0; width: 100%;  font: 50px /50px "arial"; color: #fff200 ; text-align: center; z-index: 6; background: rgba(0,0,0,0.5); }



.stage-coinBase  { position: absolute; top: 0; left: 0; width: 2000px; height:500px;
	background: rgba(255,0,0,0.0); ; z-index: 4;  }
.stage-coinBase ul { position: relative; top:0; left: 0; width: 100%; height: 100%;
 border:0px dotted red; }	
.stage-coinBase ul li { position: absolute; width: 40px; height: 40px; list-style: none;  }
.c1 { top:250px; left: 350px }	
.c2 { top:230px; left: 400px }	
.c3 { top:210px; left: 450px }	
.c4 { top:190px; left: 500px }	
.c5 { top:170px; left: 550px }	
.c6 { top:150px; left: 600px }	
.c7 { top:170px; left: 650px }	
.c8 { top:190px; left: 700px }	
.c9 { top:210px; left: 750px }	
.c10 { top:230px; left: 800px }	
.c11 { top:250px; left: 850px }	


.c12 { top:250px; left: 1000px }	
.c13 { top:230px; left: 1050px }	
.c14 { top:250px; left: 1100px }	
.c15 { top:180px; left: 1200px }	
.c16 { top:180px; left: 1250px }	
.c17 { top:250px; left: 1400px }	
.c18 { top:200px; left: 1450px }	
.c19 { top:150px; left: 1550px }	
.c20 { top:200px; left: 1600px }	
.c21 { top:200px; left: 1700px }	
.c22 { top:200px; left: 1750px }	
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;

var stageControl = $(".stage-control");
var startButton = $(".stage-control-start");
var reStageButton = $(".stage-control-reStart");

var score = $(".stage-score");
var coinBase = $(".stage-coinBase");

function gameEnd() {
    clearInterval(gameRun); //場景走到尾。即停止。
    $(".stage-control-text").show()
    $(".stage-control-text-endScore").text( score.text() );
    stageControl.fadeIn();
    reStageButton.show();
};


function playerControl() { //遊戲控制 
  
    startButton.click(function() {
        stageControl.fadeOut();
        $(this).hide();
        gameRun = setInterval(function() {
            start();
        }, 50);
    });
  
  reStageButton.click(function() {
        location.reload();
    });


    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{
             gameEnd();
        };
      
      var nowL = parseInt(stageBg.css("left").replace("px"), "");
        if (nowL > -1600) {
            stageBg.css({
                "left": nowL - (speed / 5)
            });
        }else{
            stageBg.css({
                "left":0
            });
        };
      
      var nowL = parseInt(coinBase.css("left").replace("px"), "");
        if (nowL > -1600) {
            coinBase.css({
                "left": nowL - (speed / 2.5)
            });
        };
      
    };//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();
  
  function checkPos() { //角色色與錢幣碰撞測試  
        $(".stage-coinBase li").each(function() {
            var a1 = player.offset().top;
            var a2 = a1 + player.height();

            var b1 = player.offset().left;
            var b2 = b1 + player.width();

            var c1 = $(this).offset().top;
            var c2 = $(this).offset().left;

            if (a1 < c1 && c1 < a2 && b1 < c2 && c2 < b2) {
                $(this).remove();
                score.text(parseInt(score.text()) + 1)
            };
        });
    };
  
  await floorMov();
  await playerMov();
  await checkPos(); //偵測角色跟金幣位置是否接觸
};

    

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