零基础怎么获得鸿蒙开发技能？看老王这一篇就够了

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

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。直接赋值不能实现动态修改页面显示。

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

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

——————

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

零基础怎么获得鸿蒙开发技能？看老王这一篇就够了

Guess you like