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

第三章的jQuery類似馬力歐遊戲要加入人物的操作囉,javaScript的部份會越來越多。如果還不熟前兩章的朋友建議先回前兩章複習喔!
歡迎來到玩轉芋圓部落格網站,最新豐富的美食餐廳與飯店心得,讓你熟知旅行大小事,跟著玩轉芋圓旅遊去!
加入人物操作
在人物的部份,我們使用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後,執行失敗。請看以下範例對照檢查看看喔!
電腦 = 空白鍵跳躍; 手機 = 點擊場景地板
★喜歡玩轉芋圓旅遊手札嗎?歡迎下載APP 把部落格文章帶著走!
★wanchen畫的line貼圖
實用橘貓貼圖 Orange cat オレンジ ねこ→前往貼圖
★預訂門票行程推薦klook
★買藥妝必領 2020日本藥妝家電優惠
松本清藥妝品項齊全藥妝店
日本札幌藥妝1萬日圓折500日圓、3萬日圓折2000日圓
唐吉訶德折價券滿額免稅享折扣
Japantaxi 「88DFB5」日本計程車折價券 ¥500jpy
Amazon 日本亞馬遜 挖寶購物好好買
美國亞馬遜 Amazon 刴手勸敗
BicCamera優惠券 日本家電電器折價券
樂天銀座優惠券 樂天免稅店折價券
★飯店訂房
agoda限定優惠台灣人高使用率訂房網站
booking中文訂房全球旅遊玩透透
relux 新用戶領取好友邀請9折優惠券
stay japan 預訂合法日本民宿
airbnb優惠 領1100旅遊金
★機票預訂
skyscanner機票比價快速好用找便宜機票
★其他優惠
日本電器家電優惠券 EDION免稅+93折優惠
餐廳訂位eztable 新會員優惠 抽紅包、壽星優惠餐廳
Willer Travel預訂日本高速巴士車票
otomo travel日本導遊預約「MLKLX0PR」 折扣300元
GLOBAL WiFi上網分享器租借8折
[…] 此章節接續前三章,如未看過前三章的請先看jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-1、jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-2、jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-3。 […]
[…] jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-3 […]
[…] 製作範例沿用前章的範例,未看完前四章的,請先看前四章喔 jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-1、jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-2、jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-3、jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-4。 […]