零前端基础硬刚《象棋》- 持续更新

背景

象棋是一款益智类游戏，玩家可以通过操控棋子排兵布阵，最终获得游戏的胜利。在作者小时候，该游戏一直是风靡在村里的大街小巷，本着对童年的回味和对象棋的热爱，本主会尽自己的全力完成此款游戏的设计开发，欢迎点赞和收藏！

• 在线地址：https://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      基