canvas_easy_draw v1.0.0

为什么会做这个

偶然间接到公司的一个新任务 => 开发小游戏，在已经确定使用 canvas 进行开发之后面临的第一个问题便是：手撸canvas实在是太难和太复杂了😭，一切的原因在我看来皆是canvas的提供的一些API过于底层，由于过去有过一些些 egret 开发经验，与市面上一些第三方库的引导下，在想，我们为什么自己不能开发一套canvas库呢？于是收干就干！

它的优势

• 👽 元素皆对象，画布中每个可见的元素都是一个独立的对象
• 💛 像操作jQuery一样操作canvas中的元素
• ⚡ 支持浏览器的事件系统，点击事情、鼠标移入事件等等
• ☀️ 动画系统接入，像使用Tween.js一样写出优雅的动画

推荐人群

• 当您有一些简单的canvas需求，那么使用它也是一种选择，简单和灵活的api可以让你像写jQuery一样快速的开发您的需求，如：飞机大战、多避障碍。
• 如果您也是canvas爱好者，且正需要一个小工程类的项目练手，那么它是一个非常不错的选择✅！您也可以从0到1 开发一个属于您的npm 库，添加上您自己写的API，通过这个项目，您将会学会：打包、工程化相关知识！

案例演示

用它开发小游戏到底有多简单呢？

使用它，我们可以不到200行实现一个飞机大战✈️

1. 克隆该项目

2. 运行example目录中的游戏案例

   目前已有的游戏案例：

   • 飞机大战
   • 消消乐
   • 像素鸟

(如果觉得不错 👍，给个star ⭐吧，你的认可是我开发的最大的动力 ！也期待有喜欢图形，喜欢canvas的小伙伴加入进来，让这个项目可用于工业生产！)

快速开始

直接在项目根目录的dist文件夹内直接复制mini_engine.min.js文件，在html中引入即可。

之后会发布至npm，敬请期待🤩

目录结构

├── dist                     # 打包文件
│   ├── mini_engine.min.js   # 压缩后的生产环境sdk
│   ├── mini_engine.js       # 未压缩开发环境sdk
├── examples                 # 示例项目
│   ├── air                  # 飞机大战示例项目
├── node_modules             # 依赖文件 
├── src
│   ├── core              # 核心文件 
│   │   ├── resource         # 资源处理核心文件
│   │   ├── types            # 类型文件
│   │   ├── utils            # 工具库
│   │   ├── views            # 关键视图对象
│   ├── main                 # 入口文件
├── .gitignore                # git忽略文件
└── index.html               # index本地调试
├── index.js                 # 自动引包配置
├── package.json             # npm包配置
├── README.md                # 文档
└── tsconfig.json            # ts相关配置
├── webpack.config.js        # webpack配置