cocos creato制作一个微信小游戏「趣味桌球」

由于游戏用有大量的碰撞, 列如: 桌球间的碰撞, 桌球和球桌的碰撞, 桌球和袋口的碰撞, 所有先打开cocos creator中的物理引擎, 打开enbale_phy.js, 将其挂载到项目根结点上

cc.Class({ extends: cc.Component, properties: { is_debug: false, // 是否显示调试信息; // 重力加速度是一个向量, 有方向的,2D, Vec重力加速度的大小; gravity: cc.p(0, -320), // 系统默认的 }, // use this for initialization onLoad: function () { // 游戏引擎的总控制 // cc.Director, cc.director 区别呢？ // 大写的cc.Director是一个类, 小写cc.direcotr全局的实例 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; }, start: function(){ }, new_game: function(){ cc.director.loadScene("game_scene"); }, // called every frame, uncomment this function to activate update callback // update: function (dt) { // }, });

cc.director.getPhysicsManager().enabled = true; // 开启了物理引擎之后, 接下来就是球杆的制作, 打开cue.js

cc.Class({ extends: cc.Component, properties: { SHOT_POWER: 18, // 力量; }, // LIFE-CYCLE CALLBACKS: // onLoad () {}, start () { this.body = this.getComponent(cc.RigidBody); }, shoot_at(dst) { // 发杆，射向哪个点 // 当前的 球杆,目标连线; var src = this.node.getPosition(); var dir = cc.pSub(dst, src); var len = cc.pLength(dir); // 冲量: 矢量，方向，大小，; var distance = len - this.node.width * 0.5; var p_x = distance * this.SHOT_POWER * dir.x / len; var p_y = distance * this.SHOT_POWER * dir.y / len; this.body.applyLinearImpulse(cc.p(p_x, p_y), this.node.convertToWorldSpaceAR(cc.p(0, 0)), true); }, onPreSolve: function(contact, selfCollider, otherCollider) { this.node.active = false; }, // update (dt) {}, });

这样, 我们在在白球上添加一个触摸事件, 玩家触摸白球后, 调用cue.js中的shoot_at方法

cc.Class({ extends: cc.Component, properties: { min_dis: 20, cue: { // 拿到球杆 type: cc.Node, default: null, }, }, // LIFE-CYCLE CALLBACKS: // onLoad () {}, start () { this.cue_com = this.cue.getComponent("cue"); this.start_x = this.node.x; this.start_y = this.node.y; this.body_rigid = this.getComponent(cc.RigidBody); // START, MOVED, ENDED, CANCEL this.node.on(cc.Node.EventType.TOUCH_MOVE, function(e) { // 点击白球， 移动鼠标， 如果移动距离符合要求， 球杆出现 var w_pos = e.getLocation(); // 或去屏幕坐标; var src = this.node.getPosition(); var dst = this.node.parent.convertToNodeSpaceAR(w_pos); var dir = cc.pSub(dst, src); var len = cc.pLength(dir); if (len < this.min_dis) { // 隐藏球杆，准备放弃; this.cue.active = false; return; } this.cue.active = true; var cue_len = this.cue.width * 0.5; var cue_pos = dst; cue_pos.x = (cue_len) * dir.x / len; cue_pos.y = (cue_len) * dir.y / len; this.cue.setPosition(cue_pos); var r = Math.atan2(dir.y, dir.x); var degree = r * 180 / Math.PI; degree = 360 - degree; this.cue.rotation = degree 180; }.bind(this), this); this.node.on(cc.Node.EventType.TOUCH_CANCEL, function(e) { if (this.cue.active == false) { // 如果是在最小范围内击球, 击球无效; return; } // 发杆; this.cue_com.shoot_at(this.node.getPosition()); }.bind(this), this) }, onBeginContact: function(contact, selfCollider, otherCollider){ if(otherCollider.node.groupIndex == 2){ this.node.scale = 0; this.scheduleOnce(this.reset_ball.bind(this), 1); } }, reset_ball: function(){ this.node.scale = 1; this.body_rigid.linearVelocity = cc.p(0,0); this.body_rigid.angularVelocity = 0; this.node.x = this.start_x; this.node.y = this.start_y; } // update (dt) {}, });

以上, 就是桌球小游戏制作的核心内容

视频教程关注可以领取得到哦