Electron for鸿蒙PC开发的骰子游戏应用

项目概述

本项目是一个基于Electron框架开发的骰子游戏应用，专为鸿蒙PC平台设计。这是一个经典的两人骰子游戏，玩家通过摇骰子累积分数，目标是先达到100分获胜。游戏包含完整的分数管理、玩家切换和特殊规则处理功能。

技术要点

1. Electron桌面应用架构

主进程设计：使用Electron的主进程管理应用生命周期、窗口创建和系统资源
渲染进程：负责游戏界面渲染和用户交互逻辑
进程间通信：通过preload脚本实现安全的上下文隔离通信机制

2. 游戏核心算法

随机数生成：使用JavaScript的Math.random()实现骰子的随机投掷
分数计算：实现了复杂的计分规则，包括特殊情况（摇出1点、两个1点等）的处理
状态管理：使用单一状态对象管理游戏的所有状态，确保数据一致性
本地存储：使用localStorage保存最高分记录，实现数据持久化

3. UI/UX设计

响应式布局：游戏界面适配不同屏幕尺寸，提供良好的桌面体验
动画效果：实现了骰子滚动动画、胜利模态框过渡效果等
交互反馈：为用户操作提供即时的视觉和文本反馈
主题设计：采用渐变色设计，提供现代感的用户界面

4. 用户交互设计

多模式控制：支持鼠标点击和键盘快捷键操作（R-摇骰子、H-保留分数、N-新游戏）
状态指示：通过视觉元素明确指示当前活跃玩家和游戏状态
错误处理：对无效操作进行拦截，并提供友好的提示信息

主要功能

完整的游戏流程
- 骰子随机投掷和点数计算
- 特殊规则处理（摇出1点、两个1点等）
- 分数累积和保留机制
- 玩家轮换系统
- 胜利条件判断
分数管理系统
- 实时显示本轮得分和总分
- 记录游戏回合数
- 保存和显示历史最高分
- 特殊事件分数处理
用户界面功能
- 美观的骰子动画效果
- 直观的玩家状态指示
- 详细的游戏结果和事件消息
- 胜利庆祝模态框
游戏控制功能
- 新游戏开始
- 骰子投掷控制
- 分数保留选项
- 玩家手动切换
- 键盘快捷键支持

项目结构

复制代码

28-dice-game/
├── main.js          # Electron主进程文件
├── preload.js       # 预加载脚本，用于进程间通信
├── index.html       # 游戏主界面
├── style.css        # 游戏样式文件
├── renderer.js      # 游戏核心逻辑
├── package.json     # 项目配置和依赖
└── README.md        # 项目文档（当前文件）

实现细节

1. 主进程实现 (main.js)

主进程负责应用的生命周期管理和窗口创建：

javascript 复制代码

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

// 确保只有一个应用实例运行
const gotTheLock = app.requestSingleInstanceLock();

if (!gotTheLock) {
  app.quit();
} else {
  // 创建主窗口函数
  function createWindow() {
    const mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      title: '骰子游戏 - Electron for 鸿蒙PC项目实战案例',
      webPreferences: {
        preload: path.join(__dirname, 'preload.js'),
        nodeIntegration: true,
        contextIsolation: false,
      }
    });

    // 加载主界面
    mainWindow.loadFile('index.html');
  }

  // 应用生命周期事件处理
  app.whenReady().then(() => {
    createWindow();

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

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

2. 游戏核心逻辑 (renderer.js)

游戏逻辑实现了骰子投掷、分数计算和玩家切换等核心功能：

javascript 复制代码

// 游戏状态管理
let gameState = {
    totalScore: [0, 0],      // 玩家1和玩家2的总分
    roundScore: 0,           // 本轮得分
    activePlayer: 0,         // 当前活跃玩家 (0 = 玩家1, 1 = 玩家2)
    gamePlaying: false,      // 游戏是否正在进行
    roundCount: 0,           // 回合数
    highScore: 0,            // 最高分记录
    winningScore: 100        // 获胜分数
};

// 摇骰子核心方法
function rollDice() {
    // 动画效果
    animateDice();
    
    // 延迟显示结果
    setTimeout(() => {
        // 生成随机骰子值
        const dice1 = Math.floor(Math.random() * 6) + 1;
        const dice2 = Math.floor(Math.random() * 6) + 1;
        
        // 更新骰子显示
        updateDiceDisplay(0, dice1);
        updateDiceDisplay(1, dice2);
        
        // 规则处理逻辑
        if (dice1 === 1 || dice2 === 1) {
            // 特殊情况处理...
        } else {
            // 常规情况处理...
        }
    }, 1000);
}

// 其他核心方法：分数保留、玩家切换、胜利检测等

3. UI渲染与交互 (index.html & style.css)

游戏界面设计注重用户体验，提供直观的操作和清晰的视觉反馈：

骰子动画：使用CSS 3D变换实现骰子滚动效果
响应式布局：适配不同屏幕尺寸的桌面设备
视觉设计：使用渐变色和阴影效果创建深度感
交互反馈：按钮悬停效果、状态变化动画等

启动与运行

安装依赖

bash 复制代码

npm install

启动应用

bash 复制代码

npm start

游戏规则简介

基本目标：首先达到100分的玩家获胜
游戏流程：
- 玩家点击「摇骰子」投掷两个骰子
- 骰子点数之和会累加到本轮得分
- 玩家可以选择继续摇骰子或保留本轮得分
- 如果摇出1点，本轮得分清零，轮到下一位玩家
- 如果摇出两个1点，玩家总分清零
特殊规则：
- 摇出对子（除了两个1点）会获得特殊提示
- 玩家可以随时切换（在非游戏进行时）
- 系统会记录历史最高分

技术亮点

流畅的动画体验：使用CSS 3D变换实现逼真的骰子滚动效果
智能的状态管理：通过单一状态对象管理复杂的游戏状态，确保数据一致性
响应式用户界面：适配不同屏幕尺寸，提供一致的用户体验
丰富的交互反馈：为各种游戏事件提供即时的视觉和文本反馈
本地数据持久化：使用localStorage保存最高分记录

优化方向

性能优化：
- 优化动画性能，减少重绘和回流
- 代码模块化重构，提高可维护性
功能扩展：
- 添加更多游戏模式和规则选项
- 实现电脑AI对手功能
- 添加音效和背景音乐
用户体验改进：
- 添加更详细的游戏教程
- 实现游戏进度保存和恢复
- 添加主题切换功能

注意事项

本游戏仅供学习和娱乐目的
游戏使用localStorage保存最高分数据，清除浏览器数据可能导致记录丢失
如有任何问题或建议，请提交Issue或Pull Request

鸿蒙PC适配改造指南

1. 环境准备

系统要求：Windows 10/11、8GB RAM以上、20GB可用空间
工具安装 ：

DevEco Studio 5.0+（安装鸿蒙SDK API 20+）
Node.js 18.x+

2. 获取Electron鸿蒙编译产物

登录Electron 鸿蒙官方仓库
下载Electron 34+版本的Release包（.zip格式）
解压到项目目录，确认electron/libs/arm64-v8a/下包含核心.so库

3. 部署应用代码

将Electron应用代码按以下目录结构放置：

plaintext 复制代码

web_engine/src/main/resources/resfile/resources/app/
├── main.js
├── package.json
└── src/
    ├── index.html
    ├── preload.js
    ├── renderer.js
    └── style.css

4. 配置与运行

打开项目：在DevEco Studio中打开ohos_hap目录
配置签名 ：

进入File → Project Structure → Signing Configs
自动生成调试签名或导入已有签名
连接设备 ：

启用鸿蒙设备开发者模式和USB调试
通过USB Type-C连接电脑
编译运行：点击Run按钮或按Shift+F10

5. 验证检查项

✅ 应用窗口正常显示
✅ 窗口大小可调整，响应式布局生效
✅ 控制台无"SysCap不匹配"或"找不到.so文件"错误
✅ 动画效果正常播放

跨平台兼容性

平台	适配策略	特殊处理
Windows	标准Electron运行	无特殊配置
macOS	标准Electron运行	保留dock图标激活逻辑
Linux	标准Electron运行	确保系统依赖库完整
鸿蒙PC	通过Electron鸿蒙适配层	禁用硬件加速，使用特定目录结构

鸿蒙开发调试技巧

1. 日志查看

在DevEco Studio的Log面板中过滤"Electron"关键词，查看应用运行日志和错误信息。

2. 常见问题解决

"SysCap不匹配"错误：检查module.json5中的reqSysCapabilities，只保留必要系统能力
"找不到.so文件"错误：确认arm64-v8a目录下四个核心库文件完整
窗口不显示：在main.js中添加app.disableHardwareAcceleration()
动画卡顿：简化CSS动画效果，减少重绘频率