项目概述

这是一个基于 Electron 开发的经典打地鼠游戏应用，以 3x3 网格布局为核心，融入多种地鼠类型和难度递增机制，通过 DOM 操作和 CSS 动画实现流畅的游戏体验。现已完成鸿蒙 PC 平台深度适配，借助 Electron 鸿蒙适配层实现跨平台无缝运行（支持 Windows/macOS/Linux/ 鸿蒙 PC），在完整保留原生功能的基础上，针对鸿蒙 PC 系统特性优化了渲染性能、输入响应和窗口适配，带来更贴合鸿蒙生态的游戏体验。

功能特性

  • 🎯 经典打地鼠核心玩法：3x3 网格地洞系统，击打出现的地鼠得分
  • 🌟 多元地鼠类型：普通地鼠（基础得分）、金色地鼠（高额奖励）、炸弹地鼠（扣分惩罚）
  • 📊 完善游戏系统：计分统计、60 秒倒计时、分数达标升级机制，适配鸿蒙 PC 计时精度
  • 🎨 沉浸式视觉效果：地鼠出现 / 消失动画、锤子击打动画、得分弹窗反馈，优化鸿蒙 PC 渲染流畅度
  • 🔊 音效可控：支持开启 / 关闭游戏音效，适配鸿蒙 PC 音频输出机制
  • 📱 全场景输入适配：支持鼠标、触摸操作，优化鸿蒙 PC 触摸屏点击响应速度
  • 🖥️ 鸿蒙 PC 专属增强：
    • 禁用硬件加速避免兼容性冲突
    • 适配鸿蒙 PC 分屏 / 悬浮窗模式（窗口缩放时网格自适应）
    • 优化高帧率屏幕动画同步（避免画面撕裂）
    • 支持鸿蒙系统通知（游戏结束、升级时触发系统通知）

技术栈

  • 核心框架：Electron（跨平台基础）、Electron 鸿蒙适配层（鸿蒙 PC 兼容核心）
  • 前端技术：HTML5（页面结构）、CSS3（样式与动画）、JavaScript (ES6+)（游戏逻辑）
  • 开发工具：Node.js 18.x+、npm 8.x+、DevEco Studio 5.0+（鸿蒙 PC 编译调试）
  • 关键能力：DOM 操作（地鼠渲染）、定时器 / 延时器（游戏循环）、鸿蒙 PC 系统能力适配（窗口 / 音频 / 通知）

项目结构

1. 原生 Electron 项目结构（保持不变）

plaintext

48-whack-a-mole/
├── README.md          # 项目文档
├── main.js           # Electron主进程代码
├── package.json      # 项目配置与依赖
└── src/              # 渲染进程源码
    ├── index.html    # 游戏主页面
    ├── preload.js    # 预加载脚本
    ├── renderer.js   # 游戏核心逻辑（地鼠生成、击打处理等）
    └── style.css     # 样式与动画定义

2. 鸿蒙 PC 适配后项目结构（整合 Electron 鸿蒙模板）

plaintext

ohos_hap/
├── electron/        # 鸿蒙PC核心依赖库目录
│   └── libs/
│       └── arm64-v8a/  # 鸿蒙指定架构库路径
│           ├── libelectron.so      # Electron核心运行库
│           ├── libadapter.so       # 鸿蒙适配层桥接库
│           ├── libffmpeg.so        # 音频/视频支持库（音效依赖）
│           └── libc++_shared.so    # 基础依赖共享库
├── web_engine/
│   └── src/
│       └── main/
│           └── resources/
│               └── resfile/
│                   └── resources/
│                       └── app/     # 移植打地鼠游戏核心代码
│                           ├── main.js           # 主进程（已添加鸿蒙适配）
│                           ├── package.json      # 项目依赖配置
│                           └── src/
│                               ├── index.html    # 游戏主页面
│                               ├── preload.js    # 预加载脚本
│                               ├── renderer.js   # 游戏核心逻辑
│                               └── style.css     # 样式与动画文件
└── module.json5        # 鸿蒙应用配置文件（系统能力声明、设备适配）

核心代码解析（新增鸿蒙 PC 适配修改）

1. 主进程鸿蒙适配（main.js）

在原有窗口创建逻辑基础上，添加鸿蒙 PC 专属配置，解决硬件加速冲突、窗口适配等问题：

javascript

运行

const { app, BrowserWindow } = require('electron');
const path = require('path');

let mainWindow; // 全局窗口引用，避免垃圾回收

// 鸿蒙PC关键适配：禁用硬件加速（防止渲染冲突导致动画卡顿/窗口空白）
if (process.platform === 'ohos') {
  app.disableHardwareAcceleration();
}

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'src', 'preload.js'),
      nodeIntegration: true,
      contextIsolation: false
    },
    // 鸿蒙PC窗口特性优化
    resizable: true, // 支持窗口缩放（适配分屏/悬浮窗）
    maximizable: true, // 支持最大化（鸿蒙PC全屏体验）
    title: "打地鼠游戏 - 鸿蒙PC版",
    autoHideMenuBar: true // 隐藏菜单栏，提升游戏沉浸感
  });

  // 加载游戏主页面
  mainWindow.loadFile(path.join(__dirname, 'src', 'index.html'));

  // 鸿蒙PC额外处理：窗口关闭时释放资源
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

// Electron应用生命周期管理（保持原生逻辑不变）
app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

2. 鸿蒙应用配置文件（module.json5）

新增鸿蒙系统配置文件，声明应用身份、设备类型、所需系统能力：

json5

{
  "module": {
    "name": "whack-a-mole-game",
    "type": "entry",
    "srcPath": ".",
    "deviceTypes": ["pc"], // 明确适配鸿蒙PC设备
    "reqSysCapabilities": [
      "ohos.permission.WINDOW_MANAGER", // 窗口管理权限（必填）
      "ohos.permission.DISPLAY", // 显示权限（保障动画渲染）
      "ohos.permission.AUDIO", // 音频权限（音效播放）
      "ohos.permission.NOTIFICATION" // 通知权限（游戏状态提醒）
    ],
    "abilities": [
      {
        "name": "MainAbility",
        "srcPath": "web_engine/src/main",
        "icon": "$media:icon", // 可替换为游戏专属图标（建议512x512像素）
        "label": "打地鼠游戏",
        "description": "基于Electron适配的鸿蒙PC经典休闲游戏",
        "orientation": "auto", // 支持自动旋转（适配鸿蒙PC横竖屏切换）
        "visible": true,
        "launchType": "standard"
      }
    ]
  }
}

3. 游戏逻辑适配优化（renderer.js）

原有核心逻辑（地鼠生成、击打处理、等级升级）保持不变，针对鸿蒙 PC 特性补充细节优化：

javascript

运行

// 新增：鸿蒙PC环境判断（用于针对性优化）
const isHarmonyOS = process.platform === 'ohos';

// 优化：鸿蒙PC上使用requestAnimationFrame替代setTimeout优化动画流畅度
function gameLoop() {
  if (!gameState.isRunning) return;
  
  // 原有地鼠生成逻辑...
  
  // 适配鸿蒙PC帧率：根据系统帧率动态调整下一次地鼠出现延迟
  const nextDelay = getNextMoleDelay();
  if (isHarmonyOS) {
    requestAnimationFrame(() => {
      setTimeout(gameLoop, nextDelay);
    });
  } else {
    setTimeout(gameLoop, nextDelay);
  }
}

// 优化：鸿蒙PC触摸操作响应速度（减少点击延迟）
document.querySelectorAll('.hole').forEach(hole => {
  hole.addEventListener('click', (e) => {
    // 鸿蒙PC触摸点击时阻止默认行为，减少延迟
    if (isHarmonyOS && e.touches) {
      e.preventDefault();
    }
    const mole = hole.querySelector('.mole');
    hitMole(mole, parseInt(hole.dataset.id));
  });
});

// 新增：鸿蒙系统通知触发（游戏升级/结束时）
function showHarmonyNotification(title, body) {
  if (isHarmonyOS && window.harmonyNotification) {
    window.harmonyNotification.show({
      title,
      body,
      duration: 3000 // 通知显示3秒
    });
  }
}

// 升级逻辑中调用通知
function checkLevelUp() {
  const newLevel = Math.floor(gameState.score / LEVEL_UP_SCORE) + 1;
  if (newLevel > gameState.level) {
    gameState.level = newLevel;
    updateLevelDisplay();
    // 鸿蒙PC专属通知
    showHarmonyNotification('等级提升', `恭喜！升至${newLevel}级，地鼠出现频率加快啦～`);
  }
}

跨平台兼容性说明

平台 适配策略 特殊处理
Windows 标准 Electron 运行 无特殊配置
macOS 标准 Electron 运行 保留 dock 图标激活逻辑
Linux 标准 Electron 运行 确保系统依赖库完整（libgtk-3.so、libnss3.so、libasound2.so 等）
鸿蒙 PC 通过 Electron 鸿蒙适配层运行 1. 禁用硬件加速；2. 采用鸿蒙指定目录结构；3. 声明音频 / 通知等系统能力；4. 优化触摸响应

鸿蒙 PC 适配部署步骤

1. 环境准备

基础环境（原生 + 鸿蒙共用）
  • Node.js 18.x+
  • npm 8.x+
鸿蒙 PC 专属环境
  • 开发机要求：Windows 10/11、8GB RAM 以上、20GB 可用空间
  • 开发工具：DevEco Studio 5.0+（需安装鸿蒙 SDK API 20+）
  • 硬件要求：鸿蒙 PC 设备（或鸿蒙 PC 模拟器），支持 USB 调试

2. 获取 Electron 鸿蒙编译产物

  1. 登录Electron 鸿蒙官方仓库
  2. 下载 Electron 34 + 版本的 Release 包（.zip 格式）
  3. 解压到ohos_hap/electron/目录，确认electron/libs/arm64-v8a/下包含 4 个核心库文件：
    • libelectron.so
    • libadapter.so
    • libffmpeg.so
    • libc++_shared.so

3. 部署游戏代码

  1. 复制原生项目核心文件到鸿蒙指定目录：
    • 将main.js、package.json复制到ohos_hap/web_engine/src/main/resources/resfile/resources/app/
    • 将src/目录（含 index.html、preload.js、renderer.js、style.css）完整复制到上述app/src/目录
  2. 安装依赖：进入app/目录执行npm install，确保依赖版本与原生项目一致（避免音效、动画相关依赖冲突）

4. 配置与运行（DevEco Studio）

  1. 打开项目：启动 DevEco Studio，选择「Open Project」，导入ohos_hap/目录
  2. 配置签名（鸿蒙应用必填）：
    • 进入File → Project Structure → Signing Configs
    • 选择「Auto-generate signature」自动生成调试签名（或导入已有签名文件）
  3. 连接鸿蒙 PC 设备：
    • 鸿蒙 PC 设备启用「开发者模式」和「USB 调试」（设置→系统→开发者选项）
    • 通过 USB Type-C 数据线连接开发机
    • 在 DevEco Studio 工具栏选择已连接的鸿蒙 PC 设备
  4. 编译运行：
    • 点击工具栏「Run」按钮（或按 Shift+F10）
    • 首次编译约 1-3 分钟，编译完成后游戏将自动在鸿蒙 PC 上启动

5. 适配验证检查项

  • ✅ 应用窗口正常显示（无空白、闪退、布局错乱）
  • ✅ 地鼠出现 / 消失、锤子击打动画流畅（无卡顿、闪烁）
  • ✅ 计分规则正常（普通地鼠 + 10 分、金色地鼠 + 50 分、炸弹 - 30 分）
  • ✅ 等级升级机制生效（每 100 分升级，地鼠出现频率加快）
  • ✅ 音效正常播放 / 关闭（适配鸿蒙 PC 音频输出）
  • ✅ 触摸 / 鼠标操作响应灵敏（无延迟、误触）
  • ✅ 窗口缩放时网格自适应（适配鸿蒙分屏模式）
  • ✅ 控制台无「SysCap 不匹配」「找不到.so 文件」等错误

鸿蒙 PC 开发调试技巧

1. 日志查看

在 DevEco Studio 的「Log」面板中，输入过滤关键词「Electron」或「whack-a-mole」，可快速定位：

  • 游戏运行状态（开始、暂停、升级、结束）
  • 错误信息（库文件缺失、权限不足、音效加载失败）
  • 鸿蒙适配层交互日志（窗口渲染、系统能力调用）

2. 常见问题解决

问题现象 解决方案
"SysCap 不匹配" 错误 检查module.json5的reqSysCapabilities，仅保留本文配置的 4 个必要权限
"找不到.so 文件" 错误 确认arm64-v8a目录下 4 个核心库完整，路径为electron/libs/arm64-v8a/
窗口空白 / 不显示 确保main.js中添加app.disableHardwareAcceleration()（鸿蒙 PC 必配置）
动画卡顿 / 撕裂 1. 简化 CSS 动画（减少 box-shadow 等重绘密集属性）；2. 启用requestAnimationFrame优化
音效无法播放 检查module.json5是否添加ohos.permission.AUDIO权限，重启应用尝试
触摸操作延迟高 在 renderer.js 中添加触摸事件preventDefault（参考本文代码优化部分）
游戏计时不准 替换setInterval为Date.now()计算时间差（适配鸿蒙 PC 系统时钟）

如何运行

1. 原生平台运行（Windows/macOS/Linux）

bash

运行

# 克隆项目
git clone <项目地址>
cd 48-whack-a-mole

# 安装依赖
npm install

# 启动应用
npm start

2. 鸿蒙 PC 平台运行

按照「鸿蒙 PC 适配部署步骤」操作，通过 DevEco Studio 编译运行

游戏操作与机制

操作方式

  • 🖱️ 鼠标：移动鼠标控制锤子位置，点击左键击打地鼠
  • 📱 触摸：触摸屏幕控制锤子位置，点击屏幕击打地鼠
  • 🎮 功能控制：点击「开始游戏」启动、「重置游戏」重新开局、「音效」按钮切换音效开关

核心机制

  • 计分规则：普通地鼠 + 10 分、金色地鼠 + 50 分、炸弹地鼠 - 30 分（分数最低为 0）
  • 等级系统：每累计 100 分升级 1 次，等级越高地鼠出现频率越快
  • 时间限制：每局 60 秒，时间结束后显示最终得分和等级

技术栈

  • 核心框架：Electron 34+、鸿蒙应用开发框架（API 20+）
  • 前端技术：HTML5、CSS3、JavaScript
  • 后端支持：Node.js（文件系统、IPC 通信）
  • 开发工具：Visual Studio Code（Electron 开发）、DevEco Studio 5.0+（鸿蒙适配与运行）
  • 依赖库：Electron 鸿蒙核心.so 库（libelectron.so 等）

总结

本项目不仅为 Electron 初学者提供了完整的游戏开发示例，还新增了详细的鸿蒙 PC 适配方案，通过学习本项目，您可以同时掌握 Electron 桌面应用开发和跨平台（含鸿蒙 PC）迁移的实践经验，快速理解 Electron 项目适配鸿蒙系统的核心流程和关键技术点。

欢迎加入开源鸿蒙PC社区：https://harmonypc.csdn.net/

# electron # harmonyos # 游戏
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

Taro 5.0 深度：跨端开发的架构革新与全阶实践指南

avatar HarmonyOS开发者社区
cover

鸿蒙与物联网：如何用APP撬动全场景智能硬件

avatar HarmonyOS开发者社区
cover

HarmonyOS for PC：桌面端应用开发新战场

avatar HarmonyOS开发者社区