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

第三章的jQuery類似馬力歐遊戲要加入人物的操作囉,javaScript的部份會越來越多。如果還不熟前兩章的朋友建議先回前兩章複習喔!
歡迎來到玩轉芋圓部落格網站,你有全家全盈+PAY 註冊好禮未領取!註冊就送全家美式咖啡 ☕ →點我領取
加入人物操作
在人物的部份,我們使用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
★買藥妝必領 日本藥妝家電優惠
Japantaxi 「88DFB5」日本計程車折價券 ¥500jpy
Amazon 日本亞馬遜 挖寶購物好好買
美國亞馬遜 Amazon 刴手勸敗
★飯店訂房
agoda限定優惠台灣人高使用率訂房網站
booking中文訂房全球旅遊玩透透
★機票預訂
skyscanner機票比價快速好用找便宜機票
★其他優惠
GLOBAL WiFi上網分享器租借8折
[…] 此章節接續前三章,如未看過前三章的請先看jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-1、jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-2、jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-3。 […]
[…] jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-3 […]
[…] 製作範例沿用前章的範例,未看完前四章的,請先看前四章喔 jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-1、jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-2、jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-3、jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-4。 […]