[Huawei Developers] shikkerimath:
Introduction

In this article, we can create a small number game with below features:

1. User taps on start, two random generated numbers are shown on screen and user has to guess sum of those numbers within 10 seconds.

2. Timer will be shown for 10 seconds, after 10 seconds result will be displayed.

3. Bottom of screen change level buttons are available to increase the complexity of game.

Requirements

1. DevEco IDE

2. Lite wearable watch (Simulator)

Game Flow

View attachment 5207281

UI Design

View attachment 5207285

index.hml

<div class="container">
<text class="game_title">Guess Right Number</text>
<div class="sub_container">
<text class="small_title">{{number1}}</text>
<text class="small_title">+
</text>
<text class="small_title">{{number2}}</text>
</div>
<text class="text_button" onclick="generateNewNumbers">START</text>
<text class="total">{{total}}</text>
<progress class="progress_horizontal" type="horizontal" percent="{{progressNumber}}"></progress>
<div class="below_half">
<text class="settings">Change Level</text>
<div if="{{defaultLevel == 100}}" class="sub_container">
<text id="1" class="single_char" onclick="switchLevel('1')">1</text>
<text id="10" class="selected_single_char" onclick="switchLevel('10')">2</text>
<text id="100" class="single_char" onclick="switchLevel('100')">3</text>
</div>

<div elif="{{defaultLevel == 1000}}" class="sub_container">
<text id="1" class="single_char" onclick="switchLevel('1')">1</text>
<text id="10" class="single_char" onclick="switchLevel('10')">2</text>
<text id="100" class="selected_single_char" onclick="switchLevel('100')">3</text>
</div>

<div class="sub_container" else>
<text id="1" class="selected_single_char" onclick="switchLevel('1')">1</text>
<text id="10" class="single_char" onclick="switchLevel('10')">2</text>
<text id="100" class="single_char" onclick="switchLevel('100')">3</text>
</div>
</div>
</div>

index.css

.container {
background-color: #FFA7A9;
display: flex;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 554px;
flex-direction: column;
}

.sub_container {
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;

left: 0px;
top: 0px;
width: 300px;
height: 45px;
flex-direction: row;
}

.title {
text-align: center;
width: 200px;
height: 50px;
}

.game_title {
padding: 5;
text-align: center;
width: 400px;
height: 50px;
}

.total {
color: chocolate;
text-align: center;
width: 500px;
height: 40px;
}

.settings {
margin-top: 5px;
margin-bottom: 5px;
text-align: center;
width: 300px;
height: 40px;
color:white;
}

.text_button {
background-color: blueviolet;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
width: 150px;
height: 40px;
border-radius: 10;
}

.small_title {
align-items: flex-end;
margin: 5;
background-color: coral;
text-align: center;
width: 70px;
height: 40px;
border-radius: 10;
}

.selected_single_char {
align-items: flex-end;
margin: 5;
background-color: #2E24FF;
text-align: center;
width: 40px;
height: 40px;
border-radius: 50;
}

.single_char {
align-items: flex-end;
margin: 5;
background-color: #FF2A75;
text-align: center;
width: 40px;
height: 40px;
border-radius: 50;
}

.progress_horizontal{
color: #C70009;
width: 300px;
height: 10px;
}

.below_half{
margin-top: 10px;
background-color: #AAE1E2;

display: flex;
justify-content: center;
align-items: center;

left: 0px;
top: 0px;
width: 500px;
height: 130px;
flex-direction: column;
}

.circle {
width: 50px;
height: 50px;
border-radius: 50;
color: #fff;
text-align: center;
background-color: #AAE1E2;
}

Read full article..

Conclusion

In this article, we have learned the UI components such as Progress Bar, Div, Conditional Text, Timer and Screen on API

Reference

1. Harmony Official document: https://developer.harmonyos.com/en/docs/documentation/doc-guides/harmonyos-overview-0000000000011903

2. DevEco Studio User guide: https://developer.harmonyos.com/en/docs/documentation/doc-guides/tools_overview-0000001053582387

3. JS API Reference: https://developer.harmonyos.com/en/...-references/js-apis-overview-0000001056361791