[预热]关我自研的联机中国象棋游戏

164 阅读2分钟

游戏地址:www.aixt.vip (请使用手机模式浏览)

游戏截图

image.png

功能列表

  • 游客登录
  • 账号密码/绑定邮箱登录
  • QQ授权登录
  • 账号注册,支持绑定邮箱,绑定时需要发送验证码
  • 忘记密码找回
  • 版本历史记录展示
  • 登录后展示个人信息(头像、昵称、积分、胜负和、排名)
  • 加入房间
  • 房间换桌
  • 房间踢人
  • 对局准备
  • 棋盘、棋子展示
  • 棋子移动动画
  • 游戏音效
  • 对局聊天、悔棋、认输、求和
  • 换肤功能
  • 对局观战信息展示
  • 观战全员禁言
  • 观战针对个人禁言
  • 观战针对个人踢出
  • 房间邀请功能
  • 大厅用户可观战已建立的对局
  • 大厅用户观战聊天功能
  • 大厅用户观战交换观战视角(红方与黑方互相切换)
  • 大厅用户观战可保持屏幕常亮
  • 复盘功能
  • 复盘分享功能
  • 棋谱功能
  • 数据断连(游戏断开再登录后,可恢复对局)

技术要点

  • React 前端主要语言,配合umijs编写功能
  • Ant-Mobile UI框架,有很多现成的组件供使用
  • umijs 脚本架,快速构建项目
  • socket.io 消息通信
  • node.js javascript引擎,配合ts编写服务端功能
  • ES6 学习ES6的语法,用于编写代码
  • Redis 缓存工具,用于缓存对战信息
  • MySQL 数据库,用户保存游戏产生的数据
  • typescript

项目结构(重点文件/文件夹)

├── src
│   ├── app.js                     应用配置(全局)
│   ├── config.js                  项目配置(全局)
│   ├── global.less                样式配置(全局)
│   ├── assets                     资源文件
│   │   ├── audio                  音效
│   │   ├── font                   字体
│   │   ├── images                 图片
│   │   └── skins                  皮肤
│   ├── button                     自定义按钮
│   ├── circle                     自定义弹窗
│   ├── components                 自定义加载动画
│   ├── header                     自定义标题
│   ├── layouts                    父页面
│   ├── pages                      子页面
│   │   ├── document.ejs           启动加载页
│   │   ├── board                  棋盘界面
│   │   ├── user                   登录/注册/忘记密码
│   │   ├── platform               游戏平台界面
│   │   ├── review                 复盘界面
│   │   ├── rooms                  房间界面
│   │   ├── sahre                  分享页面
│   │   ├── version                版本界面
│   │   └── watch                  观战界面
│   ├── service                    Socket封装
│   │   ├── event.js               socket事件管理(API)
│   │   └── socket.js              socket连接管理
│   └── utils                      工具包
│       ├── board-canvas-utils.js  棋盘绘制工具
│       ├── board-utils.js         棋盘工具
│       ├── cache-key-utils.js     缓存Key管理
│       ├── check-win.js           检测胜利(绝杀/困毙)
│       ├── const-utils.js         常量管理
│       ├── cryptor-utils.js       数据加解密
│       ├── head-canvas-utils.js   头像绘制工具
│       ├── images-res.js          图片资源管理
│       ├── keep-fighting.js       长将检测
│       ├── log-utils.js           日志管理
│       ├── map-res.js             地图静态数据
│       ├── rule-check.js          规则检测
│       ├── rules                  具体规则实现
│       │   ├── basic-rule.js      基本规则检测(车、马、象等)
│       │   └── boss-rule.js       Boss规则检测(碰面、被将军)
│       ├── skin-utils.js          皮肤管理
│       ├── sounds-res.js          音效管理
│       └── storage-utils.js       缓存管理
├── package.json

后续会考虑在掘金或者csdn更新该游戏的细节及课程,我在掘金申请了小册,在csdn申请了讲师,主要看哪个渠道能申请通过,喜欢的朋友点个关注,对游戏感兴趣的朋友,可以点击链接试玩,或者加bug反馈群,可以交流讨论