How to obtain Hongmeng development skills with zero foundation? It's enough to read this article by Pharaoh

I've been busy doing a few training camps recently, and I don't have time to post technical articles. I've been urged by my friends. I'm here to submit the article today. Remember to support Lao Wang and give a retweet and like.

1. Game overview

The game randomly shuffles the cards marked 1-8 (two each), and contests who can find the same number of cards faster

2. Realize the effect

The video here is a bit long, interested students can view the effect demonstration here, the source code is also here)

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

3. Code Analysis

The whole development process is divided into two steps, the first step is to realize the distribution, and the second step is to realize the game. It is an experiment that is more suitable for primary zero-based students to operate.

1) JS distributed

Reference here:

The distributed Demo of https://developer.huawei.com/consumer/cn/forum/topic/0201694228790070804?fid=0102683795438680754, combined with the distributed migration documents, understand the implementation process, and then modify the migration data according to the actual needs of the application That's it.

2) Implementation of the game

The big frame adopts Grid Ability. The technical point is mainly to flip and judge the card. The key code is as follows:

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'];

    },

The idea here is to modify the style of the card number to #000000 after each click, so that the user can see the number on the card. If the numbers on the two flops are different, the style of the number on the card is modified to #CCCCCC.

Lightning protection tips here: Modify the data in data. If it is an array type, you must use $set. Direct assignment cannot realize dynamic modification of page display.

If you are writing an application for the first time, the process should be very bumpy, and you have encountered many, many problems, almost to the level of stepping on a pit. Therefore, Lao Wang generally recommends that everyone study systematically. It's hard to grow by exploring on your own~

I am Lao Wang, a middle-aged and old foodie who is engaged in the development of Hongmeng. Follow me and talk to you about Huawei, Hongmeng, and application development every day.

——————

Original: Lao Wang丨[Public Account: Hongmeng Developer Laowang] Huawei Certified Instructor / Tencent Certified Instructor / Hongmeng Development Pioneer