十一、攀登不止小游戲制作

制作微信小游戲大致流程與微信小程序、Web類似，不同的在于是組件的使用。我們此節需要完成的小游戲需求為：

• 小球觸碰矩形塊會跳躍或攀爬
• 小球觸碰頂部或底部游戲結束
• 點擊屏幕將會使小球朝著該方向移動
• 小球進行跳躍時分數會增加
• 矩形塊在游戲運行過程中自動下沉
• 游戲結束停止游戲出現按鈕可以重新開始游戲

教程目錄

一、iVX簡介
二、基礎
三、界面介紹
四、WebApp 基礎可視組件
五、Web App 基礎可視組件屬性
六、WebApp 二手信息站點頁面制作
七、功能性組件與事件邏輯
八、后臺與數據庫
九、二手信息站點后臺完成
十、小程序實戰

游戲效果如下：

11.1 完成矩形塊自動下沉

首先我們創建一個微信 2D小游戲：

創建完畢后，我們點擊矩形組件在小游戲中創建一個矩形：

創建完矩形后，點擊對象樹中的矩形對象，更改寬高屬性為 16，使其更美觀：

更改完后由于我們需要矩形塊自動下沉，使用物理世界讓矩形塊擁有物理屬性；擁有物理屬性的矩形塊將會將會受到重力的影響進行下沉。在前臺中添加物理世界，并且將矩形塊添加到物理世界中：

需要使矩形塊擁有物理屬性還需要重要的一步，點擊矩形1組件，在左側的組件欄中點擊物體組件進行添加：

添加完物體組件后，點擊物體組件物體1，在屬性中更改阻尼值，更改阻尼值可以使該物體的阻力發生改變，使其下沉變快或者變慢；在這里我們將阻尼值設置為 1，使其在進行下沉時速度放緩：

更改完后，在游戲運行中該矩形塊將會與小球發生碰撞，我們此時應該更改矩形塊的質量為 99，使其難以被小球的碰撞發生移動：

除了質量外，我們還需固定旋轉角度，使其禁止發生旋轉偏移：

最后改變該矩形塊的顏色為紅色：

此時點擊預覽，該紅色矩形塊將會緩慢進行下沉：

11.2 完成小球在矩形塊上跳躍

點擊橢圓組件，在矩形塊上添加一個小球設置小球的寬高為16，并且添加物體組件：

添加完成后我們還需要為橢圓1其改變質量，使其對矩形組件的影響最小：

此時我們在前臺創建兩個數值變量，一個為記錄小球碰撞的組件標志命名為觸碰組件，另一個為排除組件，排除組件用于排除不跳躍的矩形塊，為接下來的制作做準備：

接下來我們為矩形添加一個事件，該事件用作判斷橢圓1組件觸碰到的矩形類別。設置事件為觸碰觸發，觸發后為矩形邊路進行賦值：

在此我們將該矩形的背景色更改為紅色，在此我們規定：紅色矩形塊的目標值為1、橙色矩形塊的目標值為2、藍色矩形塊的目標值為3、綠色矩形塊的目標值為4。

設置之后我們在物理世界中創建一個觸發器，用觸發器定時響應跳躍內容：

接下來我們點擊觸發器，使其能夠進行自動播放：

對該觸發器設置一個事件，事件觸發后開始判斷當前觸碰的物體值是不是排除外的目標，如果不是給該橢圓組件下的物體組件添加一個垂直的速度，該速度為負數，設置為負數將會使該物體有一個向上的力，此時即可完成小球跳躍效果：

但是預覽小游戲后，我們發現該小球一直都會超頂部跳躍：

這是因為我們設置了碰撞值在跳躍后并沒有進行置零，并且還需要為其增加一個條件，判斷觸碰矩形變量值不能為 0，這樣就完成了小球跳躍后只執行一次向上的作用力：

完成該部分后我們復制 3 個矩形塊1，設置為橙、藍、綠的背景色：

此時我們重命名矩形塊的名稱，讓其有辨識度：

接下來在對應矩形的事件中，將對觸碰矩形變量賦值的動作值按照橙色矩形塊的目標值為2、藍色矩形塊的目標值為3、綠色矩形塊的目標值為4 的規則進行修改，在此以橙色矩形塊的事件為例：

接著我們手動更改排除組件變量的值為 2：

此時小球若碰到 2 代表的橙色矩形塊將不會進行跳躍。

11.3 完成小球的移動

此時我們需要將小球移動到黃色矩形塊上演示黃色矩形塊不進行跳動。在此我們在前臺添加事件，當鼠標或手指按下某個位置時使小球朝著該方向平移。我們先創建一個變量命名為按下x，該變量用于記錄按下的 x 坐標：

之后在事件中為其賦值：

完成后，我們判斷按下的位置在小球的左側還是右側，若在左側小球則往左側移動，若在右側小球則往右側移動。判斷按下未知是否在小球左側還是右側只需要使用小球 x 坐標減去按下位置的 x 值，結果為負數則表示按下在右側，若按下位置的值為正數則表示按下的位置在小球的左側，之后在設置一個數值變量命名為方向，值 1 表示往左側移動，值 2 表示往右側進行移動：

接下來在觸發器中進行判斷，方向為 1 則橢圓 x 坐標減少值，方向為 2 則橢圓 x 坐標增加值：

此時即可完成小球移動：

11.4 完成矩形重復生成

此時這些矩形會一直下降，接下來我們需要矩形到達底部后自動在頂部進行創建。在底部創建一個矩形，命名為底部，添加物體組件固定其位置：

接下來為所有跳躍矩形設置一個碰撞事件，當矩形到達底部后自動調整 y 值位置，在此設置 y 值為 36，在此以紅色矩形為例：

現在我們可以創建多個矩形，完成界面的編排。復制多個矩形，使用鼠標移動到對應的位置：

隨后即可完成矩形自動創建：

最后創建一個變量名為隨機 x ，使每次矩形復位后重新生成 x 位置值游戲將更多趣味性：

11.4 完成分數計數

接下來我們添加分數記錄需要創建一個變量命名為分數，當小球進行一次跳躍時我們就為其分數加一：

在觸發器的小球跳躍的事件中，添加動作將分數進行增加：

我們再到前臺中創建兩個文本，用于分數的顯示，并且在分數增加的動作中設置一個文本的內容為分數變量的值：

11.5 設置隨機不可跳躍矩形

設置隨機不可跳躍矩形我們需要使用一個時間變量，在界面中添加一個時間變量以及一個數值變量命名為記錄時間用于時間記錄：

在前臺中添加一個事件，當界面進行資源加載時記錄一個時間秒數：

接下來我們在觸發器中判斷記錄當前時間減去記錄時間是否大于 10 秒，若大于則給排除組件賦值一個隨機數，該隨機數最小為 1 最小為 4，此時即可完成隨機排除組件標志：

此時還需要注意在進行隨機組件排除后，還需記錄時間變量重新設置值方便排除組件變量之后值的隨機變換：

此時為了方便給玩家知道當前排除的組件，我們在觸發器中設置幾個條件，當排除組件值等于 1、2、3、4值時給與底部矩形塊一個顏色值，使其可以用作提示：

11.6 設置觸碰底部游戲結束

當小球掉到底部時游戲提示游戲結束，我們給底部設置一個事件，當觸碰小球暫停物理世界以及觸發器：

此時將會停止該游戲物理世界級觸發器運行事件：

停止游戲后我們應該出現停止游戲的文本，并且有一個重新開始按鈕。在頁面中增加文本與按鈕組件：

我們此時對其應該設置隱藏，點擊可見按鈕即可：

隨后在停止游戲時將其開啟可見：

隨后為重新開始按鈕其添加重啟事件，首先將文本設置隱藏：

隨后使物理世界、觸發器重新播放、分數歸零、小球位置重置：

最后增加游戲復雜度，復制底部重命名為頂部，此時頂部矩形將會擁有底部事件，我們只需要在觸發器中增加頂部改變其排除組件的顏色即可：

最后即可完成游戲效果。