DEV Community

Cover image for Word-Guessing_minigame_HarmonyOS_ArkUI-X
RunkBear
RunkBear

Posted on

Word-Guessing_minigame_HarmonyOS_ArkUI-X

#harmonyos

Today, let’s explore how to achieve cross-platform development using the emerging framework ArkUI-X, walking you through its development charm with a word-guessing mini-game. This article not only showcases ArkUI-X’s Flutter-rivaling cross-platform capabilities but also breaks down key code implementations step by step!

I. Environment Preparation Checklist

  • 💻 OS: macOS (Windows users can use a VM)
  • 🔨 Dev Tool: DevEco Studio 5.0.4 (built-in ArkUI-X support)
  • 📱 Test Devices: Huawei Mate60Pro, iPhone15 (run on both platforms with one codebase)
  • 🖥️ Language: ArkTS (TypeScript superset, low learning curve)
  • 🚀 Framework Version: ArkUI API 16

II. Core Game Logic Breakdown

1. Key Features

  • Randomized Questions: Dynamic question bank loading + dual randomization (question order & option shuffling)
  • Interactive Experience: Tap effects + instant feedback for errors
  • Competitive Elements: 120-second countdown + real-time scoring
  • Cross-Platform Support: Single codebase runs on HarmonyOS & iOS

2. Technical Implementation

(1) Data Structure Design 
class QuestionModel {
  question: string // e.g., "One word with thirteen dots—how to dot it?"  
  correctAnswer: string // "汁" (Chinese character for "juice")  
  options: string[] // Array containing correct/wrong options  
}
Enter fullscreen mode Exit fullscreen mode

Class encapsulation standardizes question data management.

(2) Core State Management 
@State score: number = 0 // Tracks points  
@State currentIndex: number = 0 // Current question ID  
@State questionBank: QuestionModel[] = [] // Question bank
Enter fullscreen mode Exit fullscreen mode

Three state variables handle all core logic—simple and efficient!

III. Key Code Walkthrough

1. Resource Loading & Initialization 

aboutToAppear() {
  getContext().resourceManager.getRawFileContent("wordPuzzle.json", (err, data) => {
    // Parse JSON with TextDecoder  
    let jsonString = textDecoder.decodeToString(data)  
    let jsonObjectArray: object[] = JSON.parse(jsonString)  
    // Build question bank  
    this.questionBank.push(new QuestionModel(...))  
    this.gameStart()  
  })  
}
Enter fullscreen mode Exit fullscreen mode

ResourceManager reads local JSON files, seamlessly handling OS file system differences.

2. Dual Randomization Algorithm 

// Randomize questions  
shuffleQuestions() {  
  for (let i = 0; i < this.questionBank.length; i++) {  
    let j = Math.floor(Math.random() * (this.questionBank.length - i))  
    // Swap elements for shuffling  
  }  
}  

// Randomize options  
shuffleOptions(q: QuestionModel) {  
  // Similar shuffle algorithm  
}
Enter fullscreen mode Exit fullscreen mode

Fisher-Yates algorithm ensures efficient randomization without duplicates.

3. Cross-Platform UI Construction 

build() {  
  Column() {  
    // Score & timer section  
    Flex({wrap:FlexWrap.Wrap}) {  
      ForEach(this.questionBank[this.currentIndex].options, (item:string)=>{  
        Button(item)  
          .clickEffect({scale:0.8}) // Tap zoom effect  
          .width('155lpx') // Adaptive unit  
      })  
    }  
    // Control buttons  
  }  
}
Enter fullscreen mode Exit fullscreen mode

Flex + ForEach enables responsive layouts; lpx units auto-adapt to screen densities.

IV. ArkUI-X vs. Flutter Comparison

Feature ArkUI-X Flutter
Language ArkTS (TS superset) Dart
Rendering Engine Native Rendering Skia Engine
App Size Smaller (no engine) Larger
Ecosystem Huawei 1st-party Google Ecosystem
Cross-Platform Consistency Native Experience Highly Uniform

ArkUI-X Advantages:

  • Gentler learning curve (Web dev-friendly)
  • Deep HarmonyOS integration
  • True native rendering performance
  • Huawei device optimizations

V. Development Insights

  1. Cross-Platform Tip: Use lpx units + Flex layouts for screen adaptability
  2. Performance: Optimize re-renders with targeted @State usage
  3. Debugging: DevEco Studio’s cross-platform preview is a real game-changer!

Project Resources

🔗 Code Repository: gitee.com/runkbear/guest-chinese-word

This project demonstrates ArkUI-X’s ability to deliver high performance while lowering cross-platform development barriers. For developers targeting both HarmonyOS and iOS ecosystems, it’s a promising new direction! Experience the thrill of "code once, deploy everywhere" today! 🚀

Top comments (0)