Number game for kids in Harmony Lite wearable - Huawei Developers

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
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
UI Design
index.hml
HTML:
<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
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