HTML5游戏引擎（十七）-egret引擎实战——踩格子游戏
2024-05-15 01:00:25
HTML5游戏引擎（十七）-egret引擎实战——踩格子游戏
第六章 踩格子游戏
逻辑分析
游戏配置
class GameData {private static score:number = 0; //分数public static row:number = 4; //行数public static column:number = 4; //列数public static speed:number = 10; //移动速度private static _boxWidth:number = 0; //盒子宽度private static _boxHeight:number = 0; //盒子高度/*** getScore* 获取分数*/public static getScore():number {return GameData.score;}/*** setScore* 设置分数*/public static setScore(val:number) {GameData.score = val;GameData.speed = 10+GameData.score;}/*** getBoxWidth* 获取格子宽度*/public static getBoxWidth():number {if( GameData._boxWidth == 0) {GameData._boxWidth = egret.MainContext.instance.stage.stageWidth / GameData.column;}return GameData._boxWidth;}/*** getBoxHeight* 获取格子高度*/public static getBoxHeight():number {if( GameData._boxHeight == 0) {GameData._boxHeight = egret.MainContext.instance.stage.stageHeight / GameData.row;}return GameData._boxHeight;}/*** getStageHeight* 获取当前屏幕高度*/public static getStageHeight():number {return egret.MainContext.instance.stage.stageHeight;}/*** getStageWidth* 获取当前屏幕宽度*/public static getStageWidth():number {return egret.MainContext.instance.stage.stageWidth;}}
入口文件
Main.ts作为项目入口文件，在构造函数中启动init方法
/*** 游戏主入口文件*/
class Main extends egret.DisplayObjectContainer {public constructor() {super();console.log('start');// 添加初始化事件this.addEventListener(egret.Event.ADDED_TO_STAGE, this.addStage, this);}// 移除事件 并初始化游戏private addStage() {this.removeEventListener(egret.Event.ADDED_TO_STAGE, this.addStage, this);this.init()}/*** 游戏参数* gameview 画布* timer 定时器* gameoverPanel 游戏结束画布* startgamePanel 开始游戏画布*/private gameview:GameView ;private timer:egret.Timer;private gameoverPanel:GameOverPanel;private startgamePanel:StartGamePanel;/*** 初始化游戏函数* 初始化gameview* 初始化定时器* 初始化开始|结束 画布* 添加事件监听*/private init():void {// ===1this.gameview = new GameView();this.addChild(this.gameview);this.gameview.addEventListener(GameEvent.GAME_OVER, this.gameover,this);this.timer = new egret.Timer(20,0);this.timer.addEventListener(egret.TimerEvent.TIMER, this.timers, this);this.gameoverPanel = new GameOverPanel();this.gameoverPanel.addEventListener(GameEvent.GAME_START,this.startgame,this);this.startgamePanel = new StartGamePanel();this.startgamePanel.addEventListener(GameEvent.GAME_START, this.startgame, this);this.addChild(this.startgamePanel);}/*** 自动移动*/private timers() {this.gameview.move();}/*** 游戏结束*/private gameover(evt:GameEvent):void {this.timer.stop();this.gameoverPanel.update();this.addChild(this.gameoverPanel);}/*** 开始游戏* 重新设置游戏速度 分数* 去除游戏开始|结束画布*/private startgame(evt:GameEvent):void {GameData.speed = 10;GameData.setScore(0);this.gameview.startgame();if(this.startgamePanel.parent) {this.removeChild(this.startgamePanel);}if(this.gameoverPanel.parent) {this.removeChild(this.gameoverPanel);}this.timer.start();}
}游戏场景GameView
游戏中的整体逻辑
/*** GameView* 游戏界面*/
class GameView extends egret.Sprite {public constructor() {super();this.init();}/*** _boxGroups* msg: 一行格子* type: Array => GroupRect*/private _boxGroups:Array<GroupRect>;// 分数private scoreText:egret.BitmapText;/*** init()* 初始化函数*/private init():void {this._boxGroups = [];var len:number = GameData.row+1;// 循环生成每一列格子for(var i:number=0;i<len;i++) {var boxg:GroupRect = new GroupRect();this._boxGroups.push(boxg);this.addChild(boxg);boxg.addEventListener(GameEvent.GAME_OVER, this.gameOver, this);boxg.addEventListener(GameEvent.GAME_HIT, this.clickRight, this);}/*this.scoreText = new egret.TextField();this.scoreText.textColor = 0xff0000;this.scoreText.bold = true;this.scoreText.size = 100;*/// 设置 分数this.scoreText = new egret.BitmapText();this.scoreText.x = 180;this.scoreText.y = 50;this.scoreText.text = String(0);this.addChild(this.scoreText);}/*** startgame* 开始游戏*/public startgame():void {// 初始化分数this.scoreText.text = String(0);var len:number = GameData.row+1;// 循环创建格子// 给格子赋值对应位置 yfor(var i:number=0;i<len;i++) {this._boxGroups[i].create();this._boxGroups[i].y = 0-GameData.getBoxHeight()*(1+i);}}/*** move()* 点击正确 移动格子*/public move() {var len:number = GameData.row+1;for(var i:number=0;i<len;i++) {// 游戏加速this._boxGroups[i].y += GameData.speed;//移动到舞台外侧了if(this._boxGroups[i].y>=GameData.getStageHeight()){// 如果格子没有被点击 游戏结束if(!this._boxGroups[i].isHit) {this.gameOver();return;}// 设置对应格子的位置if(i==0) {this._boxGroups[i].y = this._boxGroups[4].y - GameData.getBoxHeight();} else {this._boxGroups[i].y = this._boxGroups[i-1].y - GameData.getBoxHeight();}this._boxGroups[i].create();}}}/*** gameOver* 游戏结束*/private gameOver(evt:GameEvent=null):void {var event:GameEvent = new GameEvent(GameEvent.GAME_OVER);this.dispatchEvent(event);}/*** clickRight* 游戏继续*/private clickRight(evt:GameEvent):void {GameData.setScore(GameData.getScore()+1);this.scoreText.text = String(GameData.getScore());}
}
一行格子GroupRect
每一排格子的抽象类，会生成4个格子。
/*** GroupRect* 一行格子*/
class GroupRect extends egret.Sprite {public constructor() {super();this.init();}//Graphics方式private _boxs:Array<BoxGraphics>;// 初始化函数private init():void {this._boxs = [];// 生成一行中的每一个格子 并给每个格子添加对应事件for(var i:number=0;i<GameData.column;i++) {var box:BoxGraphics = new BoxGraphics();this._boxs.push(box);box.addEventListener(GameEvent.GAME_HIT, this.clickRight, this);box.addEventListener(GameEvent.GAME_OVER, this.boxGameOver, this);this.addChild(box);box.x = GameData.getBoxWidth()*i;}}//创建一行新的boxpublic create():void {this._isHit = false;var touchIndex:number = Math.floor(Math.random()*4);var len:number = this._boxs.length;for(var i:number=0;i<len;i++) {if(i==touchIndex) {this._boxs[i].drawBox(true);} else {this._boxs[i].drawBox();}}}private _isHit:boolean = false; //本行是否被击中public get isHit():boolean {return this._isHit;}/*** 点击正确*/private clickRight(evt:GameEvent):void {if(!this._isHit) {this._isHit = true;var event:GameEvent = new GameEvent(GameEvent.GAME_HIT);this.dispatchEvent(event);}}/*** 点击错误* 游戏结束事件*/private boxGameOver(evt:GameEvent):void {var event:GameEvent = new GameEvent(GameEvent.GAME_OVER);this.dispatchEvent(event);}}
一个格子BoxGraphics
每一个小格子，可以绑定点击事件，决定游戏的成功与失败。
/*** BoxGraphics* 单个格子class*/
class BoxGraphics extends egret.Shape {public constructor() {super();this.init();}/*** init()* 初始化格子*/private init() {this.touchEnabled = true;this.width = GameData.getBoxWidth();this.height = GameData.getBoxHeight();this.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.click, this);}//参数表示当前方块是否可以备点击private _canTouch:boolean = false;/*** drawBox* 绘制内容*/public drawBox(canTouch:boolean=false) {this._canTouch = canTouch;this.graphics.clear();if(canTouch) {this.graphics.beginFill(0);} else {this.graphics.beginFill(0xffffff);}this.graphics.lineStyle(1, 0);this.graphics.drawRect(0,0,GameData.getBoxWidth(),GameData.getBoxHeight());this.graphics.endFill();}/*** click* 当前方块被点击后的响应事件*/private click(evt:egret.TouchEvent):void {this.graphics.clear();if(this._canTouch) {this.graphics.beginFill(0xcccccc);} else {this.graphics.beginFill(0xff0000);}this.graphics.lineStyle(1, 0);this.graphics.drawRect(0,0,GameData.getBoxWidth(),GameData.getBoxHeight());this.graphics.endFill();var event:GameEvent;//不能点击，抛出错误事件if(!this._canTouch) {event = new GameEvent(GameEvent.GAME_OVER);} else {event = new GameEvent(GameEvent.GAME_HIT);}this.dispatchEvent(event);}
}
事件绑定
游戏开始与结束的自定义事件
/*** GameEvent* 游戏事件*/class GameEvent extends egret.Event {// 游戏结束public static GAME_OVER:string = "game_over_event";// 下一步（点击正确）public static GAME_HIT:string = "game_hit_event";// 开始游戏public static GAME_START:string = "game_start_event";public constructor(type:string, bubbles:boolean = false, cancelable:boolean = false) {super(type,bubbles,cancelable);}
}
游戏开始场景
/*** 游戏开始时画布*/
class StartGamePanel extends egret.Sprite {public constructor() {super();this.init();}// 游戏背景private _background:egret.Shape;// 游戏按钮private _startBtn:egret.TextField;/*** 初始化函数*/private init() {// 设置背景this._background = new egret.Shape();this._background.graphics.beginFill(0);this._background.graphics.drawRect(0,0,GameData.getStageWidth(),GameData.getStageHeight());this._background.graphics.endFill();this.addChild( this._background );// 设置按钮this._startBtn = new egret.TextField();this._startBtn.text = "开始";this._startBtn.size = 50;this._startBtn.x = 180;this._startBtn.y = 200;this.addChild( this._startBtn );this._startBtn.touchEnabled = true;// 添加事件 this._startBtn.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.click, this);}/*** 开始游戏* click*/private click(evt:egret.TouchEvent):void {var event:GameEvent = new GameEvent(GameEvent.GAME_START);this.dispatchEvent(event);}
}
游戏结束场景
/*** GameOverPanel* 游戏结束时的画布*/class GameOverPanel extends egret.Sprite {public constructor() {super();this.init();}// 结束游戏时背景private _background:egret.Shape;// 显示得分private _score:egret.TextField;// 重新开始游戏按钮private _startGameBtn:egret.TextField;/*** init()* 初始化函数*/private init():void {// 绘制背景this._background = new egret.Shape();this._background.graphics.beginFill(0);this._background.graphics.drawRect(0,0,GameData.getStageWidth(),GameData.getStageHeight());this._background.graphics.endFill();this.addChild( this._background );// 添加分数this._score = new egret.TextField();this._score.textColor = 0xffffff;this._score.text = "分数：" + GameData.getScore();this._score.size = 50;this._score.x = 150;this._score.y = 50;this.addChild( this._score );// 按钮this._startGameBtn = new egret.TextField();this._startGameBtn.text = "重玩";this._startGameBtn.size = 40;this._startGameBtn.textColor = 0xffffff;this._startGameBtn.x = 180;this._startGameBtn.y = 200;this.addChild( this._startGameBtn );this._startGameBtn.touchEnabled = true;// 添加重新开始游戏事件this._startGameBtn.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.restartGame,this);}/*** update* 更新得分*/public update() {this._score.text = "分数：" + GameData.getScore();}/*** restartGame* 重新开始游戏*/private restartGame(evt:egret.TouchEvent) {var event:GameEvent = new GameEvent(GameEvent.GAME_START);this.dispatchEvent(event);}
}
HTML5游戏引擎（十七）-egret引擎实战——踩格子游戏相关推荐
- egret发布的HTML5项目怎么打开,Egret引擎开发指南之发布项目
在Egret中,使用发布功能也非常的简单.你只需要使用如下命令即可: egret publish HelloWorld 此命令中egret publish为发布命令,HelloWorld是你当前项目的 ...
- H5游戏开发（Egret引擎）及Typescript学习笔记
Egret 1. Egret项目骨架 .wing: 包括 Egret 项目的任务配置文件和启动配置文件. bin-debug: 项目调试时,所产生的文件存放于此目录.与src目录文件一一对应 libs ...
- java弹球游戏代码_疯狂java实战演义 弹球游戏代码
1 packageorg.crazyit.ball;2 3 importjava.awt.event.KeyEvent;4 importjava.awt.Image;5 importjava.awt. ...
- 小程序游戏开发三个引擎用哪个好呢 Cocos，Egret，Laya？
随着微信生态中,小程序应用指数级的增长,许多休闲游戏变成为了众多游戏厂商流量变现的新手段.以近期很火的"羊了个羊"为例,它便是我们常常所说的小游戏. 游戏和小游戏的区别 要盘点小游 ...
- 白鹭引擎（Egret Engine ）
什么是白鹭引擎 Egret引擎是一个开源免费的游戏框架,用于构建二维游戏.演示程序和其他图形界面交互应用等.Egret使用TypeScript脚本语言开发.当游戏完成最终的打包后,可以将程序转换为HT ...
- 白鹭(egret)引擎安装及使用
提示:文章转载需要博主同意 白鹭引擎安装 前言 一.白鹭引擎是什么? 二.白鹭官网 1.访问官网 2.下载 三.安装 四.打开 五.主界面 总结 想一起讨论/学习微信小游戏开发的,GO语言开发的,请微 ...
- 【小游戏：顺序击破格子】egret引擎实战(一)
最近因为项目的需要,开始接触egret引擎,现在把第一写的练手小游戏总结一下,方便以后回顾走了什么坑. egret是基于TypeSc语言和JavaScript语言的2D引擎.该引擎目前功能还比较简单, ...
- egret引擎html5 3d,白鹭引擎(Egret Engine)
EgretEngine可以快速开发基于HTML5的网页游戏,您不仅可以体验到开源免费游戏引擎产品,EgretEngine同时还能通过Egret相关产品搭建快速优雅的工作流.. 相关软件软件大小版本说明 ...
- unity应用开发实战案例_Unity3D游戏引擎开发实战从入门到精通
Unity3D游戏引擎开发实战从入门到精通(坦克大战项目实战.NGUI开发.GameObject) 一.Unity3D游戏引擎开发实战从入门到精通是怎么样的一门课程(介绍) 1.1.Unity3D游戏 ...
- 手把手教你架构3d游戏引擎pdf_白鹭引擎团队即将发布 Egret Pro，并公布后续路线图...
各位开发者好. 春节前,白鹭引擎团队发布了 Egret3D 1.4,引入了大量新特性.上周,白鹭引擎团队发布了 5.2.14 版本,修复了多个白鹭引擎2D渲染器相关的 BUG,接下来我们会在下周继续发 ...
最新文章
- 拆解交易系统--性能优化，安全加固与弹性扩缩容
- BigDecimal的使用说明
- 快速开发平台业务表字段设置的用法
- 计算机基础中的分层教学,分层教学法在计算机基础课程中的应用研究
- java版本号管理_微服务项目中如何管理依赖版本号？
- query的list()和iterate()区别 面试题
- 服务器被bash服务占满_用bash脚本自动下载ftp服务器文件
- 【Python】解决浮点数间运算存在不确定尾数的问题
- 模块的封装性分析-读书笔记
- C++ 继承/派生、访问属性、构造函数
- 我用Python把抖音上的美女图片转字符画，期望的AI目标更进一步【机器学习算法实战小项目，k聚类算法图片转化字符画】
- mysql maven 自动生成_【图文经典版】maven自动生成dao层
- 计算机二级vb上机操作题库,全国计算机等级考试 二级VB 上机题库精简版 考试必备,...
- 爱奇艺影视剧智能配音系统奇声获2022年度CCF科技成果奖“科技进步一等奖”
- 云呐IT服务台在企业IT管理中的作用
- Spring漫画学习笔记(一) 什么是BeanDefinition
- CVE-2019-11478 Sack SlownessExcess Resource Usage漏洞解析与利用
- 零度之下代码输入不了_期末考试查分，基于青果高校教务系统的一个自动python脚本代码
- 阿里面试，三面都过了，却被无理由挂了，快来一起吃瓜
- 编译原理--实验2 语法分析