游戏地址:www.aixt.vip (请使用手机模式浏览)
游戏截图
功能列表
- 游客登录
- 账号密码/绑定邮箱登录
- 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反馈群,可以交流讨论