[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负责搞定，上手容易。