web前端的大部分工作集中在利用现有的主流前端框架（vue /?react?/ angular）及其周边开源代码库生态组织整个项目的架构并实现业务逻辑代码，往往同一种逻辑可以选择用不同的抽象方式来实现，不同抽象方式的思想和实现差异巨大，如状态管理的不同实现方式：redux / mobx / rxjs.
h5游戏的开发工作主要集中在基于游戏引擎的标准开发流程实现ui设计的动画效果以及完成游戏交互逻辑。对于游戏开发来说，需要利用具象思维能力来组织贴图等资源完成最终产品，实现的过程相对来说比较固定和模式化（利用选定的游戏引擎的粒子、骨骼、帧动画等api）。
web前端在工程化领域日趋成熟，利用框架本身提供的api + ide的完备提示 + webpack等打包工具可以实现“coding - debug - 部署”的一整套成熟的生产流程，同时框架本身往往只提供核心的“数据 - 视图 - 数据”功能，可以根据项目需求引入不同的设计模式。
在h5游戏开发领域，由于不同游戏引擎之间的核心代码差异巨大，为了保护核心源码以及开发效率等，游戏引擎厂商往往会高度定制一套服务于该游戏引擎的开发流程：从ide到代码架构到部署。因此，相对来说，h5游戏开发中，遵守“约定”是很重要的一个环节，h5游戏开发在选定了游戏引擎之后，整个开发流程往往都只能受限于在游戏引擎的官方推荐中做选择。
cocos creator 和 egret 的区别
对入门者来说cocos creator 的集成开发环境比较成熟，整套功能都集成在了开箱即用的 cocos creator 客户端内，除了代码逻辑需要用vscode编写，场景编辑、动态组件设置、资源管理、部署等都可以在单一客户端内完成操作。
相对来说 egret 的开发环境有些混乱，有 egret launcher / wing3 / egret ui editor / egret pro 等各种开发工具，有些功能彼此涵盖但又各不相同，产品线混乱，对新手来说并不友好。
在官方文档上，cocos creator 更胜一筹，从基础的游戏demo教程到api文档都比egret的质量更高。在社区热度和市场占比方面，cocos creator 也比 egret 的讨论多一些，所以更容易找到解决方案，对新手更加友好。
在可视化编辑器上的一些差别cocos creator 官方更推荐在客户端用gui操作完成大部分场景、图形、动画工作，在代码层仅编写业务代码以及一些比较复杂抽象的动画逻辑。
优点：在制作动画效果和场景时更直观、方便；缺点：由于可视化编辑器功能繁多，学习操作有一定难度。egret的可视化编辑器目前比较简陋，动画和业务逻辑都依赖在代码层编写。
优点：开发方式对web开发者更为熟悉；缺点：制作场景和动画效果时并不直观，需要更多思维负担。
总结想要从web前端转而上手h5游戏开发，首先要加强形象和抽象相互转换的思维能力，拥有从具体的动画效果抽象出代码控制逻辑的能力会很有优势。在选定游戏引擎后，还需要对该引擎的开发流程做充分了解，需要学习的部分：游戏引擎自研或推荐的ide的使用、可视化场景编辑器的使用、代码架构方式、游戏引擎api、debug方式、部署方式。
从个人角度来说，cocos creator 有更清晰的产品线和文档、合适的难度曲线，更适合从 web前端转向游戏开发。