遥感类,给遥感注册事件,使遥感能正常移动joystick:
1 cc.Class({ 2 // 扩展自cc.Component组件 3 extends: cc.Component, 4 5 // 属性列表 6 properties: { 7 // 定义遥感 8 stick: { 9 type: cc.Node, 10 default: null, 11 }, 12 13 // 遥感最大可拖拽距离 14 max_R: 100, 15 }, 16 17 // 开始运行之前会被调用; 引擎 调用 组件实例.start 18 start () { 19 // 定义方向向量 20 this.dir = cc.v2(0, 0); 21 22 // 定义遥感初始位置 23 this.stick.setPosition(cc.v2(0, 0)); 24 // this--> 当前组件实例, this.node ---> 当前组件实例所在得节点; 25 // 给遥感注册事件 26 this.stick.on(cc.Node.EventType.TOUCH_START, function(e) { 27 console.log("TOUCH_START 触发事件!"); 28 }.bind(this), this); 29 30 this.stick.on(cc.Node.EventType.TOUCH_MOVE, function(e) { 31 var screen_pos = e.getLocation(); // Api --> 触摸的坐标, 左下角; 32 // 触摸坐标在当前节点所处的位置 33 var pos = this.node.convertToNodeSpaceAR(screen_pos); 34 35 // Api, 触摸两点之间滑动的距离 36 var len = pos.mag(); 37 38 // 方向向量赋值 39 this.dir.x = pos.x / len; // cos(r) 40 this.dir.y = pos.y / len; // sin(r) 41 42 // 当遥感拖拽距离大于允许行动的最大距离后 43 if (len > this.max_R) { 44 // x_new/x = y_new/y = this.max_R/len 45 pos.x = pos.x * this.max_R / len; 46 pos.y = pos.y * this.max_R / len; 47 } 48 // 把当前节点赋值给遥感 49 this.stick.setPosition(pos); 50 51 }.bind(this), this); 52 53 // 当手指离开遥感时,遥感归0,方向向量归0 54 this.stick.on(cc.Node.EventType.TOUCH_END, function(e) { 55 this.stick.setPosition(cc.v2(0, 0)); 56 this.dir = cc.v2(0, 0); 57 }.bind(this), this); 58 59 this.stick.on(cc.Node.EventType.TOUCH_CANCEL, function(e) { 60 this.stick.setPosition(cc.v2(0, 0)); 61 this.dir = cc.v2(0, 0); 62 }.bind(this), this); 63 64 }, 65 66 67 68 // 每次刷新得时候调用; 引擎 调用组件实例.update 69 update (dt) { 70 // console.log("update"); 71 }, 72 });
遥感控制类,通过移动遥感来控制物体运动,本案例以坦克为控制对象tank:
1 // 导入joystick 2 var joystick = require("joystick"); 3 4 cc.Class({ 5 extends: cc.Component, 6 7 properties: { 8 stick: { 9 type: joystick, 10 default: null, 11 }, 12 13 speed: 200, // 坦克移动的速度 14 }, 15 16 start () { 17 18 }, 19 20 update (dt) { 21 22 if(this.stick.dir.x === 0 && this.stick.dir.y === 0) { // 完全没有方向返回 23 return; 24 } 25 26 // this.stick.dir.x = this.vx / this.speed; 27 // 速度分解x轴运动,y轴运动 28 this.vx = this.speed * this.stick.dir.x; // cos(r) 29 this.vy = this.speed * this.stick.dir.y; // sin(r) 30 31 var sx = this.vx * dt; 32 var sy = this.vy * dt; 33 34 this.node.x += sx; 35 this.node.y += sy; 36 37 // 求遥感弧度,用反三角函数, x轴到该点的弧度 38 var r = Math.atan2(this.stick.dir.y, this.stick.dir.x); 39 40 // 角度转弧度 π/180×角度 41 // 弧度变角度 180/π×弧度, Math.PI = π 42 var degree = (r / Math.PI) * 180; 43 44 // 360 - degree 顺时针转换成逆时针,因为在数学角度是逆时针,在程序环境中是逆时针 45 // + 90 因为在数学上的0度是水平向右,但在程序环境中是垂直向上为0度,所以此处+90。 46 degree = 360 - degree + 90; 47 // 把这个角度赋值给坦克 48 this.node.rotation = degree; 49 50 51 }, 52 });
遥控控制坦克链接如下:
链接:https://pan.baidu.com/s/14zMj0-ltV6dgOmN98zhSDw
提取码:snc7