web前端和H5游戏开发有什么区别？

    WEB前端的大部分工作都集中在利用现有主流前端框架(vue/react/angular)以及周边开源代码基础生态来组织整个项目的架构和实现业务逻辑代码上，而且往往同样的逻辑可以选择不同的抽象方式来实现，不同的抽象方式在思想上和实现上也有很大的不同，例如： redux/mobx/rxjs.

      游戏的开发工作主要集中在基于游戏引擎标准开发流程的 UI设计动画效果的实现和游戏交互逻辑的完成上。对游戏开发而言，需要使用具象思维能力来组织贴图等资源以完成最终产品。实现的过程相对来说是固定和模式化的(使用一些游戏引擎的颗粒、骨骼、帧动画等 API)。

     通过使用框架本身提供的 API+ IDE的完备技巧+ webpack等打包工具， WEB前端在工程领域已经成熟，可以实现“coding- debug-部署”一整套成熟的生产流程，而框架本身往往只提供核心的“data-view-debug”功能，可以根据项目需要引入不同的设计模式。

    对于H5游戏开发领域来说，由于不同游戏引擎的核心代码差别很大，为了保护核心源代码和开发效率等原因，游戏引擎厂商往往会高度定制一套服务于该游戏引擎的开发流程：从 IDE到代码架构再到部署。所以H5游戏开发相对来说，遵循“惯例”是非常重要的一环，H5游戏开发在选定游戏引擎后，通常只限于在官方推荐的游戏引擎中进行选择。

对新手来说

     Cocos Creator的集成开发环境已经趋于成熟，整个功能都集成在 Cocos Creator的客户机上，除了需要使用 VSCode来编写代码逻辑，场景编辑、动态组件设置、资源管理、部署等都可以在一个客户端完成。

    相对来说 Egret 的开发环境有些混乱，有 Egret Launcher / Wing3 / Egret UI Editor / Egret Pro 等各种开发工具，一些功能相互覆盖，但各不相同，产品线混乱，对初学者来说很不友好。

    CocosCreator在官方文档方面更胜一筹，从基本的游戏 Demo教程到 API文档，它都比 Egret具有更高的质量。CocosCreator也比 Egret在社区热度和市场份额方面进行了更多的讨论，因此更容易找到解决方案，对新手更友好。

在可视化编辑器上的一些差别

     CocosCreator官方推荐使用 GUI操作在客户端完成大多数场景、图形、动画工作，只在代码层编写业务代码，以及一些更复杂抽象的动画逻辑。

优势：在动画效果和场景的制作方面上更加直观、方便；

缺点：由于视觉编辑器的功能繁多，学习操作有一定难度。

目前， Egret的可视化编辑器非常简陋，动画和业务逻辑都是由代码层编写的。

优势：对于 web开发者来说，开发方式更加熟悉；

缺点：制作场景和动画效果不直观，需要更多的思考。

总结

     从 WEB前端转到H5游戏开发，首先要强化意象与抽象相互转化的思维能力，具备从具体动画效果中抽象化代码控制逻辑的能力会更有优势。选择了游戏引擎之后，还需要全面了解该引擎的开发过程，其中有一部分需要学习：游戏引擎自我研究或者推荐的 IDE的使用，可视化场景编辑器的使用，代码架构方法，游戏引擎 API，调试方法，部署方法。

    个人认为CocosCreator产品线和文档比较清晰，难度曲线合适，适合从web前端开发游戏。以上就是今天一些分享，谢谢大家观看。