jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-4
第四章我們要教學在遊戲增加開始的按鈕，以及當角色走到底後的結束、重新啟動功能。
歡迎來到玩轉芋圓部落格網站，你有全家全盈+PAY 註冊好禮未領取！註冊就送全家美式咖啡 ☕ →點我領取
此章節接續前三章，如未看過前三章的請先看jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-1、jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-2、jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-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即可。
分數顯示的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 把部落格文章帶著走！
★wanchen畫的line貼圖
實用橘貓貼圖 Orange cat オレンジ ねこ→前往貼圖
★預訂門票行程推薦klook
★買藥妝必領 日本藥妝家電優惠
Japantaxi 「88DFB5」日本計程車折價券 ¥500jpy
Amazon 日本亞馬遜 挖寶購物好好買
美國亞馬遜 Amazon 刴手勸敗
★飯店訂房
agoda限定優惠台灣人高使用率訂房網站
booking中文訂房全球旅遊玩透透
★機票預訂
skyscanner機票比價快速好用找便宜機票
★其他優惠
GLOBAL WiFi上網分享器租借8折
klook
[…] jQuery遊戲製作教學-類似馬力歐的吃金幣遊戲-4 […]