基于JavaUI开发的小游戏—推箱子（下）

​​想了解更多关于开源的内容，请访问：​​

玛纳斯网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站开发等网站项目制作，到程序开发，运营维护。创新互联于2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

​​ 开源基础软件社区​​

​​https://ost.51cto.com​​

前言

本文将继续向大家介绍如何做UI界面美化，以及如何利用轻量级偏好数据库做数据的存储和读取。

UI界面美化

MainAbilitySlice

我们可以看到，所有的界面都是采用无框全屏化设计，因此第一步是要修改config.json文件，打开文件，将代码做出如下修改：

......
 "launchType": "standard"
      }
    ],
    "metaData": {
      "customizeData": [
        {
          "name": "hwc-theme",
          "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar",
          "extra": ""
        }
      ]
    }
  }
}

然后设计按钮样式，首先新建一个graphic文件：

接着在里面添加美化代码：

    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
            ohos:radius="120"/>
            ohos:width="3vp"
        ohos:color="#fbc02d"/>
            ohos:color="#fff8e1"/>

现在分析界面需求，其中带有“Pokemon”字样的是本地图片，因此我们需要的控件有四个按钮以及一张图片，布局采用DirectionalLayout即可，代码如下：

    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">
            ohos:layout_alignment="horizontal_center"
        ohos:width="350vp"
        ohos:height="100vp"
        ohos:image_src="$media:pokemon"
        ohos:scale_mode="zoom_center"
        ohos:bottom_margin="20vp"
        />
            ohos:id="$+id:startBtn"
        ohos:width="250vp"
        ohos:height="50vp"
        ohos:background_element="$graphic:background_ability_main"
        ohos:text_color="#ffffff"
        ohos:text_weight="700"
        ohos:text_size="20vp"
        ohos:text="开始游戏"
        ohos:bottom_margin="20vp"
        />
            ohos:id="$+id:recordBtn"
        ohos:width="250vp"
        ohos:height="50vp"
        ohos:background_element="$graphic:button"
        ohos:text_color="#fbc02d"
        ohos:text_weight="700"
        ohos:text_size="20vp"
        ohos:text="历史记录"
        ohos:bottom_margin="20vp"
        />
            ohos:id="$+id:aboutBtn"
        ohos:width="250vp"
        ohos:height="50vp"
        ohos:background_element="$graphic:button"
        ohos:text_color="#fbc02d"
        ohos:text_weight="700"
        ohos:text_size="20vp"
        ohos:text="关于游戏"
        ohos:bottom_margin="20vp"
        />
            ohos:id="$+id:exitBtn"
        ohos:width="250vp"
        ohos:height="50vp"
        ohos:text_color="#fbc02d"
        ohos:background_element="$graphic:button"
        ohos:text_weight="700"
        ohos:text_size="20vp"
        ohos:text="退出游戏"
        ohos:bottom_margin="20vp"
        />

至此第一个界面就美化完成了。

SelectSlice

这个界面的布局跟第一个界面大同小异，只是少了一个按钮，还有就是按钮的样式有点不同，因此需要再写一个graphic文件，方法同上，这里直接给出代码：

    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
            ohos:radius="120"/>
            ohos:width="3vp"
        ohos:color="#7cc473"/>
            ohos:color="#e5f0e4"/>

界面的代码如下：

    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:alignment="center">
            ohos:width="361vp"
        ohos:height="70vp"
        ohos:scale_mode="zoom_center"
        ohos:layout_alignment="center"
        ohos:bottom_margin="30vp"
        ohos:image_src="$media:select"
        />
            ohos:layout_alignment="center"
        ohos:id="$+id:firstBtn"
        ohos:width="300vp"
        ohos:height="60vp"
        ohos:background_element="$graphic:select"
        ohos:text_color="#7cc473"
        ohos:text_weight="700"
        ohos:text_size="30fp"
        ohos:text="第一关"
        ohos:bottom_margin="30vp"
        />
            ohos:layout_alignment="center"
        ohos:id="$+id:secondBtn"
        ohos:width="300vp"
        ohos:height="60vp"
        ohos:background_element="$graphic:select"
        ohos:text_color="#7cc473"
        ohos:text_weight="700"
        ohos:text_size="30fp"
        ohos:text="第二关"
        ohos:bottom_margin="30vp"
        />
            ohos:layout_alignment="center"
        ohos:id="$+id:thirdBtn"
        ohos:width="300vp"
        ohos:height="60vp"
        ohos:background_element="$graphic:select"
        ohos:text_color="#7cc473"
        ohos:text_weight="700"
        ohos:text_size="30fp"
        ohos:text="第三关"
        ohos:bottom_margin="20vp"
        />

InitSlice

在加载界面中，只是用到了一个播放gif的第三方组件，以及一张图片（文字图片）一个进度条组件，布局也使用最常规的DirectionalLayout即可实现。

    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

            ohos:layout_alignment="center"
        ohos:top_margin="100vp"
        ohos:id="$+id:draweeView"
        ohos:width="360vp"
        ohos:height="360vp"
        />
            ohos:width="291vp"
        ohos:height="53vp"
        ohos:layout_alignment="center"
        ohos:bottom_margin="30vp"
        ohos:scale_mode="zoom_center"
        ohos:image_src="$media:Loading"
        />
            ohos:layout_alignment="center"
        ohos:height="30vp"
        ohos:width="330vp"
        ohos:id="$+id:pb"
        ohos:max="100"
        ohos:min="0"
        ohos:progress_width="330vp"
        ohos:background_element="#edf1bb"
        ohos:progress_element="#f2c867"
        ohos:progress="0"
        />

GameSlice

游戏界面的UI就稍微复杂一点，需要用到嵌套，之前说过，地图类继承自布局，所以实际上地图也是一个组件，理解了这一点之后，再来看代码会容易理解很多。整体布局用了DirectionalLayout纵向布局，在里面有需要横向布局的，则添加DirectionalLayout的横向布局，做一个简单的嵌套。

    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    >
            ohos:id="$+id:dl"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:bottom_margin="20vp"
        >
                    ohos:id="$+id:backBtn"
            ohos:top_margin="10vp"
            ohos:left_margin="10vp"
            ohos:right_margin="8vp"
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:layout_alignment="left"
            ohos:background_element="$graphic:backbutton"
            />
                    ohos:id="$+id:setBtn"
            ohos:top_margin="10vp"
            ohos:left_margin="8vp"
            ohos:right_margin="10vp"
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:background_element="$graphic:setbutton"
            />
                    ohos:layout_alignment="right"
            ohos:top_margin="10vp"
            ohos:left_margin="85vp"
            ohos:width="40vp"
            ohos:height="40vp"
            ohos:scale_mode="zoom_center"
            ohos:image_src="$media:clock"
            />
    
            ohos:layout_alignment="center"
        ohos:width="372vp"
        ohos:height="35vp"
        ohos:scale_mode="zoom_center"
        ohos:image_src="$media:goal"
        ohos:bottom_margin="20vp"
        />
            ohos:layout_alignment="center"
        ohos:id="$+id:gameMap1"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:bottom_margin="15vp"
        />
            ohos:height="210vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:top_margin="20vp">
                    ohos:layout_alignment="center"
            ohos:width="158vp"
            ohos:height="170vp"
            ohos:scale_mode="zoom_center"
            ohos:image_src="$media:stack"
            ohos:bottom_margin="20vp"
            />
                    ohos:id="$+id:stackBtn"
            ohos:left_margin="15vp"
            ohos:bottom_margin="10vp"
            ohos:width="150vp"
            ohos:height="150vp"
            ohos:background_element="$graphic:button"
            ohos:text="回退"
            ohos:text_size="50fp"
            ohos:text_color="#fbc02d"
            />
    

四个界面美化完毕！接下来做一些细节的调整。在按下历史记录按钮时，会显示每个关卡最近的一次历史记录，效果如下：

这实际上是一个自定义样式的CommonDialog，如何自定义？首先创建一个自定义的RecordDialog类和美化用的xml文件，然后在类里面添加自己的xml文件，具体方法可以看代码：

public class RecordDialog {
    static CommonDialog commonDialog;

    static void showDialog(Context context,String s1,String s2,String s3){
        DirectionalLayout dl = (DirectionalLayout) LayoutScatter.getInstance(context)
                .parse(ResourceTable.Layout_recordlayout,null,false);
        commonDialog = new CommonDialog(context);
        commonDialog.setAutoClosable(true);

        Button Btn = (Button) dl.findComponentById(ResourceTable.Id_Btn);

        Text first = (Text) dl.findComponentById(ResourceTable.Id_firstText);
        first.setText(s1);

        Text second = (Text) dl.findComponentById(ResourceTable.Id_secondText);
        second.setText(s2);

        Text third = (Text) dl.findComponentById(ResourceTable.Id_thirdText);
        third.setText(s3);

        Btn.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                commonDialog.destroy();
            }
        });
        commonDialog.setCornerRadius(15);
        commonDialog.setContentCustomComponent(dl).show();
    }
}

xml文件如下：

    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:orientation="vertical">
            ohos:left_margin="5vp"
        ohos:right_margin="5vp"
        ohos:layout_alignment="left"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="最新通关记录："
        ohos:multiple_lines="true"
        ohos:top_margin="20vp"
        ohos:text_size="20fp"
        />
            ohos:id="$+id:firstText"
        ohos:left_margin="120vp"
        ohos:right_margin="5vp"
        ohos:layout_alignment="left"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="第一关：无"
        ohos:multiple_lines="true"
        ohos:top_margin="10vp"
        ohos:text_size="20fp"
        />
            ohos:left_margin="120vp"
        ohos:right_margin="5vp"
        ohos:layout_alignment="left"
        ohos:id="$+id:secondText"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="第二关：无"
        ohos:multiple_lines="true"
        ohos:top_margin="10vp"
        ohos:text_size="20fp"
        />
            ohos:left_margin="120vp"
        ohos:right_margin="5vp"
        ohos:layout_alignment="left"
        ohos:id="$+id:thirdText"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="第三关：无"
        ohos:multiple_lines="true"
        ohos:top_margin="10vp"
        ohos:text_size="20fp"
        />

            ohos:id="$+id:okBtn"
        ohos:width="250vp"
        ohos:height="50vp"
        ohos:background_element="$graphic:background_ability_main"
        ohos:text_color="#ffffff"
        ohos:text_weight="700"
        ohos:text_size="20vp"
        ohos:top_margin="30vp"
        ohos:text="确定"
        ohos:bottom_margin="20vp"
        ohos:left_margin="40vp"
        />

关于这样的设计，这个小游戏中还有一处，点击关于游戏弹出的界面同样也是这么实现的：

代码如下：

public class MyDialog {
    private static Text version;
    static void showDialog(Context context){
        DirectionalLayout dl = (DirectionalLayout) LayoutScatter.getInstance(context)
                .parse(ResourceTable.Layout_mydialoglayout,null,false);
        CommonDialog commonDialog = new CommonDialog(context);
        commonDialog.setAutoClosable(true);
        Button knowBtn = (Button) dl.findComponentById(ResourceTable.Id_knowBtn);
        knowBtn.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                commonDialog.destroy();
            }
        });
        commonDialog.setCornerRadius(15);
        commonDialog.setContentCustomComponent(dl).show();
    }
    static String getVersion(){
        return version.getText();
    }
}

    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:orientation="vertical"
    ohos:alignment="center">
            ohos:left_margin="5vp"
        ohos:right_margin="5vp"
        ohos:layout_alignment="left"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="游戏目标：收服在场的所有宝可梦！"
        ohos:multiple_lines="true"
        ohos:top_margin="20vp"
        ohos:text_size="20fp"
        />
            ohos:left_margin="5vp"
        ohos:right_margin="5vp"
        ohos:layout_alignment="left"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="游戏玩法：通过滑动屏幕控制人物，推动精灵球收服宝可梦，当收服完所有宝可梦时获得游戏胜利！"
        ohos:multiple_lines="true"
        ohos:top_margin="10vp"
        ohos:text_size="20fp"
        />
            ohos:left_margin="5vp"
        ohos:right_margin="5vp"
        ohos:layout_alignment="left"
        ohos:id="$+id:versionText"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="游戏版本号：V1.0.0"
        ohos:multiple_lines="true"
        ohos:top_margin="10vp"
        ohos:text_size="20fp"
        />
            ohos:left_margin="5vp"
        ohos:right_margin="5vp"
        ohos:layout_alignment="left"
        ohos:id="$+id:showText"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="开发人员：木棉花蓝锐鑫"
        ohos:multiple_lines="true"
        ohos:top_margin="10vp"
        ohos:text_size="20fp"
        />
            ohos:id="$+id:knowBtn"
        ohos:width="250vp"
        ohos:height="50vp"
        ohos:background_element="$graphic:background_ability_main"
        ohos:text_color="#ffffff"
        ohos:text_weight="700"
        ohos:text_size="20vp"
        ohos:top_margin="30vp"
        ohos:text="已了解"
        ohos:bottom_margin="20vp"
        />

游戏中最后一处UI设计，就是点击设置按钮时出现的一个滑动块组件，可以保存一些全局设置：

public class SetDialog {
    static void showDialog(Context context){
        DirectionalLayout dl = (DirectionalLayout) LayoutScatter.getInstance(context)
                .parse(ResourceTable.Layout_setlayout,null,false);
        CommonDialog commonDialog = new CommonDialog(context);
        commonDialog.setAutoClosable(true);

        Button sureBtn = (Button) dl.findComponentById(ResourceTable.Id_sureBtn);
        Switch choose = (Switch) dl.findComponentById(ResourceTable.Id_choose);

        String value = MyDB.getString(dl.getContext(),"save");
        if(value != null){
            if(value.compareTo("开") == 0){
                choose.setChecked(true);
            }
            else if(value.compareTo("关") == 0){
                choose.setChecked(false);
            }
        }
        choose.setCheckedStateChangedListener(new AbsButton.CheckedStateChangedListener() {
            @Override
            public void onCheckedChanged(AbsButton absButton, boolean b) {
                String key = "save";
                if(b){
                    MyDB.putString(dl.getContext(),key,"开");
                }
                else {
                    MyDB.putString(dl.getContext(), key,"关");
                }
            }
        });
        sureBtn.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                commonDialog.destroy();
            }
        });
        commonDialog.setCornerRadius(15);
        commonDialog.setContentCustomComponent(dl).show();
    }
}

    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:orientation="vertical">
            ohos:id="$+id:dl"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:orientation="horizontal"
        >
                    ohos:left_margin="70vp"
            ohos:right_margin="25vp"
            ohos:layout_alignment="left"
            ohos:id="$+id:thirdText"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="自动保存 "
            ohos:multiple_lines="true"
            ohos:top_margin="10vp"
            ohos:text_size="30fp"
            />
                    ohos:id="$+id:choose"
            ohos:height="40vp"
            ohos:width="100vp"
            ohos:top_margin="10vp"
            ohos:text_state_on="开"
            ohos:text_state_off="关"
            ohos:text_color="#ffffff"
            ohos:text_size="20fp"
            ohos:thumb_element="#eff1f8"
            ohos:track_element="#f9bf2d"
            />
        
            ohos:id="$+id:sureBtn"
        ohos:width="250vp"
        ohos:height="50vp"
        ohos:background_element="$graphic:background_ability_main"
        ohos:text_color="#ffffff"
        ohos:text_weight="700"
        ohos:text_size="20vp"
        ohos:top_margin="30vp"
        ohos:text="确定"
        ohos:bottom_margin="20vp"
        ohos:left_margin="40vp"
        />

至此，UI美化部分已经全部完成。

数据存储

利用数据库存储每个关卡的信息，首先要新建一个数据库类MyDB：

public class MyDB {
    private static final String PREFERENCE_FILE_NAME = "DB";
    private static Preferences preferences;
    private static DatabaseHelper databaseHelper;
    private static Preferences.PreferencesObserver mPreferencesObserver;

    private static void initPreference(Context context){
        if(databaseHelper==null){
            databaseHelper = new DatabaseHelper(context);
        }
        if(preferences==null){
            preferences = databaseHelper.getPreferences(PREFERENCE_FILE_NAME);
        }
    }
    public static void putString(Context context, String key, String value) {
        initPreference(context);
        preferences.putString(key, value);
        preferences.flush();
    }
    public static String getString(Context context, String key) {
        initPreference(context);
        return preferences.getString(key, null);
    }
    public static boolean deletePreferences(Context context) {
        initPreference(context);
        boolean isDelete= databaseHelper.deletePreferences(PREFERENCE_FILE_NAME);
        return isDelete;
    }
    public static void registerObserver(Context context, Preferences.PreferencesObserver preferencesObserver){
        initPreference(context);
        mPreferencesObserver=preferencesObserver;
        preferences.registerObserver(mPreferencesObserver);
    }
    public static void unregisterObserver(){
        if(mPreferencesObserver!=null){
            // 向preferences实例注销观察者
            preferences.unregisterObserver(mPreferencesObserver);
        }
    }
}

在结束游戏时，如果打开了自动保存按钮，则进行存储：

if(gameMap.isWin()){
                            tickTimer.stop();
                            CommonDialog commonDialog = new CommonDialog(getContext());
                            commonDialog.setSize(800,400);
                

                新闻标题：基于JavaUI开发的小游戏—推箱子（下）
                

                文章转载：http://www.csdahua.cn/qtweb/news27/489127.html
            
            

                网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
            

                广告
                
            
            

                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                快上网