篮球游戏 - Electron for 鸿蒙PC项目实战案例

项目介绍

本项目是一个基于Electron开发的篮球游戏应用，适用于鸿蒙PC平台。游戏中玩家通过鼠标点击或触摸操作来控制投篮角度和力度，尽可能多地将篮球投进篮筐获取分数。

功能特点

鼠标/触摸/键盘控制投篮
物理引擎模拟篮球飞行轨迹
分数系统和最高分记录
倒计时系统增加游戏紧张感
开始/暂停/重新开始游戏控制
游戏结束判定和重新开始
响应式界面设计，适配不同屏幕尺寸

技术栈

Electron: 用于创建跨平台桌面应用
HTML5 Canvas: 用于游戏画面渲染
JavaScript: 游戏逻辑实现和物理引擎
CSS3: 界面样式设计

项目结构

复制代码

65-basketball-game/
├── main.js          # Electron主进程文件
├── package.json     # 项目配置和依赖
└── src/             # 渲染进程资源
    ├── index.html   # 游戏主界面
    ├── style.css    # 界面样式
    ├── preload.js   # 预加载脚本
    └── renderer.js  # 游戏渲染和逻辑

鸿蒙适配后结构（需整合到 Electron 鸿蒙项目模板中）：

plaintext 复制代码

ohos_hap/
├── electron/
│   ├── libs/
│   │   └── arm64-v8a/  # 鸿蒙核心库文件
│   │       ├── libelectron.so
│   │       ├── libadapter.so
│   │       ├── libffmpeg.so
│   │       └── libc++_shared.so
├── web_engine/
│   └── src/
│       └── main/
│           └── resources/
│               └── resfile/
│                   └── resources/
│                       └── app/  # 放置electron应用代码
│                           ├── main.js
│                           ├── package.json
│                           └── src/
└── module.json5        # 鸿蒙应用配置文件

鸿蒙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动画效果，减少重绘频率

核心功能模块

1. 投篮控制系统

鼠标拖拽或点击控制投篮角度和力度
键盘方向键控制角度，空格键控制力度和投篮
触摸屏幕支持移动设备操作

2. 物理引擎

实现篮球飞行的抛物线轨迹
考虑重力、空气阻力等物理因素
篮筐碰撞检测和反弹效果

3. 分数系统

成功投篮加分
连续投篮成功额外加分
使用localStorage保存最高分记录

4. 计时器系统

倒计时功能限制游戏时间
时间结束游戏结束

5. 游戏状态管理

支持开始、暂停、继续和重新开始游戏
游戏结束时显示分数和最高分

安装和运行

安装依赖

bash 复制代码

npm install

运行游戏

bash 复制代码

npm start

开发模式运行（开启开发者工具）

bash 复制代码

npm run dev

游戏操作说明

鼠标操作: 点击并拖动鼠标控制投篮角度和力度，松开鼠标投篮
键盘操作 :
- 方向键 ← → 控制角度
- 空格键调整力度并投篮
开始游戏: 点击"开始游戏"按钮
暂停/继续: 点击"暂停/继续"按钮
重新开始: 点击"重新开始"按钮

游戏设计思路

物理系统

实现了基于物理学原理的抛物线运动
篮球有质量、速度、加速度等物理属性
篮筐碰撞后有真实的反弹效果

难度平衡

投篮角度和力度需要精确控制
倒计时机制增加游戏紧张感
连续得分机制鼓励玩家保持专注

用户体验优化

直观的投篮预览线
清晰的分数和时间显示
实时的游戏状态反馈

适配鸿蒙PC平台

界面设计考虑鸿蒙PC平台特性
使用Electron的跨平台能力确保在鸿蒙PC上正常运行
响应式设计适配不同尺寸的显示设备
同时支持鼠标、键盘和触摸操作

扩展可能性

添加多种游戏模式（限时、限球数等）
实现多人对战功能
添加不同类型的篮筐和特殊道具
增加角色选择和技能系统
添加背景音乐和音效