HarmonyOS猜灯谜轻应用尝试 原创

鸿蒙时代
发布于 2021-4-4 11:32
浏览
0收藏

这里做了个点击可以查看对应的答案的猜灯谜游戏,后面可以进行判断进行完善。

HarmonyOS猜灯谜轻应用尝试-鸿蒙开发者社区

  

  HarmonyOS猜灯谜轻应用尝试-鸿蒙开发者社区

  

HarmonyOS猜灯谜轻应用尝试-鸿蒙开发者社区

Css:

 

/* phone */
@media screen and (device-type: phone) {
    .pagediv {
        width: 100%;
        height: 1500px;
        background-color: cornsilk;/**启用flex布局**/
        display: flex;/**布局方向为按列布局**/
        flex-direction: column;
    }
    .topdiv {
        width: 100%;
        height: 10%;
        background-color: #AECAFA;/**启用flex布局**/
        display: flex;/**水平居中**/
        justify-content: center;/**垂直居中**/
        align-items: center;
        flex-direction: column;
    }
    .middlediv {
        width: 100%;
        height: 60%;
        background-color: antiquewhite;
        display: flex;
        justify-content: center;
        align-items: center;/**自动换行**/
        flex-wrap: wrap;
    }
    .box {
        width: 100%;
        height: 150px;
        background-color: green;
        border: 3px solid black;
        border-radius: 20px;
        align-items: center;/**自动换行**/
        text-align: center;
        margin: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .textdiv {
        font-size: 50px;
        color: black;
        font-weight: bold;
    }
    .boxtxt {
        font-size: 45px;
        color: black;
        font-weight: bold;
    }
    .button_dj {
        background-color: green;
        text-color: white;
        height: 100%;
        width: 100%;
        font-size: 26px;
    }
    .div_dati {
        width: 100%;
        height: 200px;
        background-color: beige;
        justify-content: center;
    }
    .text_style {
        text-color: black;
        font-size: 36px;
    }
}

 

Hml:

 

<div class="pagediv">
    <div class="topdiv">
        <text class="textdiv" for="{{title}}">{{$item}}</text>
    </div>
    <div class="middlediv">
        <block for="{{arrs}}">
            <div class="box">
                <button class="button_dj" onclick="show({{$item.id}})" >{{$item.id}}</button>
            </div>
        </block>
    </div>
    <div class="div_dati">
        <text class="text_style">{{show_text}}</text>
    </div>
</div>

 

 

Js:

import router from '@system.router';
export default {
    data: {
        title: ["猜灯谜", "点击按钮解锁答案"],
        arrs: [
                {
                    'id': '一棵树,两只兔。一斜路,在南处。猜一个字。',
                    'value': '答案(少)'
                },
                {
                    'id': '人上,一星亮。一见面,一声汪。猜一个字',
                    'value': '答案(犬)'
                },
                {
                    'id': '戈手心,相公心,您藏心,在疗心。猜四个字。',
                    'value': '答案(我想你了)'
                },
                {
                    'id': '立湍后,许久默,凤冠女,慷心落。猜四个字。',
                    'value': '答案(端午安康)'
                },
                {
                    'id': '一人打虎,一人牵犬。一人趴地,一人哮天。猜一个字。',
                    'value': '答案(伏)'
                }
        ],
        show_text: ''
    },
    show(e) {
        console.info(e)
        var list = this;
        this.arrs.forEach(element => {
            console.info(element.id)
            if (element.id == e) {
                list.show_text = element.value
            }
        });
        console.info(list.show_text);
    }
}

完整代码下载:

https://gitee.com/jltfcloudcn/jump_to/tree/master/cdm

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
1
收藏
回复
举报
4条回复
按时间正序
/
按时间倒序
鸿蒙张荣超
鸿蒙张荣超

不错👍

回复
2021-4-4 13:53:11
鸿蒙时代
鸿蒙时代

通过前端的一些常用的组件组合,可以做出不少效果出来的。

回复
2021-4-4 19:33:21
鸿蒙时代
鸿蒙时代

https://harmonyos.51cto.com/show/3786#comment 视频连接地址。

回复
2021-4-6 10:10:03
wx5b361edf0619c
wx5b361edf0619c

不错哦。

回复
2021-4-6 10:58:52
回复
    相关推荐