使用鸿蒙开发一款TV版的小游戏

2048大家应该都玩过，今天我们就来实现一个可以在鸿蒙系统上运行的2048小游戏，因为没有智慧屏，所以这里是在鸿蒙远程TV模拟器上运行的，大概长下面这样：

鸿蒙TV模拟器

在开始写代码之前，我们来分析下，要实现这个小游戏大概需要这么几步：

1.自定义数字卡片的样式CardView，包含设置卡片的文本数字，以及卡片的数字的颜色，以及单个卡片的背景。
2.自定义一个游戏视图GameView，所有和游戏相关的逻辑都在这个View处理，当然最重要的还是手势的监听。
3.在主页面引用自定义的GameView，以及添加一些分数，最高分，悔棋，重新开始等按钮，和游戏介绍等。

1.自定义游戏卡片CardView

PS：为什么要定一个CardView，你不直接用鸿蒙中的Text控件，给它设置一个背景呢，主要是想把设置数字和数字颜色和背景的相关逻辑单独处理。

这里要介绍一下两个鸿蒙中的控件，Text和StackLayout，用法上相当于Android中的TextView和FramLayout，用来展示文本和包裹子控件的，当然这里也不一定需要用StackLayout，也可以用鸿蒙中的其他ViewGrop来代替，这里就不作过多介绍了，具体可以自行查询官网了解。我们可以分几步来实现自定义的CardView：

1.继承自StackLayout，实现其中3个构造方法。
2.在初始化方法中声明一个Text，设置Text的背景。
3.定义一个方法，用来根据数字设置文本的字体颜色和背景。

    /**
     * 初始化方法
     * 在初始化方法中声明一个Text，设置Text的背景
     */
    void initView() {
        //声明一个Text
        lable = new Text(getContext());
        lable.setTextSize(60);
        lable.setTextAlignment(TextAlignment.CENTER);

        //设置textView的背景
        ShapeElement element = new ShapeElement();
        element.setRgbColor(new RgbColor(198, 187, 183));
        lable.setBackground(element);
        LayoutConfig layoutConfig = new LayoutConfig(-1, -1);
        addComponent(lable, layoutConfig);
        setNum(0);
    }

   /**
     * 设置卡片文字和背景颜色
     * @param num
     */
    void setTextColor(int num){
       ShapeElement element = new ShapeElement();
       switch (num){
           case 0:
               element.setRgbColor(new RgbColor(205, 193, 180));
               break;
           case 2:
               lable.setTextColor(new Color(Color.getIntColor("#645B52")));
               element.setRgbColor(new RgbColor(238,228,218));
               break;
           case 4:
               lable.setTextColor(new Color(Color.getIntColor("#645B52")));
               element.setRgbColor(new RgbColor(237,224,200));
               break;
           case 8:
               lable.setTextColor(new Color(Color.getIntColor("#FFFFFF")));
               element.setRgbColor(new RgbColor(242,177,121));
               break;
           case 16:
               lable.setTextColor(new Color(Color.getIntColor("#FFFFFF")));
               element.setRgbColor(new RgbColor(245,149,99));
               break;
           case 32:
               lable.setTextColor(new Color(Color.getIntColor("#FFFFFF")));
               element.setRgbColor(new RgbColor(246,124,95));
               break;
           case 64:
               lable.setTextColor(new Color(Color.getIntColor("#FFFFFF")));
               element.setRgbColor(new RgbColor(246,94,59));
               break;
           case 128:
               lable.setTextColor(new Color(Color.getIntColor("#FFFFFF")));
               element.setRgbColor(new RgbColor(237,207,114));
               break;
           case 256:
               lable.setTextColor(new Color(Color.getIntColor("#FFFFFF")));
               element.setRgbColor(new RgbColor(237,204,97));
               break;
           case 512:
               lable.setTextColor(new Color(Color.getIntColor("#FFFFFF")));
               element.setRgbColor(new RgbColor(153,204,0));
               break;
           case 1024:
               lable.setTextColor(new Color(Color.getIntColor("#FFFFFF")));
               element.setRgbColor(new RgbColor(131,175,155));
               break;
           case 2048:
               lable.setTextColor(new Color(Color.getIntColor("#FFFFFF")));
               element.setRgbColor(new RgbColor(0,153,204));
               break;
       }
        element.setCornerRadius(10);
        lable.setBackground(element);
    }

PS：这里要注意下，设置背景颜色的话目前只能通过ShapeElement，调用其中的setRgbColor方法，设置RGB颜色。

2.自定义游戏视图GameView

1.继承TabLayout，实现其构造方法，其中TabLayout和Android中的很像，只是目前api还没有Android中那么多买单时也可以用来显示表哥布局，这里我们要实现TabLayout来绘制游戏的16宫格视图。
2.定义一个卡片二维数组cardMap，用来保存卡片的位置和数字信息。定义个用来记录滑动自前卡片位置的二维数组retractMap用来实现悔棋。
3.使用setTouchEventListener方法重写onTouchEvent来监听手势的滑动，实现上下左右滑动的监听。
4.实现上下左右滑动监听的逻辑，合并数字卡片以及悔棋相关逻辑。使用SoundPlayer来播放滑动时候的声音。
5.实现游戏结束逻辑，如果有cardMap里面有值为0即还有空格，或者当前格上下左右有相等的数字，则游戏继续，否则游戏结束
具体逻辑实现可以参考已下代码：

实现手势滑动监听，区别上下左右代码

        //设置触摸监听事件
        setTouchEventListener(new TouchEventListener() {
            private float starX, starY, offsetX, offsetY;

            @Override
            public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
                MmiPoint point = touchEvent.getPointerScreenPosition(0);
                switch (touchEvent.getAction()) {
                    case TouchEvent.PRIMARY_POINT_DOWN:
                        starX = point.getX(); //记录手指按下的x点坐标
                        starY = point.getY(); //记录手指按下的y点坐标
                        break;
                    case TouchEvent.PRIMARY_POINT_UP:
                        offsetX = point.getX() - starX;//横向滑动距离
                        offsetY = point.getY() - starY;//纵向滑动距离
                        if (Math.abs(offsetX) > Math.abs(offsetY)) {
                            if (offsetX < -5) {
                                //左滑监听
                                System.out.println("左边");
                                swipeLeft();
                            } else if (offsetX > 5) {
                                //右滑监听
                                System.out.println("右边");
                                swipeRight();
                            }
                        } else {
                            if (offsetY < -5) {
                                //上滑监听
                                System.out.println("上边");
                                swipeUp();
                            } else if (offsetY > 5) {
                                //下滑监听
                                System.out.println("下边");
                                swipeDown();
                            }
                        }

                        break;
                }
                return true;
            }
        });

实现上下左右滑动业务逻辑代码

 private void swipeLeft() {
        retractMap();
        boolean isMerge = false;
        //向左边滑动
        for (int y = 0; y < 4; y++) {
            for (int x = 0; x < 4; x++) {
                for (int x1 = x + 1; x1 < 4; x1++) {
                    //如果同一行的右边的点数字大于0
                    if (cardMap[x1][y].getNum() > 0) {
                        //如果最左边没有数字时，则将右边数字移动到左边
                        if (cardMap[x][y].getNum() <= 0) {
                            //添加移动动画，目前还有问题
//                            mainAbilitySlice.getAnimLayer().createMoveAnim(cardMap[x1][y], cardMap[x][y], x1, x, y, y);

                            cardMap[x][y].setNum(cardMap[x1][y].getNum());
                            cardMap[x1][y].setNum(0);
                            x--;
                            isMerge = true;
                        } else if (cardMap[x][y].equals(cardMap[x1][y])) {
                            //如果有右边的数字和左边的数字相等，则进行合并
//                            mainAbilitySlice.getAnimLayer().createMoveAnim(cardMap[x1][y], cardMap[x][y], x1, x, y, y);
                            cardMap[x][y].setNum(cardMap[x][y].getNum() * 2);
                            cardMap[x1][y].setNum(0);
                            isMerge = true;
                            mainAbilitySlice.addScore(cardMap[x][y].getNum());
                        }
                        break;
                    }
                }
            }
        }
        //如果存在合并或者移动，则添加一个随机棋子
        if (isMerge) addRoundNum();
    }

    private void swipeRight() {
        retractMap();
        //向右滑动
        //是否存在合并或者移动
        boolean isMerge = false;
        for (int y = 0; y < 4; y++) {
            for (int x = 3; x >= 0; x--) {
                for (int x1 = x - 1; x1 >= 0; x1--) {
                    //如果同一行的右边的点数字大于0
                    if (cardMap[x1][y].getNum() > 0) {
                        //如果最左边没有数字时，则将右边数字移动到左边
                        if (cardMap[x][y].getNum() <= 0) {
//                            mainAbilitySlice.getAnimLayer().createMoveAnim(cardMap[x1][y], cardMap[x][y], x1, x, y, y);
                            cardMap[x][y].setNum(cardMap[x1][y].getNum());
                            cardMap[x1][y].setNum(0);
                            x++;
                            isMerge = true;
                        } else if (cardMap[x][y].equals(cardMap[x1][y])) {
                            //如果有右边的数字和左边的数字相等，则进行合并
//                            mainAbilitySlice.getAnimLayer().createMoveAnim(cardMap[x1][y], cardMap[x][y], x1, x, y, y);
                            cardMap[x][y].setNum(cardMap[x][y].getNum() * 2);
                            cardMap[x1][y].setNum(0);
                            isMerge = true;
                            mainAbilitySlice.addScore(cardMap[x][y].getNum());
                        }
                        break;
                    }
                }
            }
        }
        //如果存在合并或者移动，则添加一个随机棋子
        if (isMerge) addRoundNum();
    }

    private void swipeUp() {
        retractMap();
        //是否存在合并或者移动
        boolean isMerge = false;
        //向上滑动
        for (int x = 0; x < 4; x++) {
            for (int y = 0; y < 4; y++) {
                for (int y1 = y + 1; y1 < 4; y1++) {
                    //如果同一行的右边的点数字大于0
                    if (cardMap[x][y1].getNum() > 0) {
                        //如果最左边没有数字时，则将右边数字移动到左边
                        if (cardMap[x][y].getNum() <= 0) {
//                            mainAbilitySlice.getAnimLayer().createMoveAnim(cardMap[x][y1], cardMap[x][y], x, x, y1, y);
                            cardMap[x][y].setNum(cardMap[x][y1].getNum());
                            cardMap[x][y1].setNum(0);
                            y--;
                            isMerge = true;
                        } else if (cardMap[x][y].equals(cardMap[x][y1])) {
                            //如果有右边的数字和左边的数字相等，则进行合并
//                            mainAbilitySlice.getAnimLayer().createMoveAnim(cardMap[x][y1], cardMap[x][y], x, x, y1, y);
                            cardMap[x][y].setNum(cardMap[x][y].getNum() * 2);
                            cardMap[x][y1].setNum(0);
                            isMerge = true;
                            mainAbilitySlice.addScore(cardMap[x][y].getNum());
                        }
                        break;
                    }
                }
            }
        }
        //如果存在合并或者移动，则添加一个随机棋子
        if (isMerge) addRoundNum();
    }

    private void swipeDown() {
        retractMap();
        //是否存在合并或者移动
        boolean isMerge = false;
        //向下滑动
        for (int x = 0; x < 4; x++) {
            for (int y = 3; y >= 0; y--) {
                for (int y1 = y - 1; y1 >= 0; y1--) {
                    //如果同一行的右边的点数字大于0
                    if (cardMap[x][y1].getNum() > 0) {
                        //如果最左边没有数字时，则将右边数字移动到左边
                        if (cardMap[x][y].getNum() <= 0) {
//                            mainAbilitySlice.getAnimLayer().createMoveAnim(cardMap[x][y1], cardMap[x][y], x, x, y1, y);
                            cardMap[x][y].setNum(cardMap[x][y1].getNum());
                            cardMap[x][y1].setNum(0);
                            y++;
                            isMerge = true;
                        } else if (cardMap[x][y].equals(cardMap[x][y1])) {
                            //如果有右边的数字和左边的数字相等，则进行合并
//                            mainAbilitySlice.getAnimLayer().createMoveAnim(cardMap[x][y1], cardMap[x][y], x, x, y1, y);
                            cardMap[x][y].setNum(cardMap[x][y].getNum() * 2);
                            cardMap[x][y1].setNum(0);
                            isMerge = true;
                            mainAbilitySlice.addScore(cardMap[x][y].getNum());
                        }
                        break;
                    }
                }
            }
        }
        //如果存在合并或者移动，则添加一个随机棋子
        if (isMerge) addRoundNum();
    }

游戏结束相关逻辑代码

   /**
     * 游戏结束
     * 如果有cardMap里面有值为0即还有空格，或者当前格上下左右有相等的数字，则游戏继续
     * 否则游戏结束
     */
    private void gameOver() {
        boolean isOver = true; //标示游戏是否结束，默认结束
        ALL:
        for (int y = 0; y < 4; y++) {
            for (int x = 0; x < 4; x++) {
                if (cardMap[x][y].getNum() == 0 ||
                        (x > 0 && cardMap[x][y].equals(cardMap[x - 1][y])) ||
                        (x < 3 && cardMap[x][y].equals(cardMap[x + 1][y])) ||
                        (y > 0 && cardMap[x][y].equals(cardMap[x][y - 1])) ||
                        (y < 3 && cardMap[x][y].equals(cardMap[x][y + 1]))) {
                    isOver = false;
                    break ALL;
                }
            }
        }
        if (isOver) {
            //游戏结束,保存总分
            DatabaseHelper databaseHelper = new DatabaseHelper(mainAbilitySlice); // context入参类型为ohos.app.Context。
            String fileName = "game"; // fileName表示文件名，其取值不能为空，也不能包含路径，默认存储目录可以通过context.getPreferencesDir()获取。
            Preferences preferences = databaseHelper.getPreferences(fileName);
            int totalScore = preferences.getInt("totalScore", 0);//保存的总分
            if (totalScore < mainAbilitySlice.getScore()) {
                //如果保存的总分小于当前总分，那么就保存大当前总分
                preferences.putInt("totalScore", mainAbilitySlice.getScore());
                preferences.flush();
            }

            mainAbilitySlice.gameOver();
            //设置最高分
            mainAbilitySlice.showTotalScore(preferences.getInt("totalScore", 0));
        }

    }

3.在主页面应用GameView实现游戏相关的介绍，分数，以及重新开始和悔棋按钮的点击事件

新建一个MainAbilitySlice继承AbilitySlice，AbilitySlice是用来展示应用的页面的，这和Android的Activity还是有点区别的，一个页面可以有多个AbilitySlice，这和Android中的fragment有点像，但是页面在前台时只能展示一个AbilitySlice，所以说它和两者还是有点区别的。

PS：这里要注意的是由于DevEco Studio中目前xml布局还不支持自定义视图，所以我们这里只能在java代码中实现游戏页面的整体布局，还是比较麻烦的，

通过这个小项目我们可以了解到鸿蒙开发和Android 还是比较像的，当时开发这个小游戏的时候，好的的api也是不知道，由于有Android项目开发经验，以及对java sdk比较熟悉，很多东西都是慢慢试出来，比如，滑动事件的监听，卡片字体的颜色和背景的等，希望鸿蒙后面会越来越完善。

最后编辑于：2020.11.23 23:50:07

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,839评论 6赞 482
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,543评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 153,116评论 0赞 344
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,371评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,384评论 5赞 374
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,111评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,416评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,053评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,558评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,007评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,117评论 1赞 334
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,756评论 4赞 324
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,324评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,315评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,539评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,578评论 2赞 355
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,877评论 2赞 345