《切水果》核心技术：抛物线物理仿真
在切水果游戏中，我们需要从下方向上斜抛出水果。这时候就需要使用抛物线物理仿真。
一、 创建项目、导入资源、编辑游戏场景
具体场景在此不过过多阐述，需要源码的可以联系我们。
二、 组件化开发流程
【1】创建一个类，自定义脚本js。
【2】实例化这个类，得到这个类的实例。【添加组件】、addComponent。
【3】执行原理：加载游戏场景 → 遍历节点树 → 加载节点上所有组件 → 游戏引擎调用组件中的onLoad方法、start方法 → 每次更新都会调用update(dt)方法。
新建game_mgr，代码如下：
// 定义了一个class, new 构造函数()
cc.Class({
// 组件类
extends: cc.Component,
// 属性列表，可以通过编辑器修改设置，注意点：在properties中改无效
properties: {
is_debug: false,
speed: 100,
pos: cc.v2(0, 0),
},
// 第一次运行之前调用 组件实例.start
start () {
// this--> 当前组件实例, this.node --> 当前组件实例所在的节点;
// 调用引擎的API，来做游戏控制;
console.log("start:", this, this.node);
},
// 每次刷新的时候调用; 组件实例.update;
// dt : 与帧频有关、平均时间（不是每次都相同）
// 保证不同手机显示效果一致，保证是匀速平滑进行
update (dt) {
console.log(dt);
},
});
在Canvas节点上，【添加组件】-【用户脚本组件】-game_mgr。
在properties中添加属性，且通过编辑器绑定：
apple : { type : cc.Node, default : null, }，
在update方法中添加如下代码：
// 为什么非得用dt，不用会导致什么问题？
// 【1】因为不同手机帧频不一样，保证不同手机显示效果一致！
// 60FPS的手机会比30FPS的手机运动距离多一倍
// 【2】因为dt每次都不一样，保证同一手机是匀速运动
//this.apple.x += this.speed;
this.apple.x += this.speed * dt;
三、 抛物线物理仿真实现
重力加速g:
Vy = v0 + g * t;
h = v0 * t + 0.5 * g * t * t;
斜抛运动：
分解到水平上: 匀速直线运动;
分解到竖直方向: 匀变速直线运动 (加速度)。
1. 自定义用户脚本类throw_action.js
properties: {
G: -160, // 重力加速度
speed: 200, // 初速度大小
degree: 45, // 抛射角度
play_onload: false,
},
在start方法中根据是否需要在加载的时候就执行，调用相应方法：
start () {
this.is_moving = false; // 标记这个物体是否移动;
if (this.play_onload) { // 执行抛物线这个运动
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中实质只是修改设置相关的关键参数（速度分量、移动状态），具体动态效果在update(dt)方法中执行，因为每隔一段时间会刷新一次。
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;
// 当前节点（苹果）的坐标转换为世界坐标（参考原点为左下角）
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;
},
如果苹果超出屏幕显示区域，应该移出。
2. 添加组件到apple节点上
运行结果如下：
发现苹果速度小了，改properties中的值200为400，编译发现运行无变化！！为什么？
要么在编辑器中修改，要么在onLoad方法或start方法中修改。而且优先级start>onLoad>编辑器。
3. 随机不断抛出苹果
修改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;
}
// [负屏幕宽度一半,屏幕高度一半) 例如[-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();
},
如果是在运动中，不要重新出现新苹果。
当苹果超出屏幕区域后，移动状态切换为false。然后，进入到re_show方法中，条件才不会被拦截，所以会设置苹果到新的位置（从屏幕下方抛出，锚点在屏幕中心）。设置抛出速度、角度，然后调用throw_action()方法即可。方法throw_action中会重新计算速度分量，切回将运动移动状态修改为true，如此update方法中又能根据运动状态进行相关刷新，动态显示了。
4. 细节优化
发现苹果没有完全离开屏幕就消失了，还有一半遗留在屏幕就消失了。
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;
},
如上修改即可，因为苹果的锚点也在中心，要完全离开，还需要考虑苹果的宽和高！
四、 微信小游戏打包发布
略，需要的，可以加群649760436。
