<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>
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 ; }
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");
function playerControl() { //遊戲控制
startButton.click(function() {
stageControl.fadeOut();
$(this).hide();
gameRun = setInterval(function() {
start();
}, 50);
});
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();
};
This Pen doesn't use any external CSS resources.