2020-2021学年第2学期
实 验 报 告
实验内容
平台跳跃游戏。
作品设计（目的，功能）
-
目标：实现一个平台跳跃游戏。
-
功能：游戏上能够实现基本的移动、得分、死亡，生命数等，也拥有账号系统的基本功能如登陆注册、评论、分数上传，排行榜，评论等。
项目评分
| 函数式编程 | xhr fetch api | FRP | session Storage | 响应式设计 | other | | -----| ---- | ---- | ---- | ---- | ---- | | 4 | 4 | 3 | 4 | 3 | 4 |
系统结构描述
本品实现语言为javascript+html+css,主要使用Node.js+express后端开发，vue前端开发，数据库采用mysql，数据库结构采用冗余设计。
游戏界面：用于进行平台跳跃游戏
信息界面：用于显示个人信息、评论、排行榜等等。
.png)
技术要点说明
本人主要是进行了前端页面布局设计，游戏机制修改，游戏素材替换，增加前端排行榜，注册登录，游戏信息，评论区等动态渲染内容，根据后端数据渲染界面，根据游戏状态渲染游戏信息模版，前后端接口调试。
- 排行榜
- 有两种形式
- 本地：当前端页面连接不到数据库时，将会读取浏览器的localStorage缓存渲染排行榜
- 云端：当前端页面能连接到数据库时，将会读取云端排行榜数据
- 有两种形式
- 评论
- 用户通过输入评论内容，点击评论按钮即可评论，前端将会对后端发起请求，新增评论
- 自动从页面缓存数据中提取姓名，时间等内容，存储到数据库中并动态渲染新增的评论
- 登录
- 设计用户名框和密码框，点击登录按钮将会对后端发起用户请求认证，请求通过后则会进入登录状态，由sessionStorage存储相关用户信息，相关用户信息将会用于上传分数以及发布评论用。
- 登录成功后会自动隐藏登录相关内容
- 游戏修改
- 修改游戏素材，样式，美化界面
- 增加生命机制，只有生命数消耗完全，才会进行结算以及游戏的初始化
- 游戏结算将会跳出结算弹框，自动上传分数到排行榜
- 增加计时功能，记录单局游戏时间
- 增加记分机制，吃到的金币越多，分数也越高
- 前后端交互
- 使用axios库来对后端发起http请求，做到了异步请求，防止页面卡顿
- 采用了前后端分离的方式开发，加快了项目的开发效率
个人总结
- 本次大作业很有意义，我的主要工作在于对游戏机制的修改和页面的交互逻辑，使用了storage这一h5的新特性进行了页面的缓存操作，也使用了vue框架来对页面进行动态渲染，这次项目写下来让我对js的异步操作也有了更深的理解。
- 本学期的跨平台脚本开发技术课程还是很不错的，老师讲的很多东西都挺有深度的，大大拓宽了我的眼界，加深了我的技术深度，期末项目的选题也很有意思。老师教授的内容质量也很高，也带领我们看了很多有意思的项目。