公司项目有用到egret h5小程序，所以就抽空研究了下小游戏的开发

首先还是要感谢egret论坛的热心网友，游戏的素材也是来自egret论坛，代码逻辑是自己写的

【第一步：UI界面】

游戏界面如下：

左侧是控制栏，右侧框内是游戏区域。右侧区域可以做自适应手机屏幕。

【第二步：程序结构】

上述图片两个红框内，ts部分是程序代码部分，resource就是游戏对应的所需要的素材

程序部分大致介绍下：

ui包里，就是游戏的具体的逻辑控制

Control：是左侧控制栏的

Snake：是贪吃蛇的一个方块

SnakeEngine：是贪吃蛇的游戏逻辑

Main：是程序的主入口，资源配置和游戏的启动

StartGame:是游戏的入口

【第三步：部分代码】

Main.ts

可以保留官方的程序，加入这个游戏启动程序就可以

private createGameScene():void{this.addChild(new StartGame());
}

StartGame.ts

/**** @author libins**/
class StartGame extends egret.DisplayObjectContainer{private boxDisX:number = 20;private snakeSize:number = 15;private stageW:number;private stageH:number;private controlSp:Control;private box      :egret.Sprite;private snakeEngine: SnakeEngine;public constructor() {super();this.addEventListener(egret.Event.ADDED_TO_STAGE,this.addToStage,this);}private addToStage(e:egret.Event):void{this.removeEventListener(egret.Event.ADDED_TO_STAGE,this.addToStage,this);this.stageW = this.stage.stageWidth;this.stageH = this.stage.stageHeight;this.createBg();this.createControl();this.drawRect();this.startSnakeEngine();}private createBg():void{var bg:egret.Shape = new egret.Shape();bg.graphics.beginFill(0xffff00);bg.graphics.drawRect(0,0,this.stageW ,this.stageH);bg.graphics.endFill();this.addChild(bg);}private createControl():void{this.controlSp = new Control();this.controlSp.addEventListener("重新开始",this.playAgain,this);this.controlSp.addEventListener("改变方向",this.changMove,this);this.addChild(this.controlSp);}private playAgain(e:egret.Event):void{this.snakeEngine.playAgain();}private drawRect():void{this.box = new egret.Sprite();this.box.graphics.lineStyle(2,0x000000);this.box.graphics.beginFill(0xffffff);var boxWidth: number  = this.stageW - this.controlSp.width - this.boxDisX * 2;var boxHeight: number = this.stageH - this.boxDisX * 2;var shouldWidth: number = Math.floor(boxWidth / this.snakeSize) * this.snakeSize;var shouldHeight:number = Math.floor(boxHeight/this.snakeSize)*this.snakeSize;this.box.graphics.drawRect(0,0,shouldWidth,shouldHeight);this.box.graphics.endFill();this.box.x = this.controlSp.width+this.boxDisX;this.box.y = this.boxDisX;this.addChild(this.box);}private startSnakeEngine():void{this.snakeEngine = new SnakeEngine();this.box.addChild(this.snakeEngine);}private changMove(e:egret.Event):void{this.snakeEngine.changeMove(this.controlSp.getMoveType());}
}

上述代码复杂一点的就在drawRect里，里面主要是要做自适应屏幕宽度，画一个可以整数倍添加蛇体宽度的一个方框。

SnakeEngine.ts

/**** @author libins **/
class SnakeEngine extends egret.DisplayObjectContainer {private snakeTotal:number;private snakeArr  : eui.ArrayCollection;private apple     :egret.Bitmap;private myTimer   :egret.Timer;private moveType  :string;private moveXBol  :Boolean;private moveSpeed: number = 15;private timeCount :number = 100;private parentW   :number;private parentH   :number;private snakeLiveBol:Boolean;public constructor() {super();this.addEventListener(egret.Event.ADDED_TO_STAGE,this.addToStage,this);}private addToStage(e:egret.Event):void{this.removeEventListener(egret.Event.ADDED_TO_STAGE,this.addToStage,this);this.parentW = this.parent.width;this.parentH = this.parent.height;this.playAgain();}private initTimer():void{this.myTimer = new egret.Timer(this.timeCount,0);this.myTimer.addEventListener(egret.TimerEvent.TIMER,this.move,this);this.myTimer.start();}public playAgain():void{this.snakeTotal = 0;this.snakeLiveBol = true;this.snakeArr   = new eui.ArrayCollection();this.removeAll();this.initUI();}public changeMove($type:string):void{if(this.myTimer == undefined){this.initTimer();}else{if(!this.myTimer.running) {this.myTimer.start();}}if(this.moveXBol!=undefined){if(this.moveXBol && ($type == "right" || $type == "left")) return;if(!this.moveXBol && ($type == "up" || $type == "down")) return;}this.moveType = $type;}private removeAll():void{while(this.numChildren>0){this.removeChildAt(0);}if(this.myTimer!=undefined){this.myTimer.stop();}this.moveXBol = undefined;}private initUI():void{this.addSnake();var snakeItem:egret.Bitmap = this.getChildAt(0) as egret.Bitmap;this.setRamdonPostion(snakeItem); this.addApple();}private addApple():void{this.apple = new egret.Bitmap(RES.getRes("apple_png"));this.addChild(this.apple);this.setRamdonPostion(this.apple); }private removeApple():void{this.removeChild(this.apple);this.apple = null;}private setRamdonPostion($target:egret.DisplayObject):void{var couldWNum: number = this.parent.width / $target.width;var couldHNum: number = this.parent.height / $target.height;$target.x = Math.floor(Math.random() * (couldWNum-1)) * $target.width;$target.y = Math.floor(Math.random() * (couldHNum-1)) * $target.height; }private addSnake():void{var snakeItem = new Snake();this.addChild(snakeItem);this.snakeArr.addItem(snakeItem);this.snakeTotal++;}private move(e:egret.TimerEvent):void{if(this.snakeLiveBol == false) return;for(var i: number = 0;i < this.snakeTotal;i++) {var snakeItem: Snake = this.snakeArr.getItemAt(i) as Snake;snakeItem.lastPoint = new egret.Point(snakeItem.x,snakeItem.y);if(i == 0) { switch(this.moveType) {case "up":snakeItem.y -= this.moveSpeed;if(snakeItem.y<0){//snakeItem.y = this.parent.height - snakeItem.height;snakeItem.y = 0;this.gameOver();}this.moveXBol = false;break;case "down":snakeItem.y += this.moveSpeed;if(snakeItem.y >= this.parentH - this.moveSpeed) {//snakeItem.y = 0;snakeItem.y = this.parentH - this.moveSpeed;this.gameOver();}this.moveXBol = false;break;case "left":snakeItem.x -= this.moveSpeed;if(snakeItem.x < 0) {// snakeItem.x = this.parent.width - snakeItem.width;snakeItem.x  = 0;this.gameOver();}this.moveXBol = true;break;case "right":snakeItem.x += this.moveSpeed;if(snakeItem.x >= this.parentW - this.moveSpeed) {//snakeItem.x = 0;snakeItem.x = this.parentW - this.moveSpeed;this.gameOver();}this.moveXBol = true;break;}var p1: egret.Point = new egret.Point(snakeItem.x,snakeItem.y);var p2: egret.Point = new egret.Point(this.apple.x,this.apple.y);if(egret.Point.distance(p1,p2) < this.moveSpeed*.5){this.removeApple();this.addApple();this.addSnake();}}else{var lastSnakeItem: Snake = this.snakeArr.getItemAt(i - 1) as Snake;snakeItem.x = lastSnakeItem.lastPoint.x;snakeItem.y = lastSnakeItem.lastPoint.y;var p3: egret.Point = new egret.Point(snakeItem.x,snakeItem.y);if(egret.Point.distance(p1,p3) < this.moveSpeed) {this.gameOver();}}}}private gameOver():void{this.myTimer.stop();this.snakeLiveBol = false;}
}

这个是贪吃蛇的游戏的关键代码，就是时间驱动，蛇头移动，然后就是判断是否吃到苹果，移动那，保证了只能90度方向调整，添加的蛇体部分，是以火车车厢的概念，连接在一起

另外两个类，就是纯UI的资源加载和点击事件，不放上来了。

个人觉得Egret做游戏开发还是挺方便的，开发者只要把精力放在游戏逻辑上，其他的资源，浏览器兼容等都交给Egret负责搞定，上手容易。