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

接續前一章節,此章節要開始將背景放入,以及使背景移動。如果沒有看過jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-1,請先觀看喔。
歡迎來到玩轉芋圓部落格網站,最新豐富的美食餐廳與飯店心得,讓你熟知旅行大小事,跟著玩轉芋圓旅遊去!
加入背景以及背景移動
沿用一章步驟
我沿用前一章所製作好的場景,並命名為class是stage開始,如以下範例。
增加背景
增加一個div在stage內,並class命名為stage-floor,相關CSS可以參考以下CodePen語法(可以切CSS與HTML顯示)。
.stage-floor透過CSS的position: absolute;即可以設定跟場景(stage)的座標對齊,如果不懂absolute請回jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-1。
背景解說
.stage-floor { position: absolute; bottom: 0; left: 0; width: 2000px; height: 450px; background: url(https://designcode.today/wp-content/uploads/2020/09/stage-floor-bg-1.png) top center no-repeat; z-index: 3 }
可以看到背景的寬度設為2000px,大於場景的寬度400px,是因為我們要製作成2D卷軸遊戲的感覺,角色往右邊走,場景會往左移動。
隱藏超過場景的背景
因為背景比場景長,所以我們要將未出現在場景的背景隱藏起來,請在場景stage的CSS加入 overflow: hidden; 即可以將超出範圍的背景隱藏。如下範例:
加入jQuery移動場景
芋圓我打算讓場景走到底後,遊戲會自動停止。因此背景的移動會用jQuery來撰寫而不會使用CSS,如下CodePen範例。
var gameRun; //定義一個變數位置,之後setInterval使用。 var speed = 5; //定義速度,所有的背景位移都會以此數字做變化。 var stageFloor = $(".stage-floor"); //將背景 .stage-floor作為變數,方便之後使用。 async function start() { //start函式,程式會一直重複執行start(),來達到移動效果。 function floorMov() { //背景移動函式 var nowL = parseInt(stageFloor.css("left").replace("px"), ""); //取出現在背景的left值 if (nowL > -1600) { //如果座標left值大於-1600,則執行以下 stageFloor.css({ //座標left變更為,現在的left - speed的數字() "left": nowL - (speed / 2.5) }); }else{ stageFloor.css({ "left": 0 //座標left歸0 }); }; }; await floorMov(); //執行floorMov() }; gameRun = setInterval(function() { start(); }, 50); //每50毫秒執行一次 start();
背景錯位效果
為了讓遊戲背景有錯位感覺,因此我們要再用以上的方法再加入一個背景疊在上一個背景的後方,並且移動放慢,讓遊戲移動時有錯位的感覺。
加入stageBg變數,並放入.stage-bg
var stageBg = $(".stage-bg");
為stageBg加入移動的js,同stageFloor,只是數值除以speed更大,因此會移動較慢,形成錯位。
var nowL = parseInt(stageBg.css("left").replace("px"), ""); if (nowL > -1600) { stageBg.css({ "left": nowL - (speed / 5) }); }else{ stageBg.css({ "left":0 }); };
★喜歡玩轉芋圓旅遊手札嗎?歡迎下載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折
發表迴響