Hype軟件是一款Mac系統上的HTML5制作軟件，在該軟件中，引人注意的是它強大的物理引擎功能和動畫制作功能，作為一個專業的程序員，要制作一款具備物理量的網頁小游戲，少說也要費上一番功夫，更別提非專業編程人員了，但是這些問題，使用上Hype，可以迎刃而解。
下面，小編將使用Hype 4版本，演示如何快速且簡單地制作一個具備元素重力物理量的網頁小游戲，從此教程中，相信大家能感受到Hype的強大與魅力。
一、游戲畫面展示
教程開始前，請大家先跟小編看看最終的網頁游戲效果預覽GIF吧，對將要做的效果進行一個大致的了解。
圖1：網頁游戲效果GIF預覽
游戲玩法是：點擊上方的“reset”文字，會出來一個圓形小球，小球具備重力和彈力，會自然下落，撞到墻或者是杠桿會反彈，玩家通過點擊左邊的L方塊或者右邊的R方塊，彈起小球，一旦小球從正中間掉下，則視為失敗。
了解了玩法以后，針對這個玩法，需要部署好對應的靜態場景，然后使用Hype的物理引擎，對小球施加各種物理量，之后再制作一些動態效果，如顏色漸變，按鈕點擊事件等等，就可以實現這個小游戲啦，下面請大家跟隨小編一起開始進行場景的部署。
二、頁面制作
第一步：該游戲更多是想用于手機端休閑時使用，所以從上圖GIF預覽中可以看出，場景不大，因此，在Hype界面左側中選擇創建一個新場景，然后在“場景檢查器”中，設置場景的大小為“320px
* 568px”,再填充下場景的背景顏色，顏色大家認為舒適即可，小編的背景顏色代碼設置為“#5C131F”，具體如下圖2。
圖2：設置場景大小和顏色
第二步： 點擊“元素”按鈕，選擇矩形，創建四個矩形，然后使用鼠標拉動調整矩形的大小和位置，使得矩形大小和擺放的位置如下圖3紅框所示。
可能看到這里有人有疑惑？為什么要在場景外添加這4個矩形呢，是不是有點多余，反正在場景外也看不到矩形，添加來干嘛？其實不是的，這4個矩形雖然在場景外看不到，但是其主要作用是作為墻壁，為小球提供碰撞的彈力，如果沒有這4個墻壁，小球會直接飛出場景外，因此這4個矩形是有必要的。
圖3：4個矩形作為墻壁
第三步：為上述4個矩形，在元素檢查器中的邊框選項中，添加一個寬度為5px，樣式為實現，顏色為綠色的邊框。
圖4：添加邊框
第四步：在元素按鈕中，添加兩個圓角矩形，并在第一個矩形中輸入L，第二個矩形中輸入R，字體大小為44px。然后在“度量檢查器”中調整兩個圓角矩形的寬度和高度為90px，再在“元素檢查器”中加入邊框，寬度2px，樣式為實現，顏色為朱紅色，最后擺放兩個矩形元素的位置如下圖5。
圖5：加入L和R兩個矩形
第五步：
同樣的，在元素按鈕中，再添加兩個矩形，矩形的寬度為283px，高度為17px，然后加入大小為2px的實線藍色邊框，再在“度量檢查器”中，設置其中一個矩形的旋轉角度(Z,X,Y)為（20,0,0）,另一個矩形的旋轉角度為（-20,0,0），最后擺放兩個矩形在如下圖6所示位置，并確保它們處于同一水平線上即可。
圖6：加入杠桿矩形
第六步：在元素按鈕中，添加一個矩形和橢圓形，然后設置矩形的寬度和高度為79px，并加入2px的實線綠色邊框；設置橢圓形的寬度和高度為48px，并加上2px的實線白色邊框，最后設置0時刻該橢圓形的不透明度為0。這里可以根據自身需要調整橢圓形的大小，大點的話游戲難度自然變小，小點的話游戲難度增大。
完成大小設置以后，拖動元素位置，擺放位置如下圖7。
圖7：加入障礙和小球
第七步： 最后，在元素按鈕中添加一個按鈕，寫入文字“Reset”，設置一個恰當的背景顏色，然后擺放在下圖8紅框位置即可。此按鈕用于點擊時，開始或重置游戲。
圖8：加入Reset按鈕
那么本小節的靜態場景頁面到這里就制作完成了，但是完成場景的制作只能算完成了小游戲的一半，游戲還需要加入一些動態的事件才能算正式完成。在下一節《實例：使用Hype物理引擎制作一個網頁小游戲（二）》中，小編將帶來制作網頁小游戲教程的剩下部分，請大家繼續關注Hype中文網站進行后續學習哦。
