Escape Button using ArkTS in HarmonyOS Next

Read the original article：Escape Button using ArkTS in HarmonyOS Next

Photo by Fotis Fotopoulos on Unsplash

Introduction

Hello everyone,

In this article, we will cover how to create a fun and interactive Escape Button using ArkTS in HarmonyOS Next. We'll walk through the key concepts, UI logic, and event handling needed to make a button that “runs away” from the user whenever they try to click it.

What is the Escape Button?

The Escape Button is an interactive UI element designed to avoid user interaction by dynamically changing its position whenever the user tries to click on it. Unlike a traditional button that performs an action when clicked, the Escape Button's purpose is to make clicking intentionally difficult or even impossible.

Let's start the development 😎

🟣 Index.ets
Let’s add two buttons: Books and Games. When the user clicks on the Games button, this button escapes, and the button name changes randomly.

  @State viewModel: HomeViewModel = HomeViewModel.instance;

  //reset the button when this page open
  onPageShow() {
    this.viewModel.offsetX = 0
    this.viewModel.offsetY = 0
    this.viewModel.name = $r('app.string.games')
  }

  build() {
    Column() {
      Button($r('app.string.books'))
        .margin({ bottom: 5 })
        .onClick(() => {
          //
        })
      Button(this.viewModel.name)
        .offset({ x: this.viewModel.offsetX, y: this.viewModel.offsetY })
        .onTouch((event: TouchEvent) => {
          if (event.type === TouchType.Down) {
            this.viewModel.escape()
            this.viewModel.name = this.viewModel.getRandomResponse()
          }
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }

🟣 HomeViewModel.ets
Here, add the texts that you want to appear when you press the button.

“No way!” “Choose Books!”, “Catch me!”, “Nice try!”,” Oopss!”

@Observed
export class HomeViewModel {
  offsetX: number = 0
  offsetY: number = 0
  name: ResourceStr = $r('app.string.games')
  private responses: ResourceStr[] = [
    $r('app.string.noway'),
    $r('app.string.choosebooks'),
    $r('app.string.catchme'),
    $r('app.string.nicetry'),
    $r('app.string.oopss'),
  ]
  private static _instance: HomeViewModel;

  private constructor() {
  }

  public static get instance(): HomeViewModel {
    if (!HomeViewModel._instance) {
      HomeViewModel._instance = new HomeViewModel();
    }
    return HomeViewModel._instance;
  }

  escape() {
    let newX = this.randomOffset(-60, 60)
    let newY = this.randomOffset(-70, 70)

    animateTo({ duration: 50, curve: Curve.EaseInOut }, () => {
      this.offsetX = newX
      this.offsetY = newY
    })
  }

  randomOffset(min: number, max: number): number {
    return Math.floor(Math.random() * (max - min + 1)) + min
  }

  getRandomResponse(): ResourceStr {
    let index = Math.floor(Math.random() * this.responses.length)
    return this.responses[index]
  }
}

Output:

Conclusion

This type of button is commonly used in:

Playful or humorous web projects,
Human-computer interaction experiments,
Attention and reflex training tools.

The main idea is to simulate a challenge where the user has to “catch” the button, creating an engaging user experience. In this project, the Escape Button moves to a random location on the screen as soon as the cursor approaches or attempts to click it, giving it a “fleeing” behavior.