游戏启动中心 - 仓颉语言版

目录

• 项目简介
• 功能特性
  • 🎮 游戏管理
  • 🧱 推箱子游戏功能
  • ◯ 五子棋游戏功能
  • 🎨 画图游戏功能
  • 🖥️ 界面特性
  • 💾 数据持久化
• 项目结构
• 技术栈
• 运行方式
  • 方式一：双击启动脚本（推荐）
  • 方式二：直接打开游戏选择界面
  • 方式三：直接打开推箱子游戏
  • 方式四：运行仓颉程序
• 游戏操作
  • 键盘操作
  • 触摸操作
  • 界面按钮
• 计分规则
  • 基于难度的分数系统
  • 惩罚机制
• 关卡信息
• 游戏元素
• 项目亮点
• 技术架构
  • 前端架构
  • 后端架构
  • AI架构（五子棋）
• 开发环境
  • 前端开发
  • 后端开发
  • 操作系统
• 安装与配置
• 已知问题
• 未来规划
• 配置文件
• 退出行为
• 项目链接

项目简介

这是一个使用 仓颉语言 开发的游戏启动中心，包含经典推箱子（Sokoban）游戏、五子棋游戏和画图游戏，采用前后端分离架构。项目包含完整的游戏逻辑、现代化的 Web 界面、数据持久化功能和游戏管理界面，支持人类玩家与AI对手进行对战，以及自由创作的画图功能。

功能特性

🎮 游戏管理

• 游戏选择界面：集中管理多个游戏的启动和退出
• 推箱子游戏：经典的推箱子益智游戏
• 五子棋游戏：完整的五子棋游戏，支持人人对战和人机对战
• 画图游戏：完整的画图游戏，支持画笔、橡皮擦和形状绘制
• 退出功能：从游戏返回选择界面，从选择界面结束游戏

🧱 推箱子游戏功能

• 10 个关卡：从基础教学到终极挑战，难度递增
• 基于难度的分数系统：根据关卡难度动态计算分数
• 时间奖励机制：在规定时间内完成关卡获得额外分数
• 步数奖励机制：在规定步数内完成关卡获得额外分数
• 连击系统：连续成功操作获得额外分数
• 历史记录：自动保存游戏成绩到本地存储
• 排行榜：显示历史最高分和游戏记录
• 撤销功能：支持撤销操作（最多 100 步）
• 响应式设计：适配桌面端和移动设备
• 触摸支持：移动端支持滑动手势控制

◯ 五子棋游戏功能

• 多种游戏模式：支持人人对战和人机对战
• 多种棋盘大小：支持13x13、15x15、19x19三种棋盘大小
• AI难度级别：简单、中等、困难三个难度级别
• AI决策系统：基于极大极小值算法（Minimax）和评估函数
• 胜负判断：自动检测横、竖、斜向五子连珠
• 游戏状态管理：支持开始新游戏、重新开始、悔棋等功能
• 落子动画：流畅的棋子放置动画效果
• 先手选择：可选择黑棋或白棋先手
• 游戏状态提示：实时显示当前玩家和游戏状态
• 响应式设计：适配桌面端和移动设备
• 触摸支持：移动端支持触摸操作

🎨 画图游戏功能

• 画笔工具：支持不同粗细（1-20px）和颜色选择
• 橡皮擦工具：擦除画布上的内容
• 形状绘制：支持直线、矩形、圆形等基本形状
• 撤销/重做：支持多次撤销和重做操作，最多保存50步历史
• 画布清空：一键清空画布
• 颜色选择：提供多种预设颜色
• 实时预览：形状绘制时的实时预览效果
• 响应式设计：适配桌面端和移动设备
• 触摸支持：移动端支持触摸操作
• 历史记录：最多保存50步操作历史

🖥️ 界面特性

• 现代化 UI：渐变背景、圆角卡片、阴影效果
• 游戏选择界面：卡片式布局，清晰展示游戏状态
• 推箱子游戏界面：三栏布局，左侧分数面板、中间游戏区域、右侧历史成绩
• 五子棋游戏界面：简洁布局，棋盘居中，游戏控制和状态显示在两侧
• 动画效果：分数更新、通关庆祝、最高分更新、落子动画
• 实时统计：关卡、步数、推箱次数、时间、进度、当前玩家
• 操作提示：键盘快捷键和触摸操作说明
• 奖励提示：显示得分奖励详情
• AI状态提示：显示AI思考状态

💾 数据持久化

• 本地存储：使用 localStorage 保存游戏记录
• 历史记录：最多保存 50 条历史游戏成绩
• 最高分：自动记录和更新最高分
• 页面刷新：记录不会丢失
• 会话保存：页面关闭时自动保存游戏记录

项目结构

cangjie_study/
├── src/                       # 仓颉源代码
│   ├── types/                # 类型定义
│   │   └── common.cj         # 枚举和位置类
│   ├── game/                 # 游戏逻辑
│   │   ├── model.cj          # 数据模型
│   │   ├── level.cj          # 关卡管理
│   │   └── engine.cj         # 游戏引擎
│   ├── ui/                   # 控制台界面
│   │   ├── renderer.cj       # 渲染器
│   │   └── input.cj          # 输入处理
│   └── main.cj               # 程序入口
├── web/                      # Web 前端
│   ├── launcher.html         # 游戏选择界面
│   ├── index.html            # 推箱子游戏页面
│   ├── game.js               # 推箱子游戏逻辑
│   ├── gomoku.html           # 五子棋游戏页面
│   ├── gomoku.js             # 五子棋游戏逻辑
│   ├── drawing.html          # 画图游戏页面
│   ├── drawing.js            # 画图游戏逻辑
│   └── score_config.json     # 分数配置文件
├── cjpm.toml                 # 包管理配置
├── start_game.bat            # 启动脚本
└── README.md                 # 项目说明

技术栈

• 后端：仓颉语言 (Cangjie)
• 前端：HTML5 + CSS3 + JavaScript
• 构建工具：cjpm (仓颉包管理器)
• 存储：localStorage (浏览器本地存储)
• 配置：JSON 配置文件

运行方式

方式一：双击启动脚本（推荐）

./start_game.bat

方式二：直接打开游戏选择界面

# 打开 web 目录下的 launcher.html 文件
start web/launcher.html

方式三：直接打开推箱子游戏

# 打开 web 目录下的 index.html 文件
start web/index.html

方式四：运行仓颉程序

# 设置环境变量
$env:CANGJIE_HOME = "D:\soft\cangjie\cangjieSDK\cangjie"
$env:PATH = "D:\soft\cangjie\cangjieSDK\cangjie\bin;..." + $env:PATH

# 编译和运行
cjpm build
cjpm run

游戏操作

键盘操作

按键	功能
W / ↑	向上移动
S / ↓	向下移动
A / ←	向左移动
D / →	向右移动
Z	撤销操作
R	重置关卡
N	下一关
ESC	退出游戏（返回选择界面）

触摸操作

• 滑动：上下左右滑动控制移动方向
• 按钮：点击屏幕上的方向按钮

界面按钮

• 撤销：撤销上一步操作
• 重置：重置当前关卡
• 上一关：返回上一关
• 下一关：进入下一关
• 排行榜：查看历史最高分
• 退出：保存记录并返回游戏选择界面

计分规则

基于难度的分数系统

难度	基础分数	时间奖励	步数奖励	连击奖励
简单 (1-2关)	10分	≤30秒 +5分	≤10步 +8分	≥3连击 +3分
中等 (3-5关)	20分	≤45秒 +8分	≤15步 +12分	≥4连击 +5分
困难 (6-8关)	35分	≤60秒 +12分	≤20步 +18分	≥5连击 +8分
专家 (9-10关)	50分	≤90秒 +20分	≤25步 +25分	≥6连击 +12分

惩罚机制

• 超时：超过时间阈值扣除10分
• 额外步数：每超过步数阈值1步扣除1分（最多扣除50%分数）

关卡信息

关卡	难度	箱子数	出口数
1	简单	1	1
2	简单	2	2
3	中等	2	2
4	中等	2	3
5	中等	2	3
6	困难	2	4
7	困难	2	4
8	困难	2	4
9	专家	2	4
10	专家	2	5

游戏元素

元素	显示	说明
墙壁	██	不可穿过
地板	··	可移动
玩家	♀	控制角色
箱子	□□	需要推动
出口	↓	箱子推出的目标

项目亮点

1. 游戏管理界面：集中管理多个游戏，提供统一的启动和退出机制
2. 前后端分离：仓颉语言处理核心逻辑，Web 前端负责界面
3. 现代化界面：采用现代 UI/UX 设计原则
4. 多端适配：支持桌面端和移动端
5. 数据持久化：本地存储游戏记录
6. 完整功能：从基础玩法到高级特性
7. 智能计分：基于难度和表现的动态分数计算
8. 排行榜系统：记录和展示游戏成绩
9. 用户友好：丰富的动画效果和操作提示
10. 模块化设计：易于扩展新游戏
11. AI对战功能：五子棋游戏支持人机对战，具有不同难度级别
12. 智能AI算法：实现了基于极大极小值算法的AI决策系统
13. 画图功能：完整的画图工具集，支持多种绘制方式
14. 实时预览：形状绘制时的实时预览效果
15. 历史记录：支持多次撤销和重做操作

技术架构

前端架构

• HTML5：页面结构
• CSS3：样式设计，包括响应式布局和动画效果
• JavaScript：游戏逻辑和交互处理
• 模块化设计：每个游戏独立实现，易于维护和扩展

后端架构

• 仓颉语言：核心游戏逻辑处理
• 前后端分离：Web 前端与仓颉后端通过接口通信

AI架构（五子棋）

• 决策算法：极大极小值算法（Minimax）
• 优化技术：α-β剪枝
• 评估函数：基于棋子连线、位置价值和攻防平衡
• 难度调节：通过搜索深度和评估函数复杂度实现

开发环境

前端开发

• 浏览器：Chrome、Firefox、Safari、Edge 等现代浏览器
• 编辑器：Visual Studio Code、Sublime Text、WebStorm 等

后端开发

• 仓颉 SDK：需要安装仓颉语言开发环境
• cjpm：仓颉包管理器

操作系统

• Windows、macOS、Linux

安装与配置

1. 克隆项目：

   git clone <repository-url>
   cd cangjie_study
   

2. 安装仓颉 SDK：

   • 下载并安装仓颉语言开发环境
   • 设置环境变量：

     $env:CANGJIE_HOME = "D:\soft\cangjie\cangjieSDK\cangjie"
     $env:PATH = "D:\soft\cangjie\cangjieSDK\cangjie\bin;..." + $env:PATH
     

3. 构建项目：

   cjpm build
   

4. 运行项目：

   • 双击 start_game.bat 启动游戏
   • 或直接打开 web/launcher.html 进入游戏选择界面

已知问题

• 性能优化：在困难模式下，AI搜索可能会在较大棋盘上导致轻微延迟
• 浏览器兼容性：某些旧版浏览器可能不支持部分CSS3特性
• 移动设备：在小屏幕设备上，棋盘可能显得较小

未来规划

1. 游戏扩展：

   • 添加更多游戏类型，如贪吃蛇、俄罗斯方块等

2. 功能增强：

   • 五子棋游戏添加在线对战功能
   • 推箱子游戏添加自定义关卡编辑器
   • 实现游戏成就系统

3. AI优化：

   • 进一步优化AI算法，提高搜索效率
   • 添加更多AI难度级别
   • 实现机器学习-based AI

4. 界面改进：

   • 进一步优化移动端适配
   • 添加更多动画效果和视觉反馈
   • 实现主题切换功能

5. 社交功能：

   • 添加游戏成绩分享功能
   • 实现全球排行榜
   • 添加好友系统

配置文件

score_config.json：定义不同难度级别的分数参数，可通过修改此文件调整计分规则。

退出行为

• 游戏内退出：点击游戏中的退出按钮，保存游戏记录并返回游戏选择界面
• 选择界面退出：点击选择界面的退出按钮，关闭游戏窗口

享受游戏，挑战自我！ 🎉

项目链接

此项目为博主学习仓颉语言时开发的，欢迎所有人复刻代码，学习使用。