找不同项目复盘总结（前端）
一、项目基本信息
| 项目名称 | 找不同游戏 | ||
| 开始时间 | 2024.1.29 | 结束时间 | 2024.3.6 |
| 项目介绍 | 这是我参与的第一个项目——找不同小游戏。这个小游戏没有过于复杂的功能，能够实现邀请好友加入等待房间并由房主决定开始游戏；游戏中以原图为参照，在另一张图片上找不同；双人游戏结果以排行榜的形式呈现，单人游戏则直接判定成功与否。 | ||
| 源码地址 | khatung/find difference - Gitee.com | ||
| 项目预览 | Document |
二、项目复盘
G（Goal）目标回顾
目标 1：学习和使用websocket、Ajax
目标 2：复习和熟练所学过的知识和方法
目标 3：熟悉完成项目的整个过程，为后面写项目更加熟练奠定基础
目标3：提升解决问题的能力和编程实践经验
R（Result）结果陈述
| 目标 | 结果 | 是否满足预期 |
| 目标 1 | 掌握websocket的使用，了解心跳的发送、断线重连；掌握Ajax怎么发送以及接收数据 | 完成 |
| 目标 2 | 复习了之前学过的知识和方法 | 完成 |
| 目标 3 | 熟悉了项目从最开始的商定主体、需求沟通到后面可以流畅的数据传输、实现功能 | 完成 |
| 目标4 | 到项目后期，对一些功能的实现有了更多自己的思考，但还有很大的进步空间 | 不足 |
亮点与不足
🌟 项目亮点
| 🌱 不足与提升
|
A（Analysis）过程分析
叙述执行过程：尽可能客观、详细回溯过程、步骤、细节
| 阶段 | 任务 | 预期情况 | 实际情况 | 评价总结 |
| 筹备 | 游戏主体 | 目标实现找不同游戏的功能 | 游戏虽然简略但大致功能实现了 | 符合预期 |
| 辅助功能 | 游戏可以邀请好友 | 可以支持单人和多人游戏 | 符合预期 | |
| 实施 | 游戏思路 | 用画布将一张图片分成36份，识别点击的是否是有不同的那块，如果是，则让红色圆圈的盒子显现出来 | 实现上述功能 | 符合预期 |
| 信息交互 | 使用websocket进行房间组队和双人游戏以及信息传输 | 最终实现功能 | 符合预期 | |
| 交付 | 自己调试 | 可以正常进入游戏、邀请好友、玩游戏、显示结果 | 跟自己所计划的效果一致 | 符合预期 |
| 老师调试 | 可以无意外的将游戏从头进行到尾，各项功能都没问题 | 游戏可以正常进行，但退出房间有些问题 | 低于预期 |
任务成功原因
| 任务失败原因
|
I（Insight）归类总结
总结
通过以上的分析，对本次项目进行总结：
1.完成了整个游戏的基本流程，保证整个项目能够正常运行。
2.完成了websocket的学习和使用，熟练掌握websocket四种大方法的使用(onopen、onmessage、onclose、onerror)；了解了心跳包的定义、使用和关闭以及断线重连的方法。
3.能够熟练运用本地存储来实现条件的判断
4.了解了一点部署服务器的相关操作
规律（提炼出可适用类似情况的经典方法沉淀，提炼规律）
不能用a标签去包一个跟跳转链接有关的元素，不然a标签里的href属性就会跟那个元素的跳转链接相冲突，导致不能按预期效果进行跳转
三、技术总结
所用技术栈及代码规范
| 技术栈（列觉所用的技术）
| 列觉所遵循的代码规范
|
遇到的问题及解决方案
第一个：
问题：在进行断线重连的操作时，重连之后两个客户端的页面不能同步
解决方法：不断调试，将整个过程不断梳理，最后在前后端一起检查数据传输结果时，发现是传的数据有问题，按理应该是给当前客户端传对方的数据，但因为一时疏忽，所写代码实现的效果是给当前客户端传自己的数据，所以就导致断线重连后有问题，不过调整后就好了。
感悟：提醒我们在数据交互时，要及时跟后端进行确认传的数据是否有误，有问题及时改正，不能在这些简单的问题上耗费太多的时间。
第二个：
问题：断线重连之后，websocket断开连不上
解决方法：请教了老师，发现是因为那个时候后端还没有写心跳机制，而我们前端这边已经写了，就导致心跳机制发送请求时后端那边返回不了相应的数据，就会误以为后端那边断开连接了，前端这边就也会断开。
感悟：因为初学websocket还有心跳机制，对于这些知识研究的不深，所以在一些明显的问题上发现不了。
所实现的功能介绍
前提介绍：本项目玩家没有注册的流程，也就是说玩家没有固定的账号，每次进入游戏就是一个新的身份，所以项目大多借助本地会话存储进行实现相应的功能。
涉及到本地存储：一般情况下回会存data和data2,data是指当前客户端自己的，data2存的是对方的。所以两个客户端key值相同的数据里存的是不同玩家的信息。
复制生成的链接发送给好友
样例：
1、定义一个基础链接，因为邀请好友进入游戏是先进入登录页面，所以基础链接设置为首页的链接
2、获取房间id作为参数放入到链接中并展现到小弹窗上
先定义一个方法来生成带参数的链接
然后将生成的链接渲染到小弹窗上
3、最后定义一个方法来将内容复制到剪切板上
4、点击复制链接时调用这个方法，然后直接粘贴发给好友就行了
实现两个玩家进入同一个房间
1、只有房主进入房间
- 房主刚登录时（还没有进入等待房间）本地存的的房间id为空，将本地存的信息作为数据包发给后端，
- 后端判定这个是房主，给他申请一个房间并将带房间id的数据包返回给前端这边，
- 前端将这个数据包存入本地，key值暂设为“data”。
- 前端从本地调用数据渲染到页面上（不直接用后端发来的数据进行渲染是怕刷新后页面消失，不稳定）
2、邀请好友进入房间
- 根据上面的方式生成链接，并把链接发给好友，好友点击链接进入到游戏主页
- 在主页登记信息后，点进入房间（还没进入房间时），本地会存被邀请人的信息，同样从本地拿出来发给后端，后端判断这个玩家是被邀请人，然后根据房间id匹配到这个房间
- 后端那边判断完成后会分给前端这边对方的数据包（也就是给房主的客户端返被邀请人的数据包，给被邀请人返房主的数据包）
- 同样存入本地，然后从本地拿出来进行渲染
- 这个时候就发现两个客户端房间的页面上都有这两个玩家的信息了
断线重连
1、首先，创建websocket
2、定义一个重新链接的函数,每隔两秒重新调用创建websocket的方法来重新连接
3、当websocket关闭或者有错误时，在本地随便存一个数据用来判断，并且重新连接
重新连接后会调用ws.onopen,在里面判断本地是否存的有那个“signal”数据包,有的话就表示是断线重连后给后端发数据包，这个数据包的类型需要跟后端那边协商，后端要判断接受的数据包类型
后端接收到这个类型的数据包后，就知道是断线重连了，然后进行更新对方的数据包
退出房间后重新进入
功能实现前情：在给老师交付后才发现这个问题之前没注意到，在点击浏览器左上角的返回键退出房间后不能再正常进入房间。第一反应是监控是否点击了浏览器上那个按钮，但试了很多方法都没用，所以想着从项目本身出发解决
1、玩家退出房间后是回到了主页，那么就通过查看本地存储的数据的判断玩家是否是退出房间了
2、玩家首次进入游戏到主页时，本地是没有这位玩家的信息的，以为只有点击进入游戏后才会把信息存入本地；而玩家从房间退回主页时，这个时候本地玩家的信息是有的。所以就通过这个不同来进行判断
3、情况一：当房主还没有邀请玩家，房间里只有房主自己一个人并且房主退出房间。
这个时候本地是只有房主的信息，判断后给后端传房主的数据包，让他知道房主退出房间了，后端那边进行销毁房间。此时前端这边应该把本地的数据进行清空。
4、情况二：房主已经邀请好友，但房主退出房间：
同样在首页去本地看存的“data”的数据存的是谁的信息
如果是房主的，那就证明是房主退出了房间，给后端发房主的数据包，后端进行销毁房间同时给前端特定类型的数据包
前端判断收到那个数据包后在被邀请人页面上进行提示：房间已被销毁，然后被邀请人退回首页
5、情况三：被邀请人退出房间
被邀请人客户端“data”里面存的是自己的信息，从本地拿出来发给后端，后端判断能发现是被邀请人退出房间，然后给房主客户端传数据包，前端判断后在房主客户端进行提示
四、最后总结
这个项目因为是和其他前端共同完成的，所以就只讲了一下自己所完成部分的一些功能。有很多地方还需要再完善，讲述的不太清楚的地方可以问，有问题的地方也欢迎指正！！
还没有评论，来说两句吧...