【HarmonyOS next】ArkUI-X休闲益智打地鼠【进阶】

// ArkTS核心代码
@Entry
@Component
struct Index {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Web({
        src: $rawfile('game.html'), // 加载本地H5资源
        controller: this.controller
      })
      .width('100%')
      .height('100%')
      .javaScriptAccess(true)
    }
  }
}

<!-- 表情符号作为图片资源 -->
<div class="mole">🐭</div> 
<div class="hammer">🔨</div>

<!-- 替换emoji为网络图片 -->
<img class="mole" src="https://xx.com/mole.png" alt="地鼠">
<img class="hammer" src="https://xx.com/hammer.png" alt="锤子">

/* 基于设备像素比选择图片 */
.mole {
  background-image: url('mole@1x.png');
}

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

// 统一触摸事件处理
function showHammer(event) {
  const touch = event.touches?.[0] || event;
  const x = touch.clientX;
  const y = touch.clientY;
  
  // 华为设备额外补偿偏移
  if (navigator.userAgent.includes('HarmonyOS')) {
    y -= 10; 
  }
}

/* 兼容iOS刘海屏 */
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);
}

// 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();
  });
}

// Web组件内存管理
Web({
  onMemoryWarning(event) {
    console.warn(`内存告警级别: ${event.level}`);
    this.controller.clearCache();
  }
})