基于egret的小游戏—

前天接触了egret引擎，看了下里面的系列教程（黑白方块）：http://edn.egret.com/cn/article/index/id/57 ，自己跟着做并改了一下逻辑，完善了一下，包括第一次点击后开始计时、计时结束后不能再点击等。

源码：https://github.com/1998y12/DontTouchWhite.git

下载地址：https://download.csdn.net/download/qq_41508508/10626762

然后今天做了下拼图游戏，有些地方还待完善，不过算是初步了解下egret。

开始界面：

游戏界面：

结束界面：

这里的拼图是那种右下角缺一块那种，逻辑部分比较简单，主要就是怎样打乱，移动，判断是否还原。

打乱的话，可以先将各个拼图块表示成数字存入数组currentorder中，然后在排序sort函数中加入随机数来随机排序方法进行打乱。

打乱后还要判断是否能够还原，以未打乱的拼图（3*3）为例，表示为0，1，2，3，4，5，6，7，8，以它做标准列，其逆序数为0。

判断是否能够还原的条件是：打乱后方块的逆序数 + 打乱后空白方块到右下角方块的曼哈顿距离 是否为偶数

曼哈顿距离：两者之间x距离差+y距离差

逆序数：计算打乱后的拼图逆序数即看数列中每一个数的前面，有多少个比它大的数。如 2，5，3，1，4，8，7，0，6，其逆序数为：0+0+1+3+1+0+1+7+2 = 15

如果打乱后不能还原，则再打乱一次。

public upset(){  this.currentOrder.sort(function(){return 0.5 - Math.random();});var r:number = 0;var cur_index:number = 0;for(var i = 0;i<this.partsNum;i++){if(this.currentOrder[i] == this.Block_v){cur_index = i;}for(var j = 0;j<i;j++){if(this.currentOrder[j] > this.currentOrder[i]){r++;}}}var temp_j = cur_index % this.currentLevel;var temp_i = (cur_index - temp_j) / this.currentLevel;r += ((this.currentLevel - 1 - temp_i) + (this.currentLevel - 1 - temp_j));if(r%2){this.upset();}}

接下来是游戏主界面的搭建：

首先新建GameDate类，用这个类来存储游戏的一些静态配置，数据等。

class GameData
{public static LENGTH = 600;    //拼图原始图片像素设为600public static LEVEL_EASY = 3;public static LEVEL_NORMAL = 4;public static LEVEL_HARD = 5;public static step = 0;public static one:Array<string> = [ "one_01_png" , "one_02_png" , "one_03_png" , "one_04_png", "one_05_png" , "one_06_png" , "one_07_png" , "one_08_png" , "block_png"];public static onenor:Array<string> = [ "onenor_01_png" , "onenor_02_png" , "onenor_03_png" , "onenor_04_png" , "onenor_05_png" , "onenor_06_png" , "onenor_07_png" , "onenor_08_png" , "onenor_09_png" ,"onenor_10_png" , "onenor_11_png" , "onenor_12_png" , "onenor_13_png" , "onenor_14_png" ,"onenor_15_png" , "blocknor_png"];public static onehar:Array<string> = [ "onehar_01_png" , "onehar_02_png" , "onehar_03_png" , "onehar_04_png" ,"onehar_05_png" , "onehar_06_png" , "onehar_07_png" , "onehar_08_png" , "onehar_09_png" , "onehar_10_png" ,"onehar_11_png" , "onehar_12_png" , "onehar_13_png" , "onehar_14_png" , "onehar_15_png" , "onehar_16_png" ,"onehar_17_png" , "onehar_18_png" , "onehar_19_png" , "onehar_20_png" , "onehar_21_png" , "onehar_22_png" ,"onehar_23_png" , "onehar_24_png" , "blockhar_png"];

接下来新建puzzlepart类，继承自egret.sprite，表示拼图的每一小块。包含图片的边框，以及一张图片。同时有添加图片createImg方法和展示show方法。

class Puzpart extends egret.Sprite
{public img:egret.Bitmap = null;public border:egret.Sprite = null;private imgNumber:number = 0;public Loc_x:number = 0;    //表示这个方块在拼图中的位置public Loc_y:number = 0;public constructor(){super();this.touchEnabled = true;}public createImg(name:string){this.img = new egret.Bitmap();let texture: egret.Texture = RES.getRes(name);this.img.texture = texture;this.img.x = 0;this.img.y = 0;// this.addChild(this.img);}public show(){if(!this.border){this.border = new egret.Sprite();}this.border.graphics.lineStyle(1,0xcccccc);this.border.graphics.drawRect(0,0,this.img.width,this.img.width);this.addChild(this.img);this.addChild(this.border);}public setimgNumber(val:number){this.imgNumber = val;}public getimgNumber(){return this.imgNumber;}public static getWidth(){return this.getWidth;}}

接着新建puzzle类，控制方块移动，判断游戏是否成功等。

私有属性：

private parts:Array<Puzpart>;public currentOrder:Array<number>;    //当前拼图的顺序public currentBlock_x:number;    //当前空白块位置xpublic currentBlock_y:number;    //当前空白块位置ypublic Block_v:number = 8;    //拼图复原后空白块的位置public currentLevel:number;    //当前游戏等级（3*3，4*4，5*5)public partsNum:number;    //拼图的块数public partLen:number;    //每一块拼图块的长度public gameStartPanel:GameStartPanel;    //开始界面public gameOverPanel:GameOverPanel;    //结束界面

游戏初始化及show方法：

public init(arrs:Array<string>){this.parts = [];this.currentOrder = [];for(var i = 0;i<this.partsNum;i++){this.currentOrder.push(i);}var k = 0;for(var i = 0;i<this.currentLevel;i++){for(var j = 0;j<this.currentLevel;j++){var temp:Puzpart = new Puzpart();temp.createImg(arrs[k]);temp.setimgNumber(k++);temp.Loc_x = i;temp.Loc_y = j;this.parts.push(temp);}}}public show(){var n = this.currentLevel;var index = 0;for(var i = 0;i<n;i++){for(var j = 0;j<n;j++){this.parts[this.currentOrder[index]].Loc_x = i;this.parts[this.currentOrder[index]].Loc_y = j;this.parts[this.currentOrder[index]].x = 25 + (this.partLen) * j;this.parts[this.currentOrder[index]].y = 25 + (this.partLen) * i;if(this.currentOrder[index] == this.Block_v){this.currentBlock_x = i;this.currentBlock_y = j;}this.addChild(this.parts[this.currentOrder[index]]);this.parts[this.currentOrder[index++]].show();}}}

接下来就是拼图块移动的方法，其实也就是点击某个拼图块，判断它周边是否有空白块，有则交换

public onPuzzleClick(evt:egret.TouchEvent){//console.log(evt.target.Loc_x+","+evt.target.Loc_y);var tempX = evt.target.Loc_x;var tempY = evt.target.Loc_y;if(tempX==this.currentBlock_x && Math.abs(tempY - this.currentBlock_y)==1){var temp = tempY;tempY = this.currentBlock_y;this.currentBlock_y = temp;this.changeBlock(tempX,tempY);  GameData.step++;this.show();  }  else if(tempY==this.currentBlock_y && Math.abs(tempX - this.currentBlock_x)==1){var temp = tempX;tempX = this.currentBlock_x;this.currentBlock_x = temp;this.changeBlock(tempX,tempY);GameData.step++;this.show();}  this.judge(); }public changeBlock(x:number , y:number){var index1 = x * this.currentLevel + y;var index2 = this.currentBlock_x * this.currentLevel + this.currentBlock_y;var v = this.currentOrder[index1];this.currentOrder[index1] = this.currentOrder[index2];this.currentOrder[index2] = v;}

判断方法judege也比较简单，直接看currentorder数组是否等于0，1，2，...，8。

public judge(){var t = 0;var i = 0;for(i = 0;i<this.partsNum;i++,t++){if(this.currentOrder[i] != t){break;    }     }if(i == this.partsNum){//console.log("Game Success !");this.addGameOverPanel();}}

剩下的也就是加入开始，结束界面，并添加监听器而已了。

开始界面是自定义的皮肤界面，egret中的皮肤机制，有点类似于上学期学的android studio，主要都是将ui界面同逻辑部分分离，减少耦合。

还有许多优化，比如图片可以不用利用ps先分割，可以在代码里利用drawtotexture方法来进行裁切等。

拼图游戏源码：https://github.com/1998y12/PuzzleGame

下载地址：https://download.csdn.net/download/qq_41508508/10626746

基于egret的小游戏——拼图相关推荐

基于JAVA网页小游戏交流论坛计算机毕业设计源码+数据库+lw文档+系统+部署
基于JAVA网页小游戏交流论坛计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA网页小游戏交流论坛计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈: 项目架构:B/S架构开 ...
egret微信小游戏相关
文章目录官方文档开放数据域微信登录授权登录,获取微信用户信息,分享小游戏微信排行榜微信排行榜数据获取微信好友排行榜绘制主域名发送消息,共享域接受消息其他注意事项官方文档微信小游戏快 ...
matlab模拟小游戏,基于MATLAB的小游戏（puzzle）
更新: 没有素材或者.mat文件看着博客也比较难实现,下面是完整的游戏文件链接:https://pan.baidu.com/s/1CH_vFQQ_m2rIXde-VtkPWg 提取码:uo2x 游戏 ...
基于MATLAB的小游戏（puzzle）
更新: 没有素材或者.mat文件看着博客也比较难实现,下面是完整的游戏文件链接:https://pan.baidu.com/s/1CH_vFQQ_m2rIXde-VtkPWg 提取码:uo2x 游戏 ...
egret制作小游戏：数字华容道及有解判断（代码注释）（评论区有源码下载~）
继续学习egret,最近写了数字华容道的小游戏,非常简单的小游戏.首先预览一下效果: 数字华容道就是通过移动方块,将方块按照数字的排序进行排列.功能很简单,主要有刷新,提升阶数,如何一定有解,以及简单 ...
菜鸟|Egret微信小游戏好友排行榜教程
原文链接:https://mp.weixin.qq.com/s/kYIdnHv-C5KuR9snekPNBg 原文虽然是菜鸟教程,但是有几个地方没有说清楚,补充如下. 你可以先看原文,看不懂时,再来这 ...
python小游戏———拼图代码开源
♥️作者:小刘在这里 ♥️每天分享云计算网络运维课堂笔记,疫情之下,你我素未谋面,但你一定要平平安安,一起努力,共赴美好人生! ♥️夕阳下,是最美的,绽放,愿所有的美好,再疫情结束后如约而至. 目 ...
基于javascript扫雷小游戏，以前上学经常玩
引言: 扫雷是系统自带的经典小游戏,以前上学那会上机的时候就经常玩这个,趁着五一假期的最后一天,用canvas编写了这个小游戏,看着还行,不知道会不会有什么我没发现的bug,难度目前是设置成简易的,如 ...
【项目】游戏开发期末大作业之基于Java的小游戏 “大鱼吃小鱼“ （代码素材齐全）
1.EatFish游戏开发过程 1.游戏窗口创建 2.添加背景图片 3.启动封面 4.启动页面的点击事件 5.游戏开始的背景添加 6.双缓存解决闪屏问题 7.敌方鱼类的生成 8.我方鱼的生成 9.我方 ...

基于egret的小游戏——拼图

基于egret的小游戏——拼图相关推荐

最新文章

热门文章