前言因为实习公司要人做H5游戏，所以用EgretEngine开发，语言是typescript。抱着想学ts的心态，开始学了一波H5小游戏开发。几天看了egret、eui、typescript文档。花了3天半的时间，导师让我模仿360的小游戏。没有游戏逻辑，小入门项目，现在写个小总结。模仿项目：36051小游戏预览地址：eui模仿360小游戏源码地址：eui-360预览入门资料TypeScript入门教程【新手教程2】EUI卡牌游戏制作全过程EgretEgretH5开发-围绕神经猫目录结构//src目录│AssetAdapter.ts│LoadingUI.ts//转场加载类│Main.ts//入口文件│Platform.ts│ThemeAdapter.ts│├─common│GameUtil.ts//工具类│└─game│GameData.ts//数据中心类│SceneManager.ts//场景管理类│├─components//提取组件│MyImage.ts//自定义图片组件│prize.ts│RewardMy.ts│Rule.ts│└─sceneMainScene.ts//游戏场景类StartScene.ts//Home场景场景控制类比web，没有小游戏的链接跳转和路由跳转，因为是给开发的通过画布。所以场景通过在根场景上添加各种子场景来控制这一块，比如开始场景、游戏场景、结束场景等new一个单实例场景控制器，调度整个页面的场景切换。//SceneManager.ts场景控制器classSceneManager{public_stage:egret.DisplayObjectContainer;//根据场景publicstartScene:StartScene;公共mainScene：MainScene；constructor(){this.startScene=newStartScene();this.mainScene=newMainScene();}//获取单例staticsceneManager:SceneManager;staticgetinstance(){if(!this.sceneManager){this.sceneManager=newSceneManager();}返回this.sceneManager；}//删除其他场景privateremoveOtherScene(scene){letarr=[this.startScene,this.mainScene];arr.forEach(item=>{if(scene===item){return}if(item.parent){this._stage.removeChild(item)}})}//设置根场景publicsetScene(s:egret.DisplayObjectContainer){this._stage=s;}//开始场景statictoStartScene(){this.instance.removeOtherScene(this.instance.startScene)this.instance._stage.addChild(this.instance.startScene)}//游戏场景statictoMainScene(){this.instance.removeOtherScene(this.instance.mainScene)this.instance._stage.addChild(this.instance.mainScene)}}//main.tsprotectedcreateGameScene():void{//使用main创建的容器作为根容器场景SceneManager.instance.setScene(this);//跳转到开始场景SceneManager.toStartScene();}组件继承我想给eui.Image控件添加一个isClick属性来判断图片是否被点击，但是canvas不像dom有自定义属性data-*，所以通过组件继承，自定义一个继承自eui.Image的控件。之后就不用eui.Image了，但是MyImage自定义控件//自定义图片类classMyImageextendseui.Image{publicisClick:boolean;公共构造函数（）{超级（）;this.isClick=false;}}动画使用了egret.Tween动画库，实现起来非常方便。详见文档//3秒360度旋转图片tw.get(this.musicImg,{loop:true}).to({rotation:360},3000);子容器调用父容器方法，vue子组件传值给父组件。//子容器protectedchildrenCreated():void{super.childrenCreated();this.closeBtn.addEventListener(egret.TouchEvent.TOUCH_TAP,this.close,this);}privateclose(){//创建一个CLOSE_POP_REWARD_MY事件letcloseEvent:egret.Event=newegret.Event('CLOSE_POP_REWARD_MY');//派发给容器的父容器事件this.parent.parent.dispatchEvent(closeEvent);}//父容器//监听派发事件CLOSE_POP_REWARD_MYthis.addEventListener('CLOSE_POP_REWARD_MY',this.closeRewardMy,this);tips还有一些比如音乐播放，http请求，这些事件看文档就ok了。至于微信接口的接入，有需要学习的时候再写吧==。结论由于使用了eui，界面基本可以通过可视化拖拽完成，剩下的只需要关注游戏逻辑和一些动画效果即可。刚上手，整体体验还是不错的。比起做一个页面（渐渐觉得前端没意思），还是有点意思的。
