jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-3

第三章的jQuery類似馬力歐遊戲要加入人物的操作囉，javaScript的部份會越來越多。如果還不熟前兩章的朋友建議先回前兩章複習喔!

jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-1

jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-2

加入人物操作

在人物的部份，我們使用GIF走路的動畫，並放在 stage 的div內。

<div class="stage-player">
  <img src="   https://designcode.today/wp-content/uploads/2020/09/man-1.gif">
</div>

人物的CSS，一樣須使用position:absolute，在場景內進行定位。

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

加入人物的HTML和CSS成果

---

為人物加入操作

再來一次會加入許多javaScript跟jQuery，可能較為複雜，建議可以多看幾次講解，先看完成範例如下：

電腦 = 空白鍵跳躍; 手機 = 點擊場景地板

加入所需要的變數

var stage = $(".stage"); //場景，作為手機畫面時，點擊場景能使人物跳躍使用。
var player = $(".stage-player"); //角色變數，操作角色用。
var playerDir = 0; //角色上下移動座標軸的位移幅度
var jumpLock = false; //角色跳起時，要讓玩家無法重複快按跳躍，所以做一個變數，之後用來鎖定跳起時，無法再按跳躍。
var skyLimit = 100; //角色最高能跳到的高度
var floorLimit = 300; //角色到此座標時，及不會再往下墜，地面概念。
var keyBoard = 32; //空白鍵，可以自由改成你要的鍵盤代號。

---

加入角色跳躍動作

角色移動javaScript，請在start()的函式內， 加入以下函式，接在floorMov()之後，讓每50毫秒執行一次的start()，也會執行到playerMov()。

function playerMov() {
        var nowT = parseInt(player.css("top").replace("px"), "");
        if (nowT > skyLimit &amp;&amp; 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;
 //角色移動距離歸0，不再移動。
            jumpLock = false;
 //跳躍開啟，使用者可以再次跳躍
            player.css({
                "top": floorLimit
 //腳色top座標跟地板一樣
            });
        };


    }; //playerMov();

在await floorMov();下面加入await playerMov();，這樣每次50毫秒執行start()進行背景移動後，就會執行角色移動。

 await floorMov();
 await playerMov();

---

加入使用者操作

function playerControl() { //遊戲控制    

    function keyDown() {
 //按下函式
        if(jumpLock == false) playerDir = -10;   //如果跳躍動作沒被鎖住，則角色方向開始向上少10座標移動  
    };

    function keyUp() {
 //放開函式
        playerDir = 10
 //座標往下移動增加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(); //執行 playerControl()函式

---

加入完成以上javaScript，就可以完成角色的操作囉，執行起來有橫向卷軸的感覺!

但是此篇章比較複雜，如果不熟的朋友請多看幾次喔，如果加入以上javaScript後，執行失敗。請看以下範例對照檢查看看喔!

電腦 = 空白鍵跳躍; 手機 = 點擊場景地板

jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-4