[Egret] 贪吃蛇H5小游戏

公司项目有用到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负责搞定，上手容易。