COCOS：（飞机大战03）绑定触摸方法，控制主角的移动和移动边界的限制

飞机大战知识点总结

1.创建Player.ts文件，把该文件添加到Player组件上

2.编写Player.ts

import { _decorator, Component, EventTouch, Input, input, Node, Vec3 } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('Player')
export class Player extends Component {protected onLoad(): void {// 1. 注册触摸事件input.on(Input.EventType.TOUCH_MOVE,this.onTouchMove,this);}protected onDestroy(): void {// 2.注销触摸事件input.off(Input.EventType.TOUCH_MOVE,this.onTouchMove,this);}// 触摸方法onTouchMove(event:EventTouch){// this.node.position：获取自身Player的位置// event中 getDeltaX()，getDeltaY()：用来获取移动过程中的位置偏移// 通过这个偏移，来控制Player的位置偏移// this.node.setPosition：设置x，y，z轴的位置 const p = this.node.position;this.node.setPosition(p.x+event.getDeltaX(),p.y+event.getDeltaY(),p.z)}
}

上述代码保存在编辑器里运行看下效果，会发现飞机会移动到视图外边，

下边就要限制移动边界的问题

通过触摸移动，得到了4个边界值，x轴为-230和230，y轴为380和-380
有个了这个边界值，需要再把Player.ts优化下代码。

import { _decorator, Component, EventTouch, Input, input, Node, Vec3 } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('Player')
export class Player extends Component {protected onLoad(): void {// 1. 注册触摸事件input.on(Input.EventType.TOUCH_MOVE,this.onTouchMove,this);}protected onDestroy(): void {// 2.注销触摸事件input.off(Input.EventType.TOUCH_MOVE,this.onTouchMove,this);}// 触摸方法onTouchMove(event:EventTouch){// this.node.position：获取自身Player的位置// event中 getDeltaX()，getDeltaY()：用来获取移动过程中的位置偏移// 通过这个偏移，来控制Player的位置偏移// this.node.setPosition：设置x，y，z轴的位置 const p = this.node.position;// 要移动的：目标坐标let targetPos = new Vec3(p.x+event.getDeltaX(),p.y+event.getDeltaY(),p.z);if(targetPos.x < -230){targetPos.x = -230}if(targetPos.x > 230){targetPos.x = 230}if(targetPos.y < -380){targetPos.y = -380}if(targetPos.y > 380){targetPos.y = 380}this.node.setPosition(targetPos)}
}