结构

打开工程文件后，其主要的目录结构列表应该为：

.
├── dev.html
├── index.html
├── media
│   └── logo.png
└── src
    ├── engine
    │   ├── analytics.js
    │   ├── audio.js
    │   ├── camera.js
    │   ├── core.js
    │   ├── debug.js
    │   ├── keyboard.js
    │   ├── loader.js
    │   ├── particle.js
    │   ├── physics.js
    │   ├── pixi.js
    │   ├── pool.js
    │   ├── renderer.js
    │   ├── scene.js
    │   ├── storage.js
    │   ├── system.js
    │   ├── timer.js
    │   └── tween.js
    └── game
        ├── config.js
        └── main.js

其中

• dev.html - 是承载canvas画布的web页面，我们开发时所有的调试效果演示均由该页面呈现，可以理解为调试页面（具体代码内容说明参考后续章节）。

• index.html - 是完成某些功能效果后发布时所使用的web页面，开发时尽量不要修改该文件的内容，因为它是发布时由panda.js的打包指令"$ panda build"根据dev.html内容生成的（注意：如果安装时选择了第二种方法，该指令将不可用）。

• media/ - 该路径是panda.js默认指定存放媒体资源的路径，在程序中用到的图片、音频、视频、json文件等均可存放于此，避免了过长的路径引用。

• src/ - 该路径下包含的所有的js文件。其中，engine路径下存放有该引擎的所有库文件源码；game路径下存放所有与游戏逻辑相关的js文件，config.js是游戏引擎的配置文件，可以自定义引擎的诸多属性；main.js是主要的游戏逻辑编写文件。

综上所述：

使用该引擎的大体规则就是 - 在config.js中配置画布的整体属性；在main.js中通过调用engine路径下各库文件提供的引擎功能接口，编写画布的用户交互规则与渲染效果；最终由dev.html文件按顺序引用上述js文件，实现各文件之间的功能调用。

了解了文件组织结构，如何演示画布效果呢？参考下一节