在切水果游戲中，我們需要從下方向上斜拋出水果。這時候就需要使用拋物線物理仿真。

1. 創(chuàng)建項目、導(dǎo)入資源、編輯游戲場景

具體場景在此不過過多闡述，需要源碼的可以聯(lián)系我們。

2.組件化開發(fā)流程

【1】創(chuàng)建一個類，自定義腳本js。

【2】實例化這個類，得到這個類的實例。【添加組件】、addComponent。

【3】執(zhí)行原理：加載游戲場景 → 遍歷節(jié)點樹 → 加載節(jié)點上所有組件 → 游戲引擎調(diào)用組件中的onLoad方法、start方法 → 每次更新都會調(diào)用update(dt)方法。

新建game_mgr，代碼如下：

// 定義了一個class, new 構(gòu)造函數(shù)() cc.Class({ ? ?// 組件類 ? ?extends: cc.Component, ? ?// 屬性列表，可以通過編輯器修改設(shè)置，注意點：在properties中改無效 ? ?properties: { ? ? ? ?is_debug: false, ? ? ? ?speed: 100, ? ? ? ?pos: cc.v2(0, 0), ? ?}, ? ?// 第一次運行之前調(diào)用 ?組件實例.start ? ?start () { ? ? ? ?// this--> 當(dāng)前組件實例, ?this.node --> 當(dāng)前組件實例所在的節(jié)點; ? ? ? ?// 調(diào)用引擎的API，來做游戲控制; ? ? ? ?console.log("start:", this, this.node); ? ?}, ? ?// 每次刷新的時候調(diào)用; 組件實例.update; ? ?// dt : 與幀頻有關(guān)、平均時間（不是每次都相同） ? ?// 保證不同手機顯示效果一致，保證是勻速平滑進行 ? ?update (dt) { ? ? ? ?console.log(dt); ? ?}, });

在Canvas節(jié)點上，【添加組件】-【用戶腳本組件】-game_mgr。

在properties中添加屬性，且通過編輯器綁定：

apple : { type : cc.Node, default : null, }，

在update方法中添加如下代碼：

// 為什么非得用dt，不用會導(dǎo)致什么問題？ // 【1】因為不同手機幀頻不一樣，保證不同手機顯示效果一致！ // 60FPS的手機會比30FPS的手機運動距離多一倍 // 【2】因為dt每次都不一樣，保證同一手機是勻速運動 //this.apple.x += this.speed; this.apple.x += this.speed * dt;

3.拋物線物理仿真實現(xiàn)

重力加速g:

Vy = v0 + g * t;

h = v0 * t + 0.5 * g * t * t;

斜拋運動：

分解到水平上: 勻速直線運動;

分解到豎直方向: 勻變速直線運動 (加速度)。

4. 自定義用戶腳本類throw_action.js

properties: { ? ?G: -160, ?// 重力加速度 ? ?speed: 200, // 初速度大小 ? ?degree: 45, // 拋射角度 ? ?play_onload: false, },

在start方法中根據(jù)是否需要在加載的時候就執(zhí)行，調(diào)用相應(yīng)方法：

start () { ? ?this.is_moving = false; // 標(biāo)記這個物體是否移動; ? ?if (this.play_onload) { // 執(zhí)行拋物線這個運動 ? ? ? ?this.throw_aciton(); ? ?} }, throw_aciton() { ? ?var r = this.degree * Math.PI / 180; ? ?this.vx = this.speed * Math.cos(r); ? ?this.vy = this.speed * Math.sin(r); ? ?this.is_moving = true; },

在throw_action中實質(zhì)只是修改設(shè)置相關(guān)的關(guān)鍵參數(shù)（速度分量、移動狀態(tài)），具體動態(tài)效果在update(dt)方法中執(zhí)行，因為每隔一段時間會刷新一次。

update (dt) { ? ?if (this.is_moving === false) { ? ? ? ?return; ? ?} ? ?// 水平方向運動（勻速直線運動） ? ?var sx = this.vx * dt; ? ?this.node.x += sx; ? ?// 豎直方向運動（勻變速直線運動） ? ?var sy = this.vy * dt + 0.5 + this.G * dt * dt; ? ?this.vy = this.vy + this.G * dt; ? ?this.node.y += sy; ? ?// 當(dāng)前節(jié)點（蘋果）的坐標(biāo)轉(zhuǎn)換為世界坐標(biāo)（參考原點為左下角） ? ?var w_pos = this.node.convertToWorldSpaceAR(cc.v2(0, 0)); ? ?if (this.out_of_screen(w_pos)) { ? ? ? ?this.node.removeFromParent(); ? ? ? ?console.log("removed"); ? ?} }, out_of_screen(w_pos){ ? ?return w_pos.x < 0 || w_pos.x > cc.winSize.width || ? ? ? ?w_pos.y < 0 || w_pos.y > cc.winSize.height; },

如果蘋果超出屏幕顯示區(qū)域，應(yīng)該移出。

5. 添加組件到apple節(jié)點上

運行結(jié)果如下：

發(fā)現(xiàn)蘋果速度小了，改properties中的值200為400，編譯發(fā)現(xiàn)運行無變化?。槭裁?？

要么在編輯器中修改，要么在onLoad方法或start方法中修改。而且優(yōu)先級start>onLoad>編輯器。

6. 隨機不斷拋出蘋果

修改update(dt)方法中的代碼如下：

if (this.out_of_screen(w_pos)) { ? ?//this.node.removeFromParent(); ? ?//console.log("removed"); this.is_moving = false; ? ?this.re_show(); }

重新顯示蘋果的代碼如下：

re_show(){ ? ?if(this.is_moving){ ? ? ? ?return; ? ?} ? ?// [負(fù)屏幕寬度一半,屏幕高度一半) 例如[-200,200) ? ?var x = Math.random() * cc.winSize.width - cc.winSize.width / 2; ? ?var y = -cc.winSize.height * 0.5 + 50; ? ?this.node.setPosition(x, y); ? ?this.speed = Math.random()*300 + 200; ? // [200,500) ? ?this.degree = Math.random()*45 + 45; ? ?// [45,90) ? ?this.throw_aciton(); },

如果是在運動中，不要重新出現(xiàn)新蘋果。

當(dāng)蘋果超出屏幕區(qū)域后，移動狀態(tài)切換為false。然后，進入到re_show方法中，條件才不會被攔截，所以會設(shè)置蘋果到新的位置（從屏幕下方拋出，錨點在屏幕中心）。設(shè)置拋出速度、角度，然后調(diào)用throw_action()方法即可。方法throw_action中會重新計算速度分量，切回將運動移動狀態(tài)修改為true，如此update方法中又能根據(jù)運動狀態(tài)進行相關(guān)刷新，動態(tài)顯示了。

7.細(xì)節(jié)優(yōu)化

發(fā)現(xiàn)蘋果沒有完全離開屏幕就消失了，還有一半遺留在屏幕就消失了。

out_of_screen(w_pos){ ? ?/*return w_pos.x < 0 || w_pos.x > cc.winSize.width || ? ? ? ?w_pos.y < 0 || w_pos.y > cc.winSize.height;*/ ? ?var apple_width = this.node.width/2; ? ?var apple_height = this.node.height/2; ? ?return w_pos.x < -apple_width ?

|| w_pos.x > cc.winSize.width + apple_width

|| w_pos.y < -apple_height

|| w_pos.y > cc.winSize.height + apple_height; },

如上修改即可，因為蘋果的錨點也在中心，要完全離開，還需要考慮蘋果的寬和高！

8.微信小游戲打包發(fā)布

不做具體描述。

更多資源和課程下載請點擊：

https://bycwedu.vipwan.cn/promotion_channels/630597732