白鹭小游戏-成语挑战-游戏页面-字块

最新推荐文章于 2022-08-31 22:10:18 发布
最新推荐文章于 2022-08-31 22:10:18 发布
阅读量210 收藏
点赞数
分类专栏： 小游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42448623/article/details/103139032
版权

白鹭小游戏-成语挑战-整体项目结构

游戏页面

皮肤文件 gameScene.exml

构建皮肤文件 构建方法参照 loading 页面构建方法

在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="gameSceneSkin" width="640" height="1136" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing" xmlns:ns1="*" >
	<w:Config id="16e6ddba53c" ></w:Config>
	<e:Image source="GameBG3_jpg" x="0" width="640" locked="true"/>
	<e:Button id="btn_return" label="" x="15" y="14" anchorOffsetX="0" width="81" anchorOffsetY="0" height="61" locked="true">
		<e:skinName>
			<e:Skin states="up,down,disabled">
			<e:Image width="100%" height="100%" source="BackBtn_png" source.down="BackBtn1_png"/>
			<e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0"/>
			</e:Skin>
		</e:skinName>
	</e:Button>
	<e:Image source="WordFrame_png" x="0" y="98" anchorOffsetX="0" width="642" anchorOffsetY="0" height="447" locked="true"/>
	<e:Image id="img" width="389" height="261" x="123" y="164" anchorOffsetX="0" anchorOffsetY="0" locked="true"/>
	<e:Group id="gp_answer" width="365" height="78" x="134" y="442" anchorOffsetX="0" anchorOffsetY="0" locked="true">
	</e:Group>
	<e:Group id="gp_select" width="565" height="512" x="41" y="581" anchorOffsetX="0" anchorOffsetY="0" locked="true">
	</e:Group>
	<e:Group id="gp_win" width="584" height="388" x="31.5" y="672" anchorOffsetX="0" anchorOffsetY="0" locked="true" visible="false">
		<e:Image source="Result_png" x="0" y="0" anchorOffsetX="0" width="584" anchorOffsetY="0" height="388"/>
		<e:Label id="label_tip" text="成语提示" x="84" y="102" textColor="0x000000"/>
		<e:Label id="libel_content" text="成语出处" x="84" y="194" textColor="0x000000"/>
		<e:Button id="btn_next" label="" x="413" y="308" anchorOffsetX="0" width="107" anchorOffsetY="0" height="52">
			<e:skinName>
				<e:Skin states="up,down,disabled">
				<e:Image width="100%" height="100%" source="ResultBtn_png" source.down="ResultBtn1_png"/>
				<e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0"/>
				</e:Skin>
			</e:skinName>
		</e:Button>
	</e:Group>
	<e:Group id="gp_message" width="584" height="300" x="28" y="672" locked="true" visible="false">
		<e:Image source="Dialog_png" x="40"/>
		<e:Label id="label_word" text="提示信息" x="81" y="73" textColor="0x000000"/>
		<e:Button id="btn_msg" label="" x="447.5" y="197" anchorOffsetY="0" height="49" anchorOffsetX="0" width="70">
			<e:skinName>
				<e:Skin states="up,down,disabled">
				<e:Image width="100%" height="100%" source="BackBtn_png" source.down="BackBtn1_png"/>
				<e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0"/>
				</e:Skin>
			</e:skinName>
		</e:Button>
	</e:Group>
</e:Skin>

效果图
在这里插入图片描述

gameScene.ts
class gameScene extends eui.Component implements  eui.UIComponent {
	public constructor() {
		super();
	}

	private cur_lev:number
	private signboard:number //标识 
	public btn_return:eui.Button;
	public img:eui.Image;
	public gp_answer:eui.Group;
	public gp_select:eui.Group;
	public gp_win:eui.Group;
	public label_tip:eui.Label;
	public libel_content:eui.Label;
	public btn_next:eui.Button;
	public gp_message:eui.Group;
	public label_word:eui.Label;
	public btn_msg:eui.Button;



	private curData:any;
	public answerArr:any = [];
	public selectArr:any = [];

	// 单例
	private static shared:gameScene
	public static getInstance(){
		if(!gameScene.shared){
			gameScene.shared = new gameScene()
		}
		return gameScene.shared
	}

	protected partAdded(partName:string,instance:any):void
	{
		super.partAdded(partName,instance);
	}


	protected childrenCreated():void
	{
		super.childrenCreated();
	}
	
	// 初始化
	public initLvdata(lev:number){
		console.log("lev:",lev)
		this.removeAnswerSelect()
		this.btn_return.addEventListener(egret.TouchEvent.TOUCH_TAP,this.btnreturn,this)
		this.btn_next.addEventListener(egret.TouchEvent.TOUCH_TAP,this.btnNext,this)
		this.btn_msg.addEventListener(egret.TouchEvent.TOUCH_TAP,this.btnMsg,this)

		// 记录单前关卡
		this.cur_lev = lev
		// 获取数据
		this.curData = levelDatamanager.Shared().getLevelData(lev);
		console.log(this.curData)
		// 设置问题图片
		this.img.source = "resource/assets/data/" + this.curData.img
		// 设置问题字
		let words:string = this.curData.answer + this.curData.word
		// 拼接二十个字符 插入选择区域
		while(words.length == 10){
			let i = Math.floor(Math.random()*levelDatamanager.Shared().levNumber);
			if(i != lev){
				let random_levdata:any = levelDatamanager.Shared().getLevelData(i);
				words += random_levdata.answer + random_levdata.word
			}
		}

		let wordsArr = words.split('')
		this.setAnswer();
		this.setSelect(wordsArr);
		// this.gp_answer.addEventListener(egret.TouchEvent.TOUCH_TAP,this.answerClick,this)
		
	}

	// 清空 答案区域、选择区域
	private removeAnswerSelect(){
		let anLen:number = 0;
		let seLen:number = 0;
		if(this.gp_answer.$children){
			anLen = this.gp_answer.$children.length;
		}
		if(this.gp_select.$children){
			seLen = this.gp_select.$children.length;
		}
		for(let i:number = anLen; i > 0; i--){
			this.gp_answer.removeChild(this.answerArr[i-1].word)
			delete this.answerArr[i-1]
		}
		for(let j:number = seLen; j > 0; j--){
			this.gp_select.removeChild(this.selectArr[j-1].word)
			delete this.selectArr[j-1]
		}
		this.answerArr = []
		this.selectArr = []
	}

	// 点击答案区 没有发现事件源对象 事件委托不了
	// private answerClick(e){//:egret.TouchEvent
	// 	console.log("answerClick",e)
	// }

	// 插入答案区域
	private setAnswer(){
		let arr:number[] = [2,97,192,287]
		for(let i:number=0; i < 4; i++){
			let wordEle:word = new word();
			wordEle.x = arr[i];
			
			this.gp_answer.addChild(wordEle)
			wordEle.answertext = '';//要在addChild后面
			wordEle.signboard = i;
			wordEle.addEventListener(egret.TouchEvent.TOUCH_TAP,this.answerClick,this)
			this.answerArr.push({
				word:wordEle,
				text:'',
				signboard:i,
				select:null
			})
		}
	}
	private answerClick(e:egret.TouchEvent){
		musicManager.getMusic().playBtnMusic()
		let word = <word>e.currentTarget;
		let obj:any = this.getAnswerWord(word.signboard)
		
		// 文字原路返回
		if(obj.sta && this.answerArr[obj.index].select){
			this.answerArr[obj.index].select.visible = true;
			this.answerArr[obj.index].select = null;
			this.answerArr[obj.index].text = '';
			word.answertext = '';
		}
	}

	// 辨别点击那个答案文字
	private getAnswerWord(num:number){
		let len:number = this.answerArr.length;
		for(let i:number = 0; i < len; i++){
			if(this.answerArr[i].signboard == num){
				return {sta:true,index:i}
			}
		}
		return {sta:false,index:null}
	}

	// 插入选择区域
	private setSelect(arr){
		let len:number = arr.length;
		let randomArr = this.radomNumber(len);
		let wordX:number = 0
		for(let i:number = 0; i < len; i++){
			let wordEle:word = new word();
			let num = i%5 
			if(num == 0){
				wordX++
			}
			wordEle.width = 77;
			wordEle.height = 77;
			wordEle.signboard = i
			wordEle.x = num * ((this.gp_select.width/5 - wordEle.width)*5/4 + wordEle.width);
			wordEle.y = wordX * ((this.gp_select.height/5 - wordEle.height)*5/4 +wordEle.height);
			this.gp_select.addChild(wordEle)
			wordEle.answertext = arr[randomArr[i]];//要在addChild后面
			wordEle.addEventListener(egret.TouchEvent.TOUCH_TAP,this.selectClick,this)
			this.selectArr.push({
				word:wordEle,
				select:false,
				AnswerArrIndex:null,
				signboard:i
			})
		}
	}

	private selectClick(e:egret.TouchEvent){
		musicManager.getMusic().playBtnMusic()
		let word = <word>e.currentTarget;
		
		let obj:any = this.getAnswerSelect();
		
		if(obj.sta){
			this.answerArr[obj.index].text = word.answertext
			this.answerArr[obj.index].word.answertext = word.answertext
			this.answerArr[obj.index].select = word;
			word.visible = false;
		}else{
			this.showWin()// 文字选择完毕 第5个字
		}
	}

	// 区分答案文字选到了第几个
	private getAnswerSelect(){
		let len:number = this.answerArr.length;
		for(let i:number = 0; i < len; i++){
			if(this.answerArr[i].select == null){
				return {sta:true,index:i}
			}
		}
		// 4个文字已选完
		return {sta:false,index:null}
	}

	// 获取选择的文字
	private getSelectText(){
		let len:number = this.answerArr.length;
		let str:string = "";
		for(let i:number = 0; i < len; i++){
			str += this.answerArr[i].text
		}
		return str
	}

	private showWin(){
		// console.log("文字选择完毕",this.getSelectText(),this.curData)
		if(this.getSelectText() === this.curData.answer){
			this.label_tip.text = this.curData.tip;
			this.libel_content = this.curData.content;
			this.gp_win.visible = true;
			musicManager.getMusic().playSucc_music()
		}else{
			this.label_word.text = this.curData.word;
			this.gp_message.visible = true;
			musicManager.getMusic().playErr_music()
		}
	}	

	// 产生20个不重复数字
	private radomNumber(len:number){
		let arr:number[] = [];
		for(let i:number = 0; i<len; i++){
			arr.push(i)
		}
		arr.sort(function(a,b){
			return Math.random()-0.5
		})
		return arr
	}

	// 返回
	private btnreturn() {
		musicManager.getMusic().playBtnMusic()
		this.parent.addChild(ChooseLevels.Shared())
		ChooseLevels.Shared().init()
		this.parent.removeChild(this)
	}

	// 关闭消息提示
	private btnMsg(){
		musicManager.getMusic().playBtnMusic()
		this.gp_message.visible = false;
	}

	// 下一关 刷新单前页面
	private btnNext(){
		musicManager.getMusic().playBtnMusic()
		this.gp_win.visible = false;

		// 单前游戏关卡 = 全局游戏进度 ->下一关 更新全局游戏进度
		if(this.cur_lev === levelDatamanager.Shared().progress){
			levelDatamanager.Shared().progress ++
		}
		this.initLvdata(this.cur_lev+1)
	}

	
}

字块EUI组件 word

皮肤文件 word.exml

构建皮肤文件 构建方法参照 loading 页面构建方法
在这里插入图片描述

<?xml version="1.0" encoding="utf-8" ?>
<e:Skin class="wordSkin" states="up,down,disabled" minHeight="50" minWidth="100" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing" width="77" height="77">
	<e:Rect width="77" height="77" x="0" y="0" fillColor="0xffffff" strokeWeight="4" strokeColor="0x0276d0" ellipseWidth="20" ellipseHeight="20" locked="true"/>
	<e:Label id="lab_btn" text="字" x="7" y="7" anchorOffsetX="0" width="64" anchorOffsetY="0" height="64" textColor="0x000000" size="60" textAlign="center" verticalAlign="middle" locked="true"/>

	<w:Config id="16e6de6f64b" ></w:Config>
</e:Skin>
word.ts
class word extends eui.Button implements  eui.UIComponent {
	public constructor() {
		super();
	}
	public lab_btn:eui.Label;
	public signboard:number //标识 

	protected partAdded(partName:string,instance:any):void
	{
		super.partAdded(partName,instance);
		this.skinName = "resource/game/word.exml"
	}


	protected childrenCreated():void
	{
		super.childrenCreated();
	}

	public set answertext(val:string){
		this.lab_btn.text = val
	}

	public get answertext(){
		return this.lab_btn.text
	} 
	
}
tianmeng1999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
h5小游戏,白鹭小游戏
04-07
白鹭小游戏，通常指的是基于Egret引擎开发的HTML5小游戏。Egret是一个开源的、跨平台的2D和3D游戏开发框架，它专为构建高性能的移动和桌面浏览器游戏而设计。H5小游戏则代表使用HTML5技术开发的游戏，可以在网页上...
白鹭H5飞机小游戏源码+完整资源.zip
12-20
《白鹭H5飞机小游戏开发详解》 白鹭H5飞机小游戏是一款基于HTML5技术开发的轻量级游戏，它以其简洁的操作、丰富的玩法和良好的跨平台性深受玩家喜爱。这款小游戏的源码开放，为开发者提供了一次深入学习H5游戏开发...
免费资源-成语答题小程序源码+教程
tbosoft的博客
03-16 1080
先上效果图： 后台安装配置 小程序后台是搭建在微擎系统上的，本小编分享的好多源码，都是基于微擎的，具体微擎是啥，不懂的只能自行度娘了，安装好微擎是前提。 上传后台源码到addons目录，然后打开微擎后台 安装成功后，就可以添加小程序了 添加好了之后可以进入微擎管理的小程序后台先导入一下题库并设置下系统参数 具体后台的设置可以参考安装包里面的截图。 当然最最最重要的是，如果你开通的流量主，要设置下面的广告id，不然就白玩了呀。 前台安装...
最新版ui成语填空答题，成语接龙小程序源码，修复登录接口问题
qq_40703349的博客
02-25 3599
这类的成语接龙填词游戏，之前我就见过朋友在玩，自带裂变属性，引流、广告效果都是一绝。强制分享广告，可拆随机金额红包，广告配置、激励配置等都在后台即可配置管理，无需翻改代码。朋友运营过的东西，自然不用多说。可对接cpa广告联盟也可自己做广告主，如何运营推广就看大家怎么用了。 下载地址：https://www.5233.xyz ...
成语小秀才云开发代码 成语答题小程序源码
程序员锤哥的博客
02-26 1625
成语消消乐小程序采用云开发版本，无需服务器域名，个人或企业都可搭建使用。目前该主要用于个人小游戏答题，目前小程序集成微信banner广告，视频广告，插屏广告，激励视频广告等功能，方便运营者赚取广告收益. 成语答题小程序： https://developers.weixin.qq.com/community/develop/article/doc/0006041d778350dfbb4b0a60456c13 闯关答题小程序： https://developers.weixin.qq.com/.
在线成语接龙答题有奖微信小程序源码V1.5.1
ergrgs的博客
08-31 548
运行环境：php5.6+mysql5.6 （环境配置为调试时的配置）域名需配置ssl后才可以通过https访问。微信小程序在线成语接龙答题有奖源码。
android简单小程序学成语,分享3个成语游戏小程序，让你学习游戏两不误
weixin_31664931的博客
05-27 967
原标题：分享3个成语游戏小程序，让你学习游戏两不误1.杜甫教成语杜甫教成语，一个轻松简单的学成语小程序，是一个猜字型的小程序，是一个考验我们的成语词库深度的小程序。杜甫教成语其实是一个既可以玩游戏，又可以学习到成语的游戏，它的玩法十分简单，是通过两个成语来猜出一个字，这个字能同时让两个成语通顺起来，在玩小程序的过程中既能让我们体验玩游戏的乐趣，也能让我们在游戏扩展加深自己的知识库，还能考验我们的记...
白鹭小游戏-成语挑战-开始页面
weixin_42448623的博客
11-19 182
跳转开始页面 Main.ts /** * 创建场景界面 * Create scene interface */ protected createGameScene(): void { this.addChild(Begin.Shared()) //打开页面 } 皮肤文件 构建皮肤文件 构建方法参照 loading 页面构建方法 <?xml version="1.0" encodi...
合成小姐姐-白鹭.zip源码Egert项目源码下载
03-17
合成小姐姐-白鹭.zip源码合成小姐姐-白鹭.zip源码Egert项目源码下载 1.适合个人学习技术做项目参考 2.开发脚本为javsScropt或者typeScript 3.适合小公司开发游戏项目参考
crypto-js for egret(白鹭).zip
03-10
AES 加密 ， crypto-js 库 egret (白鹭引擎) 可以直接引用。 适合H5 egret 白鹭开发者。 亲测可用！ 使用的话，用 bin 目录里面的那个就行。 包含到工程的方法请参考官方包含第三方库的说明。 示例代码...
Egret demo - 学习白鹭游戏开发.zip
04-19
《白鹭游戏开发学习指南——基于Egret框架》 在游戏开发领域，Egret引擎因其高效、轻量级的特性，成为了许多开发者青睐的2D游戏开发工具。...一步步来，你会发现白鹭游戏开发并非遥不可及，而是充满乐趣和挑战的旅程。
微信小程序秀才成语接龙趣味答题小游戏带流量主无授权源码
banzhuan678的博客
08-02 827
介绍： 流量主带：横屏广告，视频广告，插屏广告，激励广告 趣味性很强！会推广运营肯定能赚一笔。 这套源码也是淘宝买的 网盘下载地址： http://kekewangLuo.cc/j27EjMGhsPL0 图片：
经济开发区智慧园区建设方案汇报.pptx
08-13
经济开发区智慧园区建设方案汇报.pptx
STM32资料，用来备份专用
08-13
这个不需要下载，个人使用的。。
Git 基础教程.pdf
最新发布
08-13
Git 基础教程.pdf
信息化发展规划之IT治理优化.pptx
08-13
信息化发展规划之IT治理优化.pptx
财务收入支出记账表.xlsx
08-13
工资表，财务报表，对账表，付款申请，财务报告，费用支出表，财务收支 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
轴承装配机3D数模图纸 CREO设计_机械3D图可修改打包下载.zip
08-13
轴承装配机3D数模图纸 CREO设计_机械3D图可修改打包下载.zip
2022年白鹭引擎Linux游戏服务端与GM后台亲测整理
"白鹭引擎游戏 2022整理Linux手工服务端+GM后台【亲测】网盘链接提取码下载 .txt" 本文将详细探讨白鹭引擎在游戏开发中的应用，以及如何在Linux环境下搭建和管理服务端，同时会提及GM（Game Master）后台的使用。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值