锐客网

  1. 首页 > 睿知 > it技术 > >

简单的JS鸿蒙小游戏——记忆翻牌之游戏逻辑详解

IT知识详解游戏逻辑

智慧并不产生于学历,而是来自对于知识的终生不懈的追求。这篇文章主要讲述简单的JS鸿蒙小游戏——记忆翻牌之游戏逻辑详解相关的知识，希望能为你提供帮助。
前言书接上回，完成游戏页面的构建后，今天带大家详细讲讲游戏逻辑的具体实现代码。其实整个游戏逻辑的实现并不难，相信大家看完之后都有能力自己开发出简单的小游戏。
游戏逻辑 1、游戏时间区间设置

  • 设置两个变量MeTime和MaxTime分别作为游戏记忆时间和游戏限定时间的默认值。
var MeTime = 15; var MaxTime = 60;

  • 用timeset函数改变这两个属性的值，在hml文件中对应的加减按钮分别传参（变量名和差值）。另外在修改语句外加一个执行判断用以限定时间的设置区间。
timeset(time, alter) if(time == "metime") if((5 < = this.metime+alter) & & (30 > = this.metime+alter)) this.metime += alter; else if((20 < = this.maxtime+alter) & & (120 > = this.maxtime+alter)) this.maxtime += alter; ,

简单的JS鸿蒙小游戏——记忆翻牌之游戏逻辑详解

文章图片

2、顶部计时器
  • 事先声明两个重复计时器setdown和setadd。
var setdown; var setadd;

  • 开始游戏进入记牌环节，重复计时器setdown从设置中获取变量metime的值作为记忆时间，倒计时直至为0。之后清除该计时器，启动另一重复计时器setadd。
//倒计时记忆时间 memory() setdown = setInterval(()=> this.thetime --; if(0 > = this.thetime) //开启可点击，开始正向计时， clearInterval(setdown); this.tick = false; this.L_dab = false; this.R_dab = false //盖上图片 for(var all=0; all< 24; all++) this.cards[all].src = "https://www.songbingjia.com/android/unknown"; this.cards[all].dab = false; this.timing(); , 1000); ,

  • 重复计时器setadd开始正向计时，直至达到限定时间maxtime或是玩家完成游戏。
//正向计时，监控匹配判断，超时判断，完成判断 timing() setadd = setInterval(()=> this.thetime += 1; console.info(JSON.stringify(this.tempqueue)); if(1 < this.tempqueue.length) //执行判断 this.cover(); if(12 < = this.score) clearInterval(setadd); this.result = "游戏胜利！"; console.info("游戏胜利！"); this.popup = true; this.L_dab = true; this.R_dab = true; if(this.maxtime < = this.thetime) clearInterval(setadd); this.result = "超时失败……"; console.info("超时失败……"); this.popup = true; this.L_dab = true; this.R_dab = true; , 1000); ,

  • 游戏过程中点击计时器暂停游戏计时，清除当前的重复计时器，点击“继续游戏”重新启动对应的重复计时器接着计时。其中以标识符变量tick记录当前是处于牌组记忆环节还是游戏配对环节。
//暂停游戏 gamestop() this.pause = true; if(true == this.tick) for(var all=0; all< 24; all++) this.cards[all].src = "https://www.songbingjia.com/android/unknown"; clearInterval(setdown); else clearInterval(setadd); ,

3、随机打乱牌堆
  • 设置两个循环分别将左右牌组各十二张图片随机打乱。
//打乱牌堆 mess_up() var Lindex, Rindex; var temp; //临时置换变量 var ran; //随机下标 //打乱左边图标（0~11） for(Lindex=0; Lindex< 12; Lindex++) ran = Math.floor(Math.random()*12); temp = this.cards[Lindex]; this.cards[Lindex] = this.cards[ran]; this.cards[ran] = temp; //打乱右边图标（12~23） for(Rindex=12; Rindex< 24; Rindex++) ran = Math.floor(Math.random()*12) + 12; temp = this.cards[Rindex]; this.cards[Rindex] = this.cards[ran]; this.cards[ran] = temp; for(var all=0; all< 24; all++) this.cards[all].src = https://www.songbingjia.com/android/this.cards[all].index; //启动倒计时 this.memory(); ,

  • 为了方便测试可以在日志上打印打乱后的牌组序列进行验证。
var LLL = new Array; var RRR = new Array; //打印左边序号 console.info("————左边————"); for(var l=0; l< 12; l++) LLL.push(this.cards[l].index); console.info(JSON.stringify(LLL)); //打印右边序号 console.info("————右边————"); for(var r=12; r< 24; r++) RRR.push(this.cards[r].index); console.info(JSON.stringify(RRR));

简单的JS鸿蒙小游戏——记忆翻牌之游戏逻辑详解

文章图片

4、“盖上”图片
这里的“盖上”图片是指将原本的图片替换成统一的未知问号图片。
//盖上图片 for(var all=0; all< 24; all++) this.cards[all].src = "https://www.songbingjia.com/android/unknown"; this.cards[all].dab = false;

  • 在记忆准备环节点击暂停会“盖上”所有图片；
  • 在倒计时结束进入游戏配对环节后，会“盖上”所有的图片；
  • 在配对失败后会重新“盖上”图片。
5、翻看图片
点击某个问号图片可以翻开显示，之后锁定这一边为不可点击状态，玩家只能点击翻开另一边牌组的某个图片进行配对。
//翻牌 turnover(index) console.info("点击了" + index); if(this.cards[index].src != "unknown") console.info("请翻别的牌"); return; this.tempqueue.push(index); this.cards[index].src = https://www.songbingjia.com/android/this.cards[index].index; this.cards[index].dab = true; if(index < 12) this.L_dab = true; else this.R_dab = true; if((true == this.L_dab) & & (true == this.R_dab)) this.L_dab = false; this.R_dab = false; ,

6、配对逻辑
配对逻辑判断置于重复计时方法中，每次翻看图片后会将其下标入队，计时器每秒都会监控队列长度，当队列长度大于1时，则两两一组执行配对判断。当配对成功后配对成功计数器加一，配对失败则将这组图片重新“盖上”，再将队首的两个元素出队。当限定时间内计数器达到12时弹出游戏胜利弹窗。
//重新盖牌 cover() if(this.cards[this.tempqueue[0]].index != this.cards[this.tempqueue[1]].index) console.info("配对失败"); this.cards[this.tempqueue[0]].src = "https://www.songbingjia.com/android/unknown"; this.cards[this.tempqueue[0]].dab = false; this.cards[this.tempqueue[1]].src = "https://www.songbingjia.com/android/unknown"; this.cards[this.tempqueue[1]].dab = false; else console.info("配对成功"); this.score += 1; this.tempqueue.splice(0, 2); ,

7、游戏环节切换
  • 暂停游戏
//暂停游戏 gamestop() this.pause = true; if(true == this.tick) for(var all=0; all< 24; all++) this.cards[all].src = "https://www.songbingjia.com/android/unknown"; clearInterval(setdown); else clearInterval(setadd); ,

  • 继续游戏
//继续游戏 resume() this.pause = false; if(true == this.tick) for(var all=0; all< 24; all++) this.cards[all].src = https://www.songbingjia.com/android/this.cards[all].index; this.memory(); else this.timing(); ,

  • 重新开始
//重新开始 restart() this.L_dab = true; this.R_dab = true; this.tempqueue = []; this.score = 0; this.popup = false; this.pause = false; this.gameset = false; this.tick = true; clearInterval(setdown); clearInterval(setadd); this.thetime = this.metime; for(var all=0; all< 24; all++) this.cards[all].src = "https://www.songbingjia.com/android/unknown"; this.cards[all].dab = false; this.mess_up(); ,

  • 返回设置
//返回设置弹窗 toset() this.L_dab = true; this.R_dab = true; this.thetime = 0; this.tempqueue = []; this.score = 0; this.popup = false; this.pause = false; this.gameset = true; for(var all=0; all< 24; all++) this.cards[all].src = https://www.songbingjia.com/android/(all)%12 + 1; this.cards[all].dab = false;

结语希望这个小游戏能吸引更多的开发者加入鸿蒙应用开发的行列中来，共同学习，共同进步，一起为鸿蒙生态共建出力。
附件链接
https://harmonyos.51cto.com/resource/1691
想了解更多关于鸿蒙的内容，请访问：
51CTO和华为官方合作共建的鸿蒙技术社区
https://harmonyos.51cto.com/#bkwz
::: hljs-center
简单的JS鸿蒙小游戏——记忆翻牌之游戏逻辑详解

文章图片

【简单的JS鸿蒙小游戏——记忆翻牌之游戏逻辑详解】:::

    推荐阅读


    上一篇：微服务架构 | 10.3 使用 Zipkin 可视化日志追踪 #yyds干货盘点#

    下一篇：北亚数据恢复MongoDB数据迁移过程中由于未知原因丢失_mdb_catalog.wt文件的MongoDB数据恢复案例