DEV Community

Cover image for 【HarmonyOS Next】ArkUI-X Whac-A-Mole Casual Game
RunkBear
RunkBear

Posted on

【HarmonyOS Next】ArkUI-X Whac-A-Mole Casual Game

#harmonyos

This article implements a cross-platform whac-a-mole game using ArkUI-X's Web component, focusing on analyzing rendering differences and optimization solutions for network images across HarmonyOS and iOS devices.

1. Cross-Platform Implementation

Hybrid architecture with H5 game core + native shell:

// ArkTS Core Code  
@Entry  
@Component  
struct Index {  
  controller: web_webview.WebviewController = new web_webview.WebviewController();  

  build() {  
    Column() {  
      Web({  
        src: $rawfile('game.html'), // Load local H5 resources  
        controller: this.controller  
      })  
      .width('100%')  
      .height('100%')  
      .javaScriptAccess(true)  
    }  
  }  
}
Enter fullscreen mode Exit fullscreen mode

Advantages:

  • Cross-platform compatibility: Single H5 codebase runs on HarmonyOS/iOS
  • Hot update capability: Dynamically replace game resources without releases
  • Performance balance: WebView handles game logic, native ensures UX

2. Cross-Device Rendering Differences

Significant rendering variations observed between Huawei and iPhone:

Feature Huawei Nova 12 Ultra iPhone 13 Pro
Emoji Rendering Customized style Native iOS style
Image Scaling Proportional + Anti-aliasing Sharp edge preservation
Animation FPS Avg. 58fps Avg. 60fps
Touch Response Delay 85ms 68ms

Example (H5 Core Code): 

<!-- Emojis as image resources -->  
<div class="mole">🐭</div>  
<div class="hammer">🔨</div>
Enter fullscreen mode Exit fullscreen mode

Actual Rendering:

  • Huawei: 🐭 Rendered as rounded yellow mole
  • iPhone: 🐭 Rendered as gray mouse with whiskers

3. Key Optimization Strategies

1. Unified Image Solution 

<!-- Replace emojis with network images -->  
<img class="mole" src="https://xx.com/mole.png" alt="Mole">  
<img class="hammer" src="https://xx.com/hammer.png" alt="Hammer">
Enter fullscreen mode Exit fullscreen mode

2. Responsive Image Loading 

/* Load images based on device pixel ratio */  
.mole {  
  background-image: url('mole@1x.png');  
}  

@media  
  (-webkit-min-device-pixel-ratio: 2),  
  (min-resolution: 192dpi) {  
  .mole {  
    background-image: url('mole@2x.png');  
  }  
}
Enter fullscreen mode Exit fullscreen mode

3. Cross-Platform Touch Optimization 

// Unified touch event handling  
function showHammer(event) {  
  const touch = event.touches?.[0] || event;  
  const x = touch.clientX;  
  const y = touch.clientY;  

  // Offset compensation for Huawei  
  if (navigator.userAgent.includes('HarmonyOS')) {  
    y -= 10;  
  }  
}
Enter fullscreen mode Exit fullscreen mode

4. Device Adaptation Techniques

1. Safe Area Handling 

/* iOS notch compatibility */  
body {  
  padding:  
    constant(safe-area-inset-top)  
    constant(safe-area-inset-right)  
    constant(safe-area-inset-bottom)  
    constant(safe-area-inset-left);  

  padding:  
    env(safe-area-inset-top)  
    env(safe-area-inset-right)  
    env(safe-area-inset-bottom)  
    env(safe-area-inset-left);  
}
Enter fullscreen mode Exit fullscreen mode

2. Image Preloading 

// Preload network images in ArkTS  
import image from '@ohos.multimedia.image';  

function preloadImages() {  
  const urls = [  
    'https://xx.com/mole.png',  
    'https://xx.com/hammer.png'  
  ];  

  urls.forEach(url => {  
    image.createImageSource(url).createPixelImage();  
  });  
}
Enter fullscreen mode Exit fullscreen mode

3. Memory Monitoring 

// Web component memory management  
Web({  
  onMemoryWarning(event) {  
    console.warn(`Memory warning level: ${event.level}`);  
    this.controller.clearCache();  
  }  
})
Enter fullscreen mode Exit fullscreen mode

5. Performance Comparison

Post-optimization improvements:

Metric Before After
Image Loading Speed 320ms 180ms
Rendering Consistency 62% 98%
Huawei FPS 58 59.5
iOS FPS 60 60

Image Comparison

Fig: Network image rendering comparison across platforms

6. Conclusion

Key findings from this implementation:

  1. Use emojis with caution: Prefer network images for consistency
  2. Device-specific adaptation: Huawei requires touch offset compensation
  3. Tiered loading strategy: Dynamically load resources based on DPR
  4. Memory management: Actively release resources via Web components

Complete code: ArkUI-X-Whac-A-Mole

Cross-platform development isn't about 100% uniformity, but achieving optimal UX through understanding differences. ArkUI-X's Web component offers new approaches for multi-device adaptation, anticipating more powerful cross-platform capabilities in HarmonyOS Next.

Top comments (0)