HTML5遊戲開發進階 2 ：建立基本的遊戲世界

CopperDong發表於2018-02-09

https://github.com/apress/pro-html5-games

需要用到的所有關鍵元件---啟動畫面、載入畫面、預載入器、主選單、視差滾動、聲音、基於Box2D引擎的物理模擬、記分牌。有了這樣一個基本框架，你就能夠在自己的遊戲中反覆使用它們。

2.1 基本HTML佈局

包括以下圖層：

啟動畫面：頁面載入時顯示。
遊戲開始畫面：包含主選單，允許玩家開始遊戲或進行遊戲設定。
載入/程式畫面：包含載入進度條，當遊戲正在載入資源（如影像和聲音檔案）時顯示。
主畫面：實際的遊戲畫面。
計分板：主畫面頂部的小塊區域，顯示若干個按鈕和計分情況。
結束畫面：每一關結束時的畫面。

2.2 建立啟動畫面和主選單

基本框架（index.html）及新增的圖層，定義了id為gamecontainer的div元素作為遊戲容器。遊戲容器包含了每一個遊戲圖層（gamelayer class）：gamestartscreen（開始選單）、levelselectscreen（關卡選擇介面）、loadingscreen（載入畫面）、計分板（scorescreen）、結束畫面（endingscreen）和主畫面（gamecanvas）。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Froot Wars</title>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/game.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
  </head>
  <body>
    <div id="gamecontainer">
      <canvas id="gamecanvas" width="640" height="480" class="gamelayer"></canvas>
      <div id="scorescreen" class="gamelayer">
        <img id="togglemusic" src="images/icons/sound.png">
        <img src="images/icons/prev.png">
        <span id="score">Score: 0</span>
      </div>
      <div id="gamestartscreen" class="gamelayer">
        <img src="images/icons/play.png" alt="Play Game"><br>
        <img src="images/icons/settings.png" alt="Settings">
      </div>
      <div id="levelselectscreen" class="gamelayer">
      </div>
      <div id="loadingscreen" class="gamelayer">
        <div id="loadingmessage"></div>
      </div>
      <div id="endingscreen" class="gamelayer">
        <div>
          <p id="endingmessage"> The Level Is Over Message<p>
          <p id="playcurrentlevel"><img src="images/icons/prev.png" >Replay Current Level</p>
          <p id="playnextlevel"><img src="images/icons/next.png"> Play Next Level </p>
          <p id="showLevelScreen"><img src="images/icons/return.png"> Return to Level Screen</p>
        </div>
      </div>
    </div>
  </body>
</html>

style.css，樣式表：

定義遊戲容器以及其中所有的遊戲圖層的尺寸為640px X 480px
保證所有的遊戲圖層以絕對位置佈局（它們互相重疊），這樣就可以根據需要顯示/隱藏和重疊這些圖層。預設情況下，這些圖層都是隱藏。
將遊戲容器的背景設定為啟動畫面影像，當頁面載入時，玩家第一眼看到的就是該影像。
為遊戲開始畫面新增一些樣式，開始畫面中有“開始遊戲”、“更改設定”等選單項。

#gamecontainer {
	width: 640px;
	height: 480px;
	background: url(images/splashscreen.png);
	border: 1px solid block;
}
.gamelayer {
	width: 640px;
	height: 480px;
	position: absolute;
	display: none;
}
/* 開始選單畫面 */
#gamestartscreen {
	padding-top:250px;
	text-align:center;
}
#gamestartscreen img{
	margin:10px;
	cursor:pointer;
}

js/game.js

var game = {
    //開始初始化物件，預載入資源，並顯示開始畫面
    init: function(){
        //隱藏所有的遊戲圖層，顯示開始畫面
        $('.gameplayer').hide();
        $('#gamestartscreen').show();
        //獲取遊戲畫布及其繪圖環境的引用
        game.canvas = $('#gamecanvas')[0];
        game.context = game.canvas.getContext('2d');
    },
}

$(window).load(function() {
    game.init();
});

2.3 關卡選擇

當玩家單擊PLAY按鈕後，遊戲應當顯示一個關卡選擇畫面和一系列可玩的關卡。

建立一個物件來處理關卡。這個物件既包含了關卡中的資料，又提供了一些簡單的函式來對關卡進行初始化。

2.4 載入影像

完成關卡之前，需要實現圖形載入器和載入畫面。

設計一個簡單的載入畫面，它包含一張進度條GIF動畫圖片和顯示已載入影像數目的文字。

2.5 載入關卡

首先載入遊戲的背景、前景和彈弓影像

/* 關卡選擇畫面 */
#levelselectscreen {
	padding-top: 150px;
	padding-left: 50px;
}
#levelselectscreen input {
	margin: 20px;
	cursor: pointer;
	background: url(images/icons/level.png) no-repeat;
	color: yellow;
	font-size: 20px;
	width: 64px;
	height: 64px;
	border: 0;
}
/* 載入畫面 */
#loadingscreen {
	background: rgba(100,100,100,0.3);
}
#loadingmessage {
	margin-top:400px;
	text-align:center;
	height: 48px;
	color:white;
	background:url(images/loader.gif) no-repeat center;
	font:12px Arial;
}
/* 計分板 */
#scorescreen {
	height: 60px;
	font: 32px Comic Sans MS;
	text-shadow: 0 0 2px #000;
	color: white;
}
#scorescreen img{
	opacity: 0.6;
	top: 10px;
	position: relative;
	padding-left: 10px;
	cursor: pointer;
}
#scorescreen #score {
	position: absolute;
	top: 5px;
	right: 20px;
}

2.6 動畫

使用requestAnimationFrame，並在一秒內多次呼叫繪圖和動畫程式碼

視差滾動是一種利用背景影像移動得比前景影像慢，而產生立體錯覺的技術。這項技術說明了一個事實，即遠處的物體看上去比近處的移動得快。

2.7 處理滑鼠輸入

利用JavaScript中的幾個事件來捕捉滑鼠輸入---mousedown, mouseup和mousemove。為了簡單，我們利用jQuery建立一個獨立的mouse物件，以處理所有的滑鼠事件

mouse物件的init()方法為滑鼠移動、滑鼠按下、滑鼠鬆開和滑鼠離開畫布區域等事件繫結了響應方法

2.8 設定遊戲階段

將遊戲的當前階段儲存到game.mode變數中：

intro：關卡剛剛載入，遊戲將在整個關卡範圍中平移遊戲畫面，向玩家展現關卡中的所有東西
load-next-hero：檢查是否有下一個英雄可以裝填到彈弓上去，如果有，裝填該英雄。如果我們的英雄耗盡了而壞蛋卻沒有被全部消滅，關卡就結束了。
wait-for-firing：將視野移回到彈弓，等待使用者發射“英雄”。此時，遊戲正在等待使用者單擊英雄。在這個階段，使用者可以也很有可能用滑鼠拖拽畫面，檢視整個關卡。
firing：這個階段中，使用者已經單擊了英雄，但還沒有釋放滑鼠按鍵。此時，遊戲正在等待使用者拖拽英雄，調整角度和位置並釋放英雄。
fired：使用者釋放了滑鼠按鍵併發射英雄之後進入這個階段。此時，遊戲將所有的事情交給物理引擎來處理，使用者僅僅在觀看。遊戲畫面會隨著發射出的英雄平移，這樣使用者就可以追蹤英雄的軌跡。