最近忙着做几场训练营，没时间发技术文，被小友们催的不行了，今天就来交稿了，记得给老王个支持，给个转发点赞。
1、游戏概述
游戏随机打乱标有1-8的牌（各两张），比赛谁能够更快的找出相同数字的牌
2、实现效果
此处视频有点长，有兴趣的同学可以此处查看效果演示哦，源码也在这里）
https://gitee.com/kid-li/xunlianying
3、代码分析
整个开发过程分为两步，第一步是实现分布式，第二步是游戏的实现。是比较适合初级零基础同学操作的实验。
1）JS分布式
此处参考:
https://developer.huawei.com/consumer/cn/forum/topic/0201694228790070804?fid=0102683795438680754的分布式Demo，结合分布式迁移的文档，理解实现的流程，再根据应用的实际需求，修改迁移数据即可。
2）游戏的实现
大框架采用了Grid Ability，技术点主要是卡牌的翻转和判断，关键代码如下：
listFocus($idx) { //点击事件
this.textColor.$set($idx,'#000000');
setTimeout(this.confirm,500,$idx);
},
confirm($idx){
this.continueAbilityData.num ;
//判断两次点击是否一致
if(this.continueAbilityData.num%2 == 1) pre_idx = $idx;
if(this.continueAbilityData.num%2 == 0 && this.list_data[pre_idx] != this.list_data[$idx]) {
this.continueAbilityData.num = this.continueAbilityData.num-2;
this.textColor.$set($idx,'#CCCCCC');
this.textColor.$set(pre_idx,'#CCCCCC');
}
if(this.continueAbilityData.num == 16) {
this.$element("confirmDialog").show();
this.tryContinueAbility();
}
},
startgame(){
this.continueAbilityData.list_data.sort(function(){
return Math.random() > 0.5 ? -1: 1; //打乱卡牌
});
this.tryContinueAbility();
},
updatetime(){
if(this.memorytime != 0 ) {
this.memorytime -= 1;
if(this.memorytime == 0) this.reversecard();
}
else if(this.continueAbilityData.num != 16) this.gametime = 1;
else clearInterval(id);
},
reversecard(){ //翻转卡牌
this.textColor = ['#CCCCCC','#CCCCCC','#CCCCCC','#CCCCCC',
'#CCCCCC','#CCCCCC','#CCCCCC','#CCCCCC',
'#CCCCCC','#CCCCCC','#CCCCCC','#CCCCCC',
'#CCCCCC','#CCCCCC','#CCCCCC','#CCCCCC'];
},
这里的思路是，每次点击之后通过修改该卡牌数字的样式为#000000，让用户看到卡牌上的数字，如果两次翻牌数字不一样，则卡牌上的数字的样式修改为#CCCCCC。
此处避雷提示：修改data中的数据，如果是array类型，一定要用$set。直接赋值不能实现动态修改页面显示。
你如果是第一次写一个应用，过程应该会非常坎坷，遇到了很多很多问题，差不多是一踩一个坑的程度。所以老王一般是建议大家系统化学习的。自己摸索很难有成长~
我是老王，一个从事鸿蒙开发的中年老吃货。关注我，每天和你聊点关于华为、鸿蒙、应用开发的一些事儿。
——————
原创：老王丨【公众号：鸿蒙开发者老王】华为认证讲师 / 腾讯认证讲师 / 鸿蒙开发先行者
,
