demo

Above is the DevEco Studio 2.1 emulator. Because I did not buy the Hongmeng watch, so it is not running on a real machine. Welcome friends who have watches to generate HPP in the real machine.

Install DevEco Studio 2.1

First, install DevEco first Studio 2.1, no can go HongMeng developer website developer.harmonyos.com/cn/develop/… Download.

Create a New Lite Empty Ability (JS) project.

Choose Application for Project Type, API Version 5, and Lite Wearable for Device Type.

The project structure

As you can see, the project structure is a bit like a small program.

Where is the Canvas component?

Since we’re going to be developing on this, the first thing that comes to mind is canvas.

However…

The editor prompts that there is no Canvas component.

I went to the developer forum and asked about it, but they said there was a canvas.

After my research, I found that canvas is ok in mobile app, but not in watch. We are creating a watch project, so canvas is not available.

It is important to note that this is not the same. A cloud on a watch is not the same thing as a cloud on a phone. So the experience of developing Android in the past is reversed here.

Use pictures instead

Since there is no Canvas, it is good to have the image component.

But the problem with the image component is that it doesn’t scale. And the size must be defined in CSS, otherwise the image will not be displayed.

So we used to use double size images, not here.

Therefore, you must crop the image and specify the size in your code:

.dino{
    width: 90px;
    height: 96px;
}
Copy the code

Cannot use position because it is not supported

You need to use the Stack component as the parent component and place the Image component inside the stack component as the child component.

<stack class="container" onclick="click">
    <image id="dino" style="left: {{dino.x}}; top: {{dino.y}};" class="dino" src="/common/{{ dino.frame }}.png"></image>
</stack>
Copy the code

To locate the image, set the style in the image tag with properties left and top. Accordingly, in index.js:

dino: {
    w:90,
    h:96,
    x:80,
    y:300,
    frame:'dino',
},
Copy the code

That completes the location of Dino’s little dinosaur.

The running state of the little dinosaur

I have prepared two diagrams, in which time increases by 1 in the game’s loop:

time+=1
Copy the code

And then, depending on the time difference, switch them over.

if(time%2==0){
    dino.frame='a'
}
if(time%4==0){
    dino.frame='b'
}
Copy the code

In fact, there’s another state when jumping, where the baby dinosaur has two legs spread out:

Therefore, add a state:

if(dino.run){
    if(time%2==0){
        dino.frame='a'
    }
    if(time%4==0){
        dino.frame='b'
    }
}else{
    dino.frame='dino'
}
Copy the code

Background scroll

The background is a long picture. It’s easy to scroll, just let its X-axis decrement. But no matter how long a graph is, it has to run out.

After the roll, a blank space will appear in the background.

To keep the background uninterrupted, we use two identical images, scrolling alternately.

bgMove(){
    const {bg,speed}=this
    if(bg[0].x<2393){
        bg[0].x-=speed.x
    }
    if(bg[1].x<2393){
        bg[1].x-=speed.x
    }
    if(bg[1].x<=-2393+454 && bg[0].x==2393){
        bg[0].x=454
    }
    if(bg[0].x<=-2393+454 && bg[1].x==2393){
        bg[1].x=454
    }
    if(bg[1].x<=-2393){
        bg[1].x=2393
    }
    if(bg[0].x<=-2393){
        bg[0].x=2393
    }
}
Copy the code

2393 of the code above is the actual width of the background. 454 is the size of the watch screen.

Cactus movement

It’s much easier than moving the background, just decrement the X-axis.

Bouncing effect

I’m going to set a y vector

const {y,toY}=this.dino
if(y==toY && y>=300){
    this.dino.toY=this.jump
}
Copy the code

In the game loop, do things toY and toY

if(toY<=y){
    dino.y-=speed.y
    dino.run=false
}
if(y<=jump){
    dino.toY=300
}
if(toY>=y){
    dino.y+=speed.y
    dino.run=true
}
Copy the code

Collision detection

collision_check(){
    const {dino,cactus}=this
    if(dino.x + dino.w > cactus.x && dino.x < cactus.x + cactus.w){
        if(cactus.y + cactus.h > dino.y && cactus.y < dino.y + dino.h){
            this.game_over=true
        }
    }
}
Copy the code

The source code

Finally, the source code is available at github.com/codetyphon/…