【HarmonyOS next】ArkUI-X休闲益智记忆翻牌【进阶】

// ArkTS核心实现
import web_webview from '@ohos.web.webview';

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

  build() {
    Column() {
      Web({
        src: $rawfile('game.html'), // 加载本地H5游戏
        controller: this.controller
      })
      .onMemoryWarning(e => {
        console.warn(`内存告警: ${e.level}`);
        this.controller.clearCache();
      })
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
  }
}

<!-- 卡片正面使用Emoji -->
<div class="front-face">🍎</div>

<!-- 使用网络图片替代Emoji -->
<img class="front-face" 
     src="https://example.com/card_apple.png" 
     alt="苹果">

/* 基于DPR动态加载 */
.front-face {
  background-image: url('card@1x.png');
}

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

@media (-webkit-min-device-pixel-ratio: 3),
       (min-resolution: 288dpi) {
  .front-face {
    background-image: url('card@3x.png');
  }
}

// 卡片翻转动画优化
.memory-card {
  transition: transform 0.5s;
  transform: scale(0.95); /* 华为设备防边缘裁剪 */
}

// 触摸事件补偿
card.addEventListener('touchstart', (e) => {
  if (navigator.userAgent.includes('HarmonyOS')) {
    e.touches[0].clientY += 5; // Y轴补偿
  }
});

// 兼容刘海屏和曲面屏
body {
  padding: 
    env(safe-area-inset-top) 
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

.memory-board {
  margin-bottom: env(safe-area-inset-bottom);
}

// ArkTS中预加载关键资源
import image from '@ohos.multimedia.image';

function preloadGameAssets() {
  const assets = [
    'https://example.com/card_back.png',
    'https://example.com/card_apple.png',
    'https://example.com/card_pear.png'
  ];
  
  assets.forEach(url => {
    image.createImageSource(url).createPixelImage().then(img => {
      console.log(`预加载完成: ${url}`);
    });
  });
}

// 内存压力处理
Web({
  onMemoryWarning(event) {
    if (event.level >= 2) { // 严重警告
      this.controller.clearCache();
      this.controller.reload(); // 强制重载释放内存
    }
  }
})