WEB前端的大部分工作集中在利用現(xiàn)有的主流前端框架（vue /?react?/ angular）及其周邊開源代碼庫生態(tài)組織整個項(xiàng)目的架構(gòu)并實(shí)現(xiàn)業(yè)務(wù)邏輯代碼，往往同一種邏輯可以選擇用不同的抽象方式來實(shí)現(xiàn)，不同抽象方式的思想和實(shí)現(xiàn)差異巨大，如狀態(tài)管理的不同實(shí)現(xiàn)方式：redux / mobx / rxjs.
H5游戲的開發(fā)工作主要集中在基于游戲引擎的標(biāo)準(zhǔn)開發(fā)流程實(shí)現(xiàn)UI設(shè)計(jì)的動畫效果以及完成游戲交互邏輯。對于游戲開發(fā)來說，需要利用具象思維能力來組織貼圖等資源完成最終產(chǎn)品，實(shí)現(xiàn)的過程相對來說比較固定和模式化（利用選定的游戲引擎的粒子、骨骼、幀動畫等API）。
WEB前端在工程化領(lǐng)域日趨成熟，利用框架本身提供的API + IDE的完備提示 + webpack等打包工具可以實(shí)現(xiàn)“coding - debug - 部署”的一整套成熟的生產(chǎn)流程，同時(shí)框架本身往往只提供核心的“數(shù)據(jù) - 視圖 - 數(shù)據(jù)”功能，可以根據(jù)項(xiàng)目需求引入不同的設(shè)計(jì)模式。
在H5游戲開發(fā)領(lǐng)域，由于不同游戲引擎之間的核心代碼差異巨大，為了保護(hù)核心源碼以及開發(fā)效率等，游戲引擎廠商往往會高度定制一套服務(wù)于該游戲引擎的開發(fā)流程：從IDE到代碼架構(gòu)到部署。因此，相對來說，H5游戲開發(fā)中，遵守“約定”是很重要的一個環(huán)節(jié)，H5游戲開發(fā)在選定了游戲引擎之后，整個開發(fā)流程往往都只能受限于在游戲引擎的官方推薦中做選擇。
Cocos Creator 和 Egret 的區(qū)別
對入門者來說
Cocos Creator 的集成開發(fā)環(huán)境比較成熟，整套功能都集成在了開箱即用的 Cocos Creator 客戶端內(nèi)，除了代碼邏輯需要用VSCode編寫，場景編輯、動態(tài)組件設(shè)置、資源管理、部署等都可以在單一客戶端內(nèi)完成操作。
相對來說 Egret 的開發(fā)環(huán)境有些混亂，有 Egret Launcher / Wing3 / Egret UI Editor / Egret Pro 等各種開發(fā)工具，有些功能彼此涵蓋但又各不相同，產(chǎn)品線混亂，對新手來說并不友好。
在官方文檔上，Cocos Creator 更勝一籌，從基礎(chǔ)的游戲Demo教程到API文檔都比Egret的質(zhì)量更高。在社區(qū)熱度和市場占比方面，Cocos Creator 也比 Egret 的討論多一些，所以更容易找到解決方案，對新手更加友好。
在可視化編輯器上的一些差別
Cocos Creator 官方更推薦在客戶端用GUI操作完成大部分場景、圖形、動畫工作，在代碼層僅編寫業(yè)務(wù)代碼以及一些比較復(fù)雜抽象的動畫邏輯。
優(yōu)點(diǎn)：在制作動畫效果和場景時(shí)更直觀、方便；
缺點(diǎn)：由于可視化編輯器功能繁多，學(xué)習(xí)操作有一定難度。
Egret的可視化編輯器目前比較簡陋，動畫和業(yè)務(wù)邏輯都依賴在代碼層編寫。
優(yōu)點(diǎn)：開發(fā)方式對web開發(fā)者更為熟悉；
缺點(diǎn)：制作場景和動畫效果時(shí)并不直觀，需要更多思維負(fù)擔(dān)。
總結(jié)
想要從WEB前端轉(zhuǎn)而上手H5游戲開發(fā)，首先要加強(qiáng)形象和抽象相互轉(zhuǎn)換的思維能力，擁有從具體的動畫效果抽象出代碼控制邏輯的能力會很有優(yōu)勢。在選定游戲引擎后，還需要對該引擎的開發(fā)流程做充分了解，需要學(xué)習(xí)的部分：游戲引擎自研或推薦的IDE的使用、可視化場景編輯器的使用、代碼架構(gòu)方式、游戲引擎API、Debug方式、部署方式。
從個人角度來說，Cocos Creator 有更清晰的產(chǎn)品線和文檔、合適的難度曲線，更適合從 WEB前端轉(zhuǎn)向游戲開發(fā)。
