cocos creator 台球小游戏

所用平台：cocos creator
所用语言：js

游戏的实现点：

1.可碰撞物体：以白球、其他球、球袋、球杆、球桌分五类，使用creator内置的操作设置可产生碰撞的节点；添加刚体，以节点形状选择刚体形状。以节点属性选择刚体类型是静态还是动态，其中球袋要多设置一项：
sensor，即不产生碰撞效果，只产生碰撞监测。

2.球杆的移动、拉伸：球杆要随着白球为中心移动，为不接触白球，要设置最小距离，达到此距离则隐藏。以点击点与白球中心得到一个向量，用得到的向量长度拉伸球杆并改变球杆冲量；向量和水平轴的夹角得到球杆旋转度数。

3.白球进洞操作区别其他球：白球缩小尺寸，其他球则在完全隐藏，这样可以继续对白球的操作，同时，对其他球可以通过每帧执行一个函数：检查球桌上是否还有其他球（除白球）来判断游戏胜利。

代码

* 挂在白球节点上 cc.Class({ extends: cc.Component, properties: { cue: { type:
cc.Node,default: null, }, max_dis: 100, min_dis: 5, // 如果拖动的距离到白球的中心 <
这个距离，那么我们就隐藏球杆，否者的话，显示球杆; }, start () { this.body = this
.getComponent(cc.RigidBody);this.cue_inst = this.cue.getComponent("cue"); this
.start_x =this.node.x; this.start_y = this.node.y; this
.node.on(cc.Node.EventType.TOUCH_START,function(e) { }.bind(this), this); this
.node.on(cc.Node.EventType.TOUCH_MOVE,function(e) { var w_pos = e.getLocation();
var dst = this.node.parent.convertToNodeSpaceAR(w_pos);
//相对于this.node.parent（canvas）这个为参照物,AR为原点的坐标，（假设）白球移动到移动到世界坐标为 w_pos
//就是去获得点击点的二维向量 var src = this.node.getPosition();//白球二维向量 var dir =
cc.pSub(dst, src);//向量相减得到的一个方向向量 var len = cc.pLength(dir); if (len < this
.min_dis) {this.cue.active = false; // 设置球杆为隐藏; return; } if (len > this
.max_dis) {this.cue.active = false; // 设置球杆为隐藏; return; } this.cue.active = true
;var r = Math.atan2(dir.y, dir.x);//得到弧度 var degree = r * 180 / Math.PI; degree
=360 - degree; this.cue.rotation = degree + 90; //旋转球杆 var cue_pos = dst; var
cue_len_half =this.cue.width * 0.1;//本来cue的锚点在中心的，应该是* 0.5的 cue_pos.x +=
(cue_len_half * dir.x / len); cue_pos.y += (cue_len_half * dir.y / len);
//使得球杆好像在随着点击点的后移向后拉 this.cue.setPosition(cue_pos); }.bind(this), this); this
.node.on(cc.Node.EventType.TOUCH_END,function(e) { if(this.cue.active === false
) {return; } this.cue_inst.shoot_at(this.node.getPosition());//朝白球方向射击 }.bind(
this), this); this.node.on(cc.Node.EventType.TOUCH_CANCEL, function(e) { if(this
.cue.active ===false) { return; } this.cue_inst.shoot_at(this
.node.getPosition()); }.bind(this), this); }, reset: function() { this
.node.scale =0.35;//当时加入的时候就是0.35 this.node.x = this.start_x; this.node.y = this
.start_y;this.body.linearVelocity = cc.p(0, 0);//线性转速 this.body.angularVelocity
=0;//角转速 }, onBeginContact: function(contact, selfCollider, otherCollider) {
// 白球有可能，碰球杆，碰球，碰边,球袋 if(otherCollider.node.groupIndex == 2) { //
隔1秒一种，要把白球放回原处; this.node.scale = 0;//消失 this.scheduleOnce(this.reset.bind(this
),1);//1秒后白球重置 // end return; } }, // update (dt) {}, });
* 挂在其他球节点上 cc.Class({ extends: cc.Component, //
属性列表，它将会作为组件实例的数据成员，到组件里面,绑定到我们的编辑器上; properties: { value: 1, }, onLoad () {
//每帧比update先 // this,指的就是当前的组件实例 }, start () {//初始化时 // this,指的就是当前的组件实例 this
.body =this.getComponent(cc.RigidBody);//同一节点的其他组件 this.start_x = this.node.x;
this.start_y = this.node.y; }, // dt: 距离上一次刷新的时间; update (dt) {//每帧 //
this,指的就是当前的组件实例 }, reset: function() { this.node.active = true; this.node.x =
this.start_x; this.node.y = this.start_y; this.body.linearVelocity = cc.p(0, 0);
this.body.angularVelocity = 0; }, onBeginContact: function(contact,
selfCollider, otherCollider) { // 白球有可能，碰球杆，碰球，碰边,球袋 if
(otherCollider.node.groupIndex ==2) { this.node.active = false; return; } }, });
* 挂在canvas节点上的游戏引擎 cc.Class({ extends: cc.Component, properties: { is_debug:
false, gravity: cc.p(0, -320), }, // onLoad () {}, onLoad: function() { cc
.director.getPhysicsManager().enabled = true; if(this.is_debug) { var Bits = cc
.PhysicsManager.DrawBits; cc.director.getPhysicsManager().debugDrawFlags = Bits
.e_jointBit | Bits.e_shapeBit; } else cc.director.getPhysicsManager()
.debugDrawFlags = 0; cc.director.getPhysicsManager().gravity = this.gravity; },
// update (dt) {}, });
* 挂在canvas节点上总场景 cc.Class({ extends: cc.Component, properties: { ball_root: {
type: cc.Node,default: null, }, w_ball: { type: cc.Node, default: null, }, },
// onLoad () {}, start () { this.is_game_started = true; }, restart_game:
function() { for(var i = 0; i < this.ball_root.childrenCount; i ++) { var b =
this.ball_root.children[i]; b.getComponent("ball").reset(); } this
.w_ball.getComponent("w_ball").reset(); this.is_game_started = true; },
check_game_over:function() { for(var i = 0; i < this.ball_root.childrenCount; i
++) {var b = this.ball_root.children[i]; if(b.active === true) { return; } }
this.is_game_started = false; // game_over; this.scheduleOnce(this
.restart_game.bind(this), 3); }, update (dt) { if (!this.is_game_started) {
return; } // 是否所有的球都打入进去了; }, });
挂在球杆节点上
cc.Class({ extends: cc.Component, properties: { SHOOT_POWER: 18, // 合适的值就可以了 },
// onLoad () {}, start () { this.body = this.getComponent(cc.RigidBody); },
shoot_at:function(dst) { // 冲量: 给这个球杆一个方向的冲量，矢量，大小，有方向; // 方向问题: src---> dst;
var src = this.node.getPosition();//此时的球杆头位置 var dir = cc.pSub(dst, src);
//dst白球位置 // 大小问题; var cue_len_half = this.node.width * 0.5; var len =
cc.pLength(dir);var distance = len - cue_len_half; // end var power_x =
distance *this.SHOOT_POWER * dir.x / len; var power_y = distance * this
.SHOOT_POWER * dir.y / len;//对该点施加冲量 applyLinearImpulse(冲量大小向量, 球杆的原点转成世界坐标,
true) this.body.applyLinearImpulse(cc.p(power_x, power_y), this
.node.convertToWorldSpaceAR(cc.p(0, 0)), true); }, onPreSolve: function
(contact, selfCollider, otherCollider) { this.node.active = false; }, // update
(dt) {}, });

• « 上一篇：sql注入，一个例子让你知道什么是sql注入
• » 下一篇：docker mysql 时区不对