Cocos Creator入门实战：桌球小游戏

Cocos Creator入门实战：桌球小游戏

转载请保留原文链接：https://blog.csdn.net/zzx023/article/details/90035153

本篇主要是希望能够通过Cocos Creator实现一个桌球小游戏，从而能够让大家更好的了解以及运用Creator的物理系统

由于游戏比较简单，同时代码量也极少，因此就集中在一篇文章里面了。因此会长一些，有兴趣的同学麻烦耐心食用

开始之前

在开始桌球小游戏之前，我们需要对creator有一定了解以及熟悉，对js语法有一定的了解。在开始同样还是希望大家能够仔细的阅读一遍官方文档，以便理解。

所涉及到的知识点参考：
物理系统，UI系统，监听和发射事件，动作列表，预制体Prefab，图集资源

ps：本项目所使用的Cocos Creator版本为v2.0.9

开启物理系统

为了尽量达到真实的效果，我们对于桌球的运动均采用物理模拟来实现。
在Cocos Creator中物理系统是默认关闭的，我们可以通过下面的代码来开启物理系统

let physicsManager = cc.director.getPhysicsManager();
physicsManager.enabled = true;

同时我们也可以通过设置debugDrawFlags来开启一些调试信息的显示，方便我们开发预览

cc.director.getPhysicsManager().debugDrawFlags = cc.PhysicsManager.DrawBits.e_aabbBit |
    cc.PhysicsManager.DrawBits.e_pairBit |
    cc.PhysicsManager.DrawBits.e_centerOfMassBit |
    cc.PhysicsManager.DrawBits.e_jointBit |
    cc.PhysicsManager.DrawBits.e_shapeBit
    ;

这里我建议将物理系统的开启以及各个属性的设置统一开发为一个组件，这样可以方便我们在属性面板中管理物理系统的属性以及各个调试开关，同时这样的一个物理系统组件比较独立，在日后其他需要使用到物理系统的场景或者是其他项目中，都可以很方便的进行复用。

创建一个叫做"PhysicsManager.js"的脚本，代码如下：

/**
 * 物理引擎管理组件
 */
 
cc.Class({
    extends: cc.Component,

    properties: {
       active: { 
           default: true,
           tooltip: '是否启用物理引擎',
       },
       aabb:{
           default: true,
           tooltip: '是否显示包围盒',
       },
       pair: {
           default: true,
       },
       centerOfMass: { 
           default: true,
           tooltip: '是否显示中心点'
       },
       joint: { 
           default: true,
           tooltip: '是否显示关节连接线'
       },
       shape: {
           default: true,
           tooltip: '是否填充形状'
       },
       mouseJoint: {
           default: false,
           tooltip: '是否开启鼠标关节，可以拖动动态刚体'
       },
       gravity: {
           default: cc.v2(0,-960),
           tooltip: '重力'
       }
    },

    onEnable() {
        //开启或关闭物理系统
        let physicsManager = cc.director.getPhysicsManager();
        if (physicsManager.enabled && this.active) {
            cc.warn('The physical system is enabled！');
        }
        ph