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

  •  
  •  
  •  
  •  

第四章我們要教學在遊戲增加開始的按鈕,以及當角色走到底後的結束、重新啟動功能。

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

此章節接續前三章,如未看過前三章的請先看jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-1jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-2jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-3

加入”開始遊戲”畫面

開始遊戲HTML

在stage的HTML內加入以下HTML,包含遊戲結束的畫面一起加入,稍後會用到。

<div class="stage-control">
            <div class="stage-control-start button">
                開始遊戲
            </div>
            <div class="stage-control-text">
                <p>你獲得</p>
                <p class="big"><span class="stage-control-text-endScore">0</span> 分</p>
            </div>
            <div class="stage-control-reStart button">
                重新遊戲
            </div>
            
        </div>

開始遊戲的CSS

加入開始遊戲畫面的CSS,這些CSS也包含遊戲結束的CSS,之後會用到。

.stage-control { position: absolute; top:0; left: 0; padding-top: 20%; width: 100%; height: 100%; text-align: center; z-index: 20; background: rgba(0,0,0,0.65) }
.stage-control .button { display: block; margin: 0 auto; padding: 0; width: 70%; border-radius: 20px; font: 20px/2 "微軟正黑體"; color: #fff200 ; border:1px solid #fff200; transition: .5s; cursor: pointer;  }
.stage-control .button:hover { color: #000; background: #fff200; }
.stage-control .stage-control-reStart { display: none; }
.stage-control-text { display: none; font: 50px /50px "arial"; color: #fff200 ;   }

開始遊戲的javaScript

加入以下三個變數,方便之後使用

var stageControl = $(".stage-control");
 //遊戲按鈕背景
var startButton = $(".stage-control-start");
 //開始遊戲按鈕
var reStageButton = $(".stage-control-reStart"); //結束遊戲按鈕

刪除語法中的以下,讓遊戲不會直接執行。

gameRun = setInterval(function() {
            start();
        }, 50)

在playerControl()的函數內,加入以下語法,讓開始遊戲按鈕被按下後,遊戲才會開始。

startButton.click(function() {
        stageControl.fadeOut();
        $(this).hide();
        gameRun = setInterval(function() {
            start();
        }, 50);
    });

完成!


製作遊戲結束畫面

目前角色走到底後,背景會一直重複,不會停止。因此我們要改成讓背景捲到底後,遊戲結束,出現分數畫面以及”重新遊戲”按鈕,如下範例:

遊戲結束、分數的HTML

因為遊戲結束按鈕的HTML是跟開始遊戲一起的,所以前方已經有加入過了喔,目前我們在 stage內加入以下,分數的HTNL即可。

0

分數顯示的CSS

請加入分數顯示的CSS語法,如下。

.stage-score { position: absolute; top:0; left: 0; width: 100%;  font: 50px /50px "arial"; color: #fff200 ; text-align: center; z-index: 6; background: rgba(0,0,0,0.5); }

遊戲結束的javaScript

請先加入分數顯示的變數

var score = $(".stage-score");

在javaScript內新增一個gameEnd()遊戲結束的函數

function gameEnd() {
    clearInterval(gameRun); //場景走到尾。即停止clearInterval。
    $(".stage-control-text").show() //遊戲結束字顯示
    $(".stage-control-text-endScore").text( score.text() ); //總分放入分數
    stageControl.fadeIn(); //結尾視窗出現
    reStageButton.show(); //重新遊戲按鈕出現
};

請在playerControl()函數內新增以下重新遊戲按鈕的語法。

 reStageButton.click(function() {
        location.reload();
    });

再來要取消,場景捲動到底後會重複捲動的js,請在floorMov()函數內找到以下語法,並刪除。

stageFloor.css({
                "left": nowL - (speed / 2.5)
            });

以上刪除的語法改為以下:

gameEnd();

完成!

這樣就可以在底部捲到底時,啟動遊戲結束的函數囉!

jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-5(結束)

玩轉芋圓讀者優惠專區

★喜歡玩轉芋圓旅遊手札嗎?歡迎下載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


  •  
  •  
  •  
  •  

One thought on “jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-4

Add yours

發表迴響

Up ↑