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

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

Welcome to wanchen travel blog website : )
歡迎來到玩轉芋圓部落格網站
點我加社群「媽媽禮 🎁 育兒好物」、 「奇奇蒂蒂商品情報

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 && 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

玩轉芋圓讀者優惠專區

★玩轉芋圓旅遊手札 讀者優惠點我

★喜歡玩轉芋圓旅遊手札嗎?歡迎下載APP 把部落格文章帶著走!

玩轉芋圓app

★wanchen畫的line貼圖
實用橘貓貼圖 Orange cat オレンジ ねこ→前往貼圖

★預訂門票行程推薦klook

★買藥妝必領 日本藥妝家電優惠
Amazon 日本亞馬遜 挖寶購物好好買
美國亞馬遜 Amazon 刴手勸敗

★飯店訂房
agoda限定優惠台灣人高使用率訂房網站
booking中文訂房全球旅遊玩透透

★機票預訂
skyscanner機票比價快速好用找便宜機票

★其他優惠
日本上網SIM卡日本實體SIM卡

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

  1. […] 此章節接續前三章,如未看過前三章的請先看jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-1、jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-2、jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-3。 […]

  2. […] jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-3 […]

  3. […] 製作範例沿用前章的範例,未看完前四章的,請先看前四章喔 jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-1、jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-2、jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-3、jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-4。 […]

jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-5(完成) – 玩轉芋圓旅遊手札 發表迴響取消回覆

探索更多來自 玩轉芋圓旅遊手札 的內容

立即訂閱即可持續閱讀,還能取得所有封存文章。

Continue reading