Beginner: Develop Tic-Tac-Toe application for Lite-Wearable in Harmony OS

shikkerimath

Member
Nov 30, 2020
32
0
6
Article Introduction

In this article, I have explained to develop a Tic-Tac-Toe application for Huawei Lite wearable device using Huawei DevEco studio and using JS language in Harmony OS. Tic-Tac-Toe is a game for two players, X and O, who take turns marking the spaces in a 3×3 grid. The player who succeeds in placing three of their marks in a diagonal, horizontal, or vertical row will be a winner.

1613984922440.png



Huawei Lite Wearable

Requirements


1) DevEco IDE

2) Lite wearable watch (Can use simulator also)

New Project (Lite Wearable)

After installation of DevEco Studio, make new project.

Select Lite Wearable in Device and select Empty Feature Ability in Template.

1613984942180.png


After the project is created, its directory as shown in below displayed image.

1613984960837.png


  • hml files describe the page layout.
  • css files describe the page style.
  • js files process the interactions between pages and users.
  • The app.js file manages global JavaScript logics and application lifecycle.
  • The pages directory stores all component pages.


The common directory stores public resource files, such as media resources and .js files.

Integration process

Design the UI

Step 1: Add background image.


As the first step, we can create a UI that contains tictactoe cell boxes which will be filled by the user entries. Create and add the background image for tictactoe screen using stack component.

index.html

HTML:
<stack class="stack">
     <image src='/common/wearablebackground.png' class="background"></image>
index.css

CSS:
.background {
     width:454px;
     height:454px;
}  
.stack {
     width: 454px;
     height: 454px;
     justify-content: center;
}

Step 2: Add title for game. Add the display text for the current player.

Add the storage text for player and gameOver string to display that is game over after the game is completed. Here we use conditional UI rendering that when the Boolean gameOver is true, then display the gameOverString.

index.html

HTML:
<text  class="app-title">{{title}} </text>
<text class="sub-title">{{playerString}}
</text>
<div class="uiRow"if="{{gameOver}}" >
  <text if="{{gameOver}}" class="app-title">{{gameOverString}}</text>
  </div>
index.css
CSS:
.app-title{
     text-align: center;
     width: 290px;
     height: 52px;
     color: #c73d3d;
     padding-top: 10px;
     margin-bottom: 30px;
     border-radius: 10px;
     background-color: transparent;
}

.sub-title{
     text-align: center;
     width: 290px;
     height: 52px;
     color: #26d9fd;
     padding-top: 10px;
     border-radius: 10px;
     background-color: transparent;
}
index.js

JavaScript:
title: "Tic Tac Toe",
playerString: "Player One - O",
Step 3: Add UI 3x3 grid call for application.

We need 3x3 matrix of text boxes. Use loop rendering for the boxes since all are similar boxes. I have added animation for the boxes to make it more appealing.

HTML:
 <div class="boxRow" for="{{cellValue in gameEntries}}"  tid="id" else>
        <text  class="cell" onclick="handleCellClick($idx, 0)" >{{cellValue[0]}}</text>
        <text  class="cell" onclick="handleCellClick($idx, 1)">{{cellValue[1]}}</text>
        <text  class="cell" onclick="handleCellClick($idx, 2)">{{cellValue[2]}}</text>
    </div>
CSS:
.boxRow {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     width: 247px;
     height: 64px;
     background-color: #000000;
     animation-name: Go;
     animation-duration: 2s;
     animation-delay: 0;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
     border-radius: 5px;
}  
.cell {
     display: flex;
     text-align: center;
     width: 75px;
     height: 50px;
     border-width: 1px;
     color: #414343;
     background-color: #FFD700;
     border-color: #414343;
     border-radius: 5px;
     margin: 5px;
}
So to check the condition iterate through the entries in 3x3 array. We are converting 3x3 array element location to index of the grid using modulo and math functions.

Read full article

Result
1613986037673.png



Tips and Tricks

You can use Lite-wearable simulator for development. We can extend 3x3 grid for higher order Tic-Tac-Toe just by increasing game entry matrix to 5x5 or 7x7.

Conclusion

In this article, we have learnt how to create simple game app Tic-Tac-Toe using various Harmony OS UI components of course, there are a lot more things we could do here, like make the game actually multiplayer, so you can play with a friend.

References

https://developer.harmonyos.com/en/...ces/lite-wearable-syntax-hml-0000001060407093

Read full article
 

Attachments