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

玩轉芋圓讀者優惠專區

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

玩轉芋圓app

★信用卡推薦
台新Richart開戶優惠 限量健身包連結登記或輸入專屬代碼「PIXNET111」

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

★預訂門票行程推薦klook

★買藥妝必領 2020日本藥妝家電優惠
松本清藥妝品項齊全藥妝店
日本札幌藥妝1萬日圓折500日圓、3萬日圓折2000日圓
唐吉訶德折價券滿額免稅享折扣
Japantaxi 「88DFB5」日本計程車折價券 ¥500jpy
Amazon 日本亞馬遜 挖寶購物好好買
BicCamera優惠券 日本家電電器折價券
樂天銀座優惠券 樂天免稅店折價券

★飯店訂房
agoda限定優惠台灣人高使用率訂房網站
booking中文訂房全球旅遊玩透透
relux 新用戶領取好友邀請9折優惠券
stay japan 預訂合法日本民宿
airbnb優惠 領1100旅遊金

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

★其他優惠
日本電器家電優惠券 EDION免稅+93折優惠
餐廳訂位eztable 新會員優惠 抽紅包壽星優惠餐廳
Willer Travel預訂日本高速巴士車票
otomo travel日本導遊預約「MLKLX0PR」 折扣300元
GLOBAL WiFi上網分享器租借8折

★外送叫餐app/台北叫車
foodpanda外送優惠 輸入手機號碼領優惠
ubereats優惠「eats-7vh9sk」2次NT$100元折扣
uber優惠「wanchen120」首次搭乘uber省120


  •  
  •  
  •  
  •  

發表迴響

Up ↑