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

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

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

教程目錄

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

游戲效果如下：

文章目錄

十一、攀登不止小游戲制作
- 教程目錄
- - 11.1 完成矩形塊自動下沉
  - 11.2 完成小球在矩形塊上跳躍
  - 11.3 完成小球的移動
  - 11.4 完成矩形重復生成
  - 11.4 完成分數計數
  - 11.5 設定隨機不可跳躍矩形
  - 11.6 設定觸碰底部游戲結束

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 表示往右側進行移動：