公司项目有用到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.drawRec