【JS版 No.014】Harmony OS可穿戴设备中的儿童数字游戏(Java版)

内容纲要

作者:韩茹

公司:程序咖(北京)科技有限公司

鸿蒙巴士专栏作家

介绍

在本文中,我们可以创建一个具有以下功能的小数字游戏:

  1. 用户点击开始,屏幕上会显示两个随机生成的数字,用户必须在10 秒内计算出这些数字的总和。
  2. 计时器将显示 10 秒,10 秒后将显示结果。
  3. 屏幕底部的级别调整按钮可用于增加游戏的复杂性。

要求

  1. DevEco Studio 2.1 Release
  2. Lite 可穿戴手表(模拟器)

游戏流程

youxiliucheng

界面设计

WX20210623-135244@2x

示例代码

1、首先创建一个HarmonyOS的项目,在layout目录下,修改ability_main.xml中的内容:

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <DirectionalLayout
        ohos:height="160vp"
        ohos:width="match_parent"
        ohos:background_element="#FFA7A9"
        ohos:alignment="bottom|horizontal_center"
        >

        <Text
            ohos:id="$+id:text_msg"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:layout_alignment="horizontal_center"
            ohos:text="计算两个数之和"
            ohos:text_size="14fp"
            ohos:text_color="#ffffff"
            />

        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:orientation="horizontal"
            >
            <Text
                ohos:id="$+id:number1"
                ohos:height="20vp"
                ohos:width="40vp"
                ohos:text="0"
                ohos:text_alignment="center"
                ohos:text_size="14fp"
                ohos:text_color="#ffffff"
                ohos:background_element="$graphic:background_text_number"
                ohos:top_margin="5vp"
                />
            <Text
                ohos:id="$+id:oper"
                ohos:height="20vp"
                ohos:width="20vp"
                ohos:text="+"
                ohos:text_alignment="center"
                ohos:margin="5vp"
                ohos:text_size="14fp"
                ohos:text_color="#ffffff"
                ohos:background_element="$graphic:background_text_number"
                />
            <Text
                ohos:id="$+id:number2"
                ohos:height="20vp"
                ohos:width="40vp"
                ohos:text="0"
                ohos:text_alignment="center"
                ohos:text_size="14fp"
                ohos:top_margin="5vp"
                ohos:text_color="#ffffff"
                ohos:background_element="$graphic:background_text_number"
                />
        </DirectionalLayout>

        <Button
            ohos:id="$+id:btn"
            ohos:height="20vp"
            ohos:width="60vp"
            ohos:text="开始"
            ohos:text_size="14fp"
            ohos:background_element="$graphic:capsule_button_element"
            ohos:text_color="#FFFFFF"
            />
        <Text
            ohos:id="$+id:result"
            ohos:height="20vp"
            ohos:width="40vp"
            ohos:text="0"
            ohos:text_alignment="center"
            ohos:text_size="14fp"
            ohos:top_margin="5vp"
            ohos:text_color="#D66E29"
            />
        <ProgressBar
            ohos:id="$+id:progressbar1"
            ohos:height="30vp"
            ohos:width="150vp"
            ohos:max="100"
            ohos:min="0"
            ohos:progress_element="#FF9900"
            ohos:background_instruct_element="#FFFFFF"
            />

    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="0"
        ohos:width="match_parent"
        ohos:weight="1"
        ohos:alignment="center"
        ohos:background_element="#AAE1E2"
        >
        <Text
            ohos:id="$+id:text_msg2"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:layout_alignment="horizontal_center"
            ohos:text="级别调整"
            ohos:text_size="14fp"
            ohos:text_color="#ffffff"
            />
        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:orientation="horizontal"
            ohos:alignment="center"
            >
            <Button
                ohos:id="$+id:btn_level1"
                ohos:height="20vp"
                ohos:width="20vp"
                ohos:text="1"
                ohos:text_size="14fp"
                ohos:background_element="$graphic:background_text_level_selected"
                ohos:text_color="#FFFFFF"
                />
            <Button
                ohos:id="$+id:btn_level2"
                ohos:height="20vp"
                ohos:width="20vp"
                ohos:text="2"
                ohos:text_size="14fp"
                ohos:background_element="$graphic:background_text_level"
                ohos:text_color="#FFFFFF"
                ohos:margin="4vp"
                />
            <Button
                ohos:id="$+id:btn_level3"
                ohos:height="20vp"
                ohos:width="20vp"
                ohos:text="3"
                ohos:text_size="14fp"
                ohos:background_element="$graphic:background_text_level"
                ohos:text_color="#FFFFFF"
                />
        </DirectionalLayout>
    </DirectionalLayout>

</DirectionalLayout>

这里需要在graphic目录下设置xml文件:

background_text_number.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="10"/>
    <solid
        ohos:color="#FF7F50"/>
</shape>

capsule_button_element.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="20"/>
    <solid
        ohos:color="#8A2BE2"/>
</shape>

background_text_level.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="20"/>
    <solid
        ohos:color="#2E24FF"/>
</shape>

background_text_level_selected.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="20"/>
    <solid
        ohos:color="#FF2A75"/>
</shape>

然后就可以预览初始布局了。

您必须登录才能阅读本文的其余部分。请登录注册为用户。

发布者:韩茹,未经授权,禁止转载,违者必究:https://bus.chengxuka.com/archives/2317

发表评论

登录后才能评论

评论列表(1条)