【HarmonyOS next】ArkUI-X休闲益智消消乐【进阶】

graph LR
A[ArkUI-X容器] --> B[Web组件]
B --> C[HTML5游戏核心]
C --> D[Canvas渲染]
C --> E[触摸事件处理]
C --> F[响应式布局]

@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) // 启用JS交互能力
    }
  }
}

// DPR敏感型渲染
const dpr = window.devicePixelRatio || 1;
canvas.style.width = size + 'px'; 
canvas.width = size * dpr; // 物理像素适配
ctx.scale(dpr, dpr);

// 动态单元尺寸
cellSize = container.offsetWidth / GRID_SIZE;

// 交换动画（基于RAF）
function swapAnimation(a, b) {
  return new Promise(resolve => {
    const animate = (timestamp) => {
      // 使用缓动函数计算位移
      cellA.offsetX = dx * cellSize * ratio; 
      requestAnimationFrame(animate);
    }
  })
}

// 爆炸特效
cell.scale = 1 + ratio * 0.5; // 缩放动画
cell.alpha = 1 - ratio;       // 渐隐效果

canvas.addEventListener('click', e => {
  const rect = canvas.getBoundingClientRect();
  // 坐标转换（兼容CSS缩放）
  const x = Math.floor((e.clientX - rect.left) / cellSize); 
  const y = Math.floor((e.clientY - rect.top) / cellSize);
});

#gameContainer {
  width: 90vmin; /* 视口单位保证比例 */
  max-width: 400px; /* 大屏边界控制 */
}
.controls {
  top: -70px; /* 绝对定位避开游戏区 */
}