Realize the merger of two games of HarmonyOS (Hongmeng) sports watch from zero

 

Harmony OS sports watch Game app merger

 

preface

This blog is the first two self-developed Hongmeng games combined into one app after the blogger of Shenhong Fair (Zzt_01-23) learned HarmonyOS. The two games are black-and-white Fanqi and digital Huarong Road. The development of these two games will not be described in detail here. Readers can go to the corresponding blog by themselves: Develop HarmonyOS (Hongmeng) sports watch game from scratch -- black and white chess,Develop HarmonyOS (Hongmeng) sports watch game from zero -- Digital huarongdao , this blog describes the development idea of game merging in detail. It is suitable for readers who have learned the first two blogs, so that readers can merge different small games into one app by themselves.

summary

This demo will complete the compilation of two Hongmeng games on wearable devices from scratch and merge them into one app. Here, take the sports watch as an example. The software we use in the project is DevEco Studio, and the download address is: DevEco Studio Download,DevEco Studio installation tutorial , in the project, we want to combine two Hongmeng games into one app.

  1. The initial interface of digital huarongdao game is displayed in the initial interface. Sliding left or right will switch to the initial interface of black-and-white chess game. Sliding left or right again will switch to the initial interface of digital huarongdao game.


2. Click start on the initial interface of each game to switch to the corresponding game interface, and click return on the game interface to switch to the corresponding game start interface.

text

Create project

After the download and installation of DevEco Studio is successful, open DevEco Studio, click File in the upper left corner, click New, then select New Project, select the Lite Wearable option, select the default template, then select the save path, name the File YouXi (the File name cannot appear Chinese or special characters, otherwise the project File cannot be created successfully), and finally click Finish.


The main document is index css,index.hml and index JS, the opening path is shown in the figure, index HML is used to describe which components are included in the page, index CSS is used to describe what the components in the page look like, index JS is used to describe how the components in the page interact.

Realize the layout of the initial interface

First, we show the initial interface of digital huarongdao game and black-and-white backgammon game

  1. We write the initial interface of the digital huarongdao game in the index file, so we also need a file to write the initial interface of the black-and-white flip game, so right-click and select pages, select New, then select JS Page, name it heibaifanqi, and finally click Finish. In this way, we have created the heibaifanqi file in the pages file on the right, which is used to write the initial interface of the black-and-white flip game.

  2. To write the initial interface of two games, we need to insert the image of the initial interface. In this way, we need a file to store the image of the initial interface. First, right-click and select default, select New, then select Directory, name it common, and finally click OK. In this way, we will create a common file in the default file on the right to store the image of the initial interface.


    We also need to put the pictures of the initial interface into the newly created file common, copy the pictures of the prepared initial interface respectively, right-click and select common, then select Paste, and name them hm1 and hm2, so as to complete all the preparations.


  3. In index Add corresponding page components to HML:
    First, create a basic container div class named container, which is used to hold all other components
<div class="container" >
</div>

Then add a picture component in this basic container. The imaget class name is img and the picture path is / common / Hm1 png

<image src="/common/hm1.png" class="img"></image>

So far, index All the HML files have been written

<div class="container">
    <image src="/common/hm1.png" class="img"></image>
</div>
  1. In index CSS describes the style of the page component just added:
    First, write the container style. Flex direction is the main axis direction of the container, select column (vertical from top to bottom), justify content is the main axis alignment format of the current row of the container, select Center (the item is located in the center of the container), align items is the cross axis alignment format of the current row of the container, select Center (the element is centered on the cross axis), and width and height are the width and height of the container in pixels respectively, Both are set to 450px
.container {
   
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:450px;
    height:450px;
}

Then write img style. Left is the horizontal coordinate in pixels from the upper left corner of the bounding box, set as 8px, top is the vertical coordinate in pixels from the upper left corner of the bounding box, set as 50px, because the picture size is 450 * 358, the width is set as 450px, and the height is set as 358px

.img{
    left:8px;
    top:50px;
    width:450px;
    height: 358px;
}

So far, index The CSS file has been completely written
5. In index JS describes the interaction of components in the page:
Since component interaction is not required for the time being, delete the title: 'Word'

export default {
   
    data: {
   

    }
}

So far, index JD files have all been written, and the initial interface layout of digital huarongdao game can be obtained by running
6. Since the initial interface layout of the black-and-white flip game is similar to that of the huarongdao game, it will not be described one by one, but directly to the source code
heibaifanqi. The HML code is as follows:

<div class="container">
    <image src="/common/hm2.png" class="img"></image>
</div>

heibaifanqi.css code is as follows:

.container {   
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:450px;
    height:450px;
}
.img{   
    left: 80px;
    top: 70px;
    width:290px;
    height: 347px;
}

heibaifanqi.js code is as follows:

export default {
   
    data: {
   

    }
}

Realize the switching of the initial interface

Slide left or right on the initial interface of huarongdao game to switch to the initial interface of black-and-white flip chess game, and slide left or right again to switch to the initial interface of digital huarongdao game

  1. First open config JSON file, add "pages/heibaifanqi/heibaifanqi" in the pages of js column
  2. In index Add corresponding page components to HML:
    Add a swipe attribute in the basic container div, which is used to respond to the sliding event and give an automatically called function changeGame
<div class="container" onswipe="changeGame">
    <image src="/common/hm1.png" class="img"></image>
</div>

So far, index All the HML files have been written
3. In index CSS describes the style of the page component just added:
There is no need to add or modify the style of page components in this part
4. In index JS describes the interaction of components in the page:
The page Jump statement is router Replace. To do this, we need to import router and create a function Game(direction). The parameter is the sliding direction. When the sliding direction is left or right, call the statement router Replace, jump to heibaifanqi, and then create a function changeGame(event). The parameter is an event, which is used to call the function Game

import router from '@system.router';

changeGame(event){  
        this.Game(event.direction);
    },
    Game(direction){   
        if (direction == 'left' || direction == 'right'){   
            router.replace({  
                uri:'pages/heibaifanqi/heibaifanqi'
            });
        }
    }

So far, index JD files have been completely written, and the initial interface of huarongdao game can be realized by running. Sliding left or right will switch to the initial interface of black-and-white flip chess game
5. The initial interface of the black-and-white flip game will be switched to the initial interface of huarongdao game by sliding left or right, which is similar to the above writing method, so it will not be described one by one, but directly to the source code
heibaifanqi.js code is as follows:

<div class="container"  onswipe="changeGame">
    <image src="/common/hm2.png" class="img"></image>
</div>

heibaifanqi.css code has not changed
heibaifanqi.js code is as follows:

import router from '@system.router';

export default {   
    data: {
   
    },
    changeGame(event){   
        this.Game(event.direction);
    },
    Game(direction){  
        if (direction == 'left' || direction == 'right'){   
            router.replace({   
                uri:'pages/index/index'
            });
        }
    }
}

Switch the initial interface to the game interface

Click start game on the initial interface of each game to switch to the corresponding game interface

  1. We need two files to write the game interface of digital huarongdao game and black-and-white flip game, so right-click and select pages, select New, then select JS Page, name them game1 and game2 respectively, and finally click Finish. In this way, we have created game1 and game2 files in the pages file on the right to write the game interface of digital huarongdao game and black-and-white flip game.

  2. Copy and paste the code of digital huarongdao game and the code of black-and-white flip chess game into game1 file and game2 file respectively. The code can be found here: Develop HarmonyOS (Hongmeng) sports watch game from zero -- Digital huarongdao,Develop HarmonyOS (Hongmeng) sports watch game from scratch -- black and white chess , and open config JSON file, add "pages/game1/game1" and "pages/game2/game2" in the pages of the js column

  3. In index Add corresponding page components to HML:
    We need to display a button on the digital Huarong Road to jump to the digital Huarong Road game interface, so we need to put the picture components on the stack. Therefore, we need to add a stack stack class named stack and a button component named bit, add a click event Click, and make the picture components go into the stack first and the button components go into the stack later, so as to achieve the expected effect

<div class="container" onswipe="changeGame">
    <stack class="stack">
        <image src="/common/hm1.png" class="img"></image>
        <input type="button" class="bit" onclick="startGame"/>
    </stack>
</div>

So far, index The HML file has been completely written
4. In index CSS write the style of the component just added:
First, write the style of stack. Both width and height are set to 450px

.stack{   
    width: 450px;
    height: 450px;
}

Then write the style of bit. Set top as 338px, left as 118px, width as 210px, height as 50px, background color as background color and transparent

.bit{   
    top:338px;
    left:118px;
    width:210px;
    height:50px;
    background-color:transparent;
}

So far, index The CSS file has been completely written
5. In index JS describes the interaction of components in the page:
We need to import router and write the function startGame() that will be called automatically when you click the button to call router Replace, jump to game1

import router from '@system.router';

startGame(){   
        router.replace({   
            uri:'pages/game1/game1'
        });
    }

So far, index JS files have been completely written, and the initial interface of huarongdao game can be realized by running. Click start to switch to the interface of huarongdao game
6. Click start on the initial interface of the black-and-white flip game to switch to the interface of the black-and-white flip game, which is similar to the above writing method, so it will not be described one by one, but directly go to the source code
heibaifanqi. The HML code is as follows:

<div class="container" onswipe="changeGame">
    <stack class="stack">
        <image src="/common/hm2.png" class="img"></image>
        <input type="button" class="bit" onclick="startGame"/>
    </stack>
</div>

heibaifanqi.css code is as follows:

.container {   
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:450px;
    height:450px;
}
.stack{   
    width: 450px;
    height: 450px;
}
.img{  
    left: 80px;
    top: 70px;
    width:290px;
    height: 347px;
}
.bit{   
    top:358px;
    left:118px;
    width:210px;
    height:50px;
    background-color:transparent;
}

heibaifanqi.js code is as follows:

import router from '@system.router';

export default {   
    data: {
   
    },
    changeGame(event){   
        this.Game(event.direction);
    },
    Game(direction){   
        if (direction == 'left' || direction == 'right'){   
            router.replace({   
                uri:'pages/index/index'
            });
        }
    },
    startGame(){   
        router.replace({  
            uri:'pages/game2/game2'
        });
    }
}

Switch the game interface to the initial interface

Click return in the respective game interface to switch to the corresponding initial interface

  1. In Game1 Add corresponding page components to HML:
    We need to add another button, whose class name is bit2, and add a function called returnGame to respond to click event and automatic call, which is used to return to the initial interface of the game. In order to arrange the two buttons horizontally, we need to put the two buttons into another basic container div class named container2
<div class="container2">
        <input type="button" value="restart" class="bit1" onclick="restartGame"/>
        <input type="button" value="return" class="bit2" onclick="returnGame"/>
    </div>

So far, Game1 All the HML files have been written
2. In Game1 CSS describes the style of the page component just added:
First, write the style of container2, flex direction, select column (vertical direction from top to bottom), justify content, select Center (the item is located in the center of the container), align items, select Center (the element is centered on the cross axis), and set the width, height and to 450px and 40px

.container2{   
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width:450px;
    height:40px;
}

Then write the style of bit2, with width and height set to 80px and 30px respectively, background color set to #AD9D8F, font size set to 24px, margin top set to 10px, margin left: set to 10px

.bit2{   
    width:80px;
    height:30px;
    margin-left: 10px;
    background-color:#AD9D8F;
    font-size:24px;
    margin-top:10px;
}

So far, Game1 The CSS file has been completely written
3. In Game1 JS describes the interaction of components in the page:
We need to import router and write the function returnGame() that will be called automatically when you click the button to call router Replace, jump to index and call clearInterval to clear the timer

import router from '@system.router';

returnGame(){   
        router.replace({   
            uri:'pages/index/index'
        });
        clearInterval(timer);
    }

So far, Game1 JS files have been completely written, and the huarongdao game interface can be realized by running. Click back to switch to the initial interface of huarongdao game
4. Click back on the black and white flip game interface to switch to the initial interface of the black and white flip game, which is similar to the above writing method, so we won't describe them one by one, but go directly to the source code
game2.hml modified and added codes as follows:

<div class="container2">
        <input type="button" value="restart" class="bit1" onclick="restartGame"/>
        <input type="button" value="return" class="bit2" onclick="returnGame"/>
    </div>

game2.css add the following code:

.container2{   
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width:450px;
    height:40px;
}
.bit2{   
    width:80px;
    height:30px;
    margin-left: 10px;
    background-color:#AD9D8F;
    font-size:24px;
    margin-top:10px;
}

game2.js add the following code:

import router from '@system.router';

returnGame(){   
        router.replace({   
            uri:'pages/heibaifanqi/heibaifanqi'
        });
    }

So far, the whole demo has been completed

Experience

The overall difficulty of this demo is not high, and the components or styles involved are very common. You need to master the picture components and page Jump to complete the preparation. It is suitable for novice readers to write and learn. For component learning, you can go to the official documents to see a more detailed introduction: Official documents.

epilogue

This project is written by the blogger after learning some basics of Hongmeng. Interested readers can write it with this blog. I believe you can also complete it. If you encounter any problems or find out the mistakes, you are welcome to leave a message. Our bloggers also welcome to study HarmonyOS development with interested readers.

Tags: Javascript

Posted by chopperwalker on Wed, 04 May 2022 16:14:42 +0300