使用cocos框架制作游戏！

飞机大战

  经过5节的学习制作了飞机大战的demo，效果图如下：

  编辑器使用的是cocosCreator2.4.12,如下图：
！cocosCreator2.4.12

涉及到的知识点：

• 使用cocos框架制作游戏！
  • 飞机大战
• 涉及到的知识点：
  • 名词介绍
  • 移动控制
  • 输入控制
  • 碰撞与动画
  • 常用方法

名词介绍

• 画布(Canvas):引擎一帧一帧渲染其中的内容
• 相机(Camera):相机组件所包含的内容就是是最终游戏画面所显示的内容
• 节点(Node):
  
  各类资源在画布中的名称。节点属性记录了该资源的一些基础属性，如位置，缩放，宽高。各个节点以树状结构联系在一起。
• 锚点(Anchor):计算节点位置所依赖的点，(0.5,0.5)表示节点的中心点
• 坐标(Position):节点的锚点在父节点中的位置，遵循笛卡尔坐标系，(0,0)表示居中
• 组件(Component):
  
  可以挂载在节点上的属性或功能。比如拖拽ts脚本可实现脚本与节点的绑定；也可以点击’添加组件’按钮给节点绑定如’碰撞’,’动画’等
• 场景(Scenes):节点组成场景
• 预制体(Prefab):将绑定好脚本，组件，设置好大小位置的节点拖拽到下方资源管理器中就成了预制体，食用方法：先加载后挂载

移动控制

通过改变节点的position来实现节点的移动,(相对于父节点)

this.node.x = x
this.node.y = y

在子弹飞出的场景下，子弹离开飞机后直直向上飞行，此时：
1.子弹不能是飞机的子节点，否则飞机的移动会影响子弹的移动

输入控制

键盘输入：

cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN,this.onKeyDown,this)  //在onLoad()中绑定
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP,this.onKeyUp,this)

cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN,this.onKeyDown,this) //在onDestroy()中解除绑定
cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP,this.onKeyUp,this)

onKeyDown (event){
    switch(event.keyCode){
        case cc.macro.KEY.a:
            this.accLeft = true;
            break;
        }
}

鼠标输入:

this.node.on(cc.Node.EventType.TOUCH_MOVE,this.onTouchMove,this)  //在onLoad()中绑定

this.node.off(cc.Node.EventType.TOUCH_MOVE,this.onTouchMove,this) //在onDestroy()中解除绑定

onTouchMove(event:cc.Event.EventTouch){
    let dif = event.getDelta()  //该方法获取触点距离上一次事件移动的距离对象，对象包含 x 和 y 属性。
    let newPos = this.node.parent.position.add(new cc.Vec3(dif.x,dif.y,0)) //给飞机节点位置加上移动位置
    this.node.parent.position = newPos
} 
//this.node是飞机的一个子节点，大小超出整个屏幕，意在实现拖动屏幕任意位置都能试飞机移动

碰撞与动画

给节点添加碰撞：
1. 添加碰撞组件，选择碰撞外形
2. 在节点属性中设置分组，在项目设置中设置不同分组的碰撞规则
3. 在节点绑定的脚本中,添加碰撞回调

onCollisionEnter(other,self){
     let anim = this.getComponent(cc.Animation)
     anim.play()  //播放默认动画
     // anim.play('blast',1)  //播放某一个动画，播放一遍
     self.destroy()
     // self.node.parent.removeChild(self.node)
     //console.log('发生了碰撞',other,self)
     //在发生碰撞的节点上会触发该回调，两个传参表示对方节点和自身节点
     //碰撞发生后播放爆炸动画，同时销毁自身，避免再次发生碰撞
     //destroy并不会将素材从画面中移除，将节点从父节点中移除才会将节点图片从画面中移除。
 }

给节点添加动画：

1. 几个关键帧连续播放就形成了动画
2. 可以在动画播放过程中添加回调，比如播放完成后执行节点移除操作。
   

常用方法