0基础小白要怎么获得鸿蒙开发技能？看老王这一篇就够了 - HarmonyOS技术社区 - 电子技术论坛

2021-10-28 15:36:08

最近忙着做几场训练营，没时间发技术文，被小友们催的不行了，今天就来交稿了，记得给老王个支持，给个转发点赞。

1、游戏概述

游戏随机打乱标有1-8的牌（各两张），比赛谁能够更快的找出相同数字的牌

2、实现效果

此处视频有点长，有兴趣的同学可以此处查看效果演示哦，源码也在这里）

https://gitee.com/kid-li/xunlianying

3、代码分析

整个开发过程分为两步，第一步是实现分布式，第二步是游戏的实现。是比较适合初级零基础同学操作的实验。

1）JS分布式

此处参考:

https://developer.huawei.com/con ... 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。直接赋值不能实现动态修改页面显示。

你如果是第一次写一个应用，过程应该会非常坎坷，遇到了很多很多问题，差不多是一踩一个坑的程度。所以老王一般是建议大家系统化学习的。自己摸索很难有成长~

我是老王，一个从事鸿蒙开发的中年老吃货。关注我，每天和你聊点关于华为、鸿蒙、应用开发的一些事儿。

——————

原创：老王丨【公众号：鸿蒙开发者老王】华为认证讲师 / 腾讯认证讲师 / 鸿蒙开发先行者

回帖高级模式

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。侵权投诉

[文章]0基础小白要怎么获得鸿蒙开发技能？看老王这一篇就够了

回帖高级模式