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

2020-09-09   jQuery教學, javascript教學   No comments

接續前一章節，此章節要開始將背景放入，以及使背景移動。如果沒有看過jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-1，請先觀看喔。

Welcome to wanchen travel blog website : )
歡迎來到玩轉芋圓部落格網站，最新豐富的美食餐廳與飯店心得，讓你熟知旅行大小事，跟著玩轉芋圓旅遊去！

加入背景以及背景移動

沿用一章步驟

我沿用前一章所製作好的場景，並命名為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
            });
        };

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

玩轉芋圓讀者優惠專區

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

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

玩轉芋圓app

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

★預訂門票行程推薦klook

★買藥妝必領 日本藥妝家電優惠
Japantaxi 「88DFB5」日本計程車折價券 ¥500jpy
Amazon 日本亞馬遜 挖寶購物好好買
美國亞馬遜 Amazon 刴手勸敗

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

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

★其他優惠
GLOBAL WiFi上網分享器租借8折

, , ,

發表迴響