简单的JS鸿蒙小游戏——记忆翻牌之游戏逻辑详解 原创 精华
Looker_song
发布于 2022-2-3 17:41
浏览
3收藏
前言
书接上回,完成游戏页面的构建后,今天带大家详细讲讲游戏逻辑的具体实现代码。其实整个游戏逻辑的实现并不难,相信大家看完之后都有能力自己开发出简单的小游戏。
游戏逻辑
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;
}
}
},
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 = "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 = "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 = 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));
4、“盖上”图片
这里的“盖上”图片是指将原本的图片替换成统一的未知问号图片。
//盖上图片
for(var all=0; all<24; all++) {
this.cards[all].src = "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 = 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 = "unknown";
this.cards[this.tempqueue[0]].dab = false;
this.cards[this.tempqueue[1]].src = "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 = "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 = 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 = "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 = (all)%12 + 1;
this.cards[all].dab = false;
}
}
结语
希望这个小游戏能吸引更多的开发者加入鸿蒙应用开发的行列中来,共同学习,共同进步,一起为鸿蒙生态共建出力。
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
Match.rar 6.38M 146次下载
已于2022-2-3 17:41:14修改
赞
6
收藏 3
回复
相关推荐
结合楼主之前的文章食用更佳——简单的JS鸿蒙小游戏——记忆翻牌之页面构建