github链接

队员 博客链接 具体分工
陈捷祥 https://www.cnblogs.com/cjx0117/p/15455853.html 游戏开发及测试
杨开彬 https://www.cnblogs.com/cn0101/p/15455832.html 素材收集,原型设计

一、原型设计

[2.2.1]提供此次结对作业的设计说明(16分)

  • 这部分的首行原型作品的链接(1分)

    • 原型链接
      这部分为了速成我选择了墨刀用于做原型设计,但是墨刀貌似更适合手机端的原型开发,网页交互这部分很多想法没办法实现。以下为展示情况:
  • 登录界面:输入学号及对应密码实现登录

  • 对战模式选择:分为人机对战,玩家2P对战,在线对战三种模式,选择在线模式会跳入房间选择页面

  • 房间选择:可以选择相应房间然后加入对战,房间页面可来回切换查询,或者可以选择创建房间,选择输入房间号码加入房间


  • 对局开始:点击中央卡牌开始对局


  • 对局结束:对局结束时,双方都会显示的对局结果,点击返回回到对战模式选择页面

[2.2.2]遇到的困难及解决方法:(4分)

  • 困难描述(1分)

    • 根本的问题就是,一开始,什么都不会,处于空白期的我连原型这个东西都只是概念性的,结对作业从最初而言都是懵的,无从下手不知道具体分工步骤,具体该干什么,该学什么。
  • 解决过程(2分)

    • 在问了一些做过软件开发的同学,听同学的推荐和介绍之后大致明白了入行的第一步,相对找到了一些方向以后,快速学了墨刀的原型设计,但是由于学习的时长相对较短,而且开发的针对点不同,也只是简单设计了几个比较简陋的原型网页,之后一直是在找素材,翻网站慢慢地填填补补,修修改改,只能说做出来的东西能介绍自己对这次作业地思路和理解,但是对于所谓商业原型设计,可能都不能称之为原型设计。
  • 有何收获(1分)

    • 所以要说收获的话,仅仅是入了门也许入门都算不上,原型设计这部分就有很多东西需要再去学习的,但做原型本质地核心就是审美,审美这一块在之后对于产品美工这方面也是蛮重要的,这次设计也学到了一些UI设计审美相关的要素。

二、原型设计实现

[2.3.1]代码实现思路: (11分)

  • 网络接口的使用:

    • 登录接口:在登录界面调用以获取token
    • 创建新的对局:在联机房间选择的界面里选择创建新房间时调用,获取房间uuid
    • 加入一个对局:在联机房间选择的界面里选择加入房间时调用
    • 获取上步操作:在进入房间后自动调用,每隔一秒发送一次请求,根据返回的信息实现等待对手加入、提醒开始游 戏、获取对手操作来更新页面、提醒游戏结束的功能
    • 执行玩家操作:在玩家点击操作并且是在自己回合时发送请求,并根据返回信息更新页面
    • 获取对局列表:在联机房间选择的界面初始化、玩家翻页和跳转页数时发送请求,根据返回信息更新房间列表
    • 获取对局信息:在得知游戏结束时发送请求,根据返回信息提示游戏结果
  • 代码组织与内部实现设计(类图):

    • 对战界面的函数可分为4部分:
接受计算玩家操作()
                {
                  newcard()//从牌堆中抽卡
                  gameover()//判断牌堆是否抽完,结算
                  judge(x)//判断x与判定牌是否相同,自己,若是则把判定区所有牌移到自己手牌
                  judge2(x)//判断x与判定牌是否相同(对手)
                  draw_card(x)//对方打出牌堆顶的牌x
                  draw_card2(x)//自己打出牌堆顶的牌x
                  whichCard(code)//翻译卡牌号
                  transCard(x)//将x翻译为花色加数字
                  playout1(x)//对手打出手牌
                  playout2(x)//自己打出手牌
                  play(code)//计算表现对手操作
                  play2(code)//计算表现自己操作
                 }
更新页面()
                {
                  transTurn(x)//改变回合标记
                  orientation(element,x)//修改element的牌面为x
                  reset(element)//将element牌面置为空
                  changec2(x)//改变判定位的牌面
                  updateMyCard()//更新p1手牌牌面
                  updateOpCard()//更新p2手牌牌面
                  action(x)//自己行动
                }
托管部分()
                {
                 auto1()//改变1p托管状态
                 auto2()//改变2p托管状态
                 com()//判断p2是否可以打出手牌
                 robot2()//p1机器人
                 com2()//判断p1是否可以打出手牌
                 robot2()//p1机器人
                 checkRobot()//检查是否开启托管
                }
联机的数据通信()
                {
                 start()//初始化
                 myworker.onmessage=function(event)//接受worker数据
                 function game()//向服务器获取上部操作
                 self.onmessage=function(event)//worker初始化并开始监听
                }

  • 说明算法的关键与关键实现部分流程图

    • 算法的关键就是与服务器的通信,一边监听服务器,一边处理玩家的操作
  • 贴出你认为重要的/有价值的代码片段,并解释(2分)

    • 比较有价值的应该是监听服务器的部分,不断请求上部操作,根据返回信息判断游戏进度并更新页面
  • 性能分析与改进

    • 最需要改进的还是监听的部分,因为要不停发送和接受请求,其中有很多是重复的信息,浪费了资源
  • 描述你改进的思路(2分)

    • 改进思路是最好只在游戏状态有改变时才通信,但是时间不好确定,所以目前只能根据一个回合大概要多长时间来设定请求间隔,减少请求的次数。
  • 展示性能分析图和程序中消耗最大的函数








  • 展示出项目部分单元测试代码,并说明测试的函数,构造测试数据的思路 (2分)


[2.3.2]贴出Github的代码签入记录,合理记录commit信息。(1分)

[2.3.3]遇到的代码模块异常或结对困难及解决方法(4分)

困难描述

  • 因为是刚刚开始学习前端,对前端工作还不是很熟悉,所以产生了很多错误,比如调用图片找不到对象、洗牌卡死、卡牌越打越少、无法点击触发事件、监听时点击会页面卡死、得不到游戏结束反馈等等问题。

解决过程

  • 因为大部分问题其实都是我对知识不了解或者逻辑没有理清楚,所以遇到问题就是看教程、查资料,然后用chrome工具一步一步调试,看看哪里和我的预想不一样,上面的几个问题原因是将变量写进字符串里、没注意Math.random()是左闭右开、忘记修改牌堆数量变量的值、标准流按钮被定位的对象覆盖、单线程的js线程被同时触发两条程序、将游戏结束时的上次操作返回报文过滤掉了。
有何收获
  • 学习了很多新知识,虽然理解不是很深,但是也可以用HTML、css、JS等知识完成一些基本的前端工作了。

[2.3.4]评价你的队友。(2分)

  • 陈捷祥

    • 值得学习的地方
      学习很认真,敢于尝试自己从未接触过的设计领域,从头学习相关知识和工具使用,原型做得比较快,效率高。
    • 需要改进的地方
      作业前期比较拖,后面因为要负责团队作业又没什么时间,时间安排好,比较赶。
  • 杨开彬

    • 值得学习的地方
      学习能力很强,做事十分认真专一,在大家都是新手的情况下,队友很快就找到方向开始学习,并且进度效率各方面都十分迅速。边学边做的效率很高。
    • 需要改进的地方
      需要改进的地方:有时候提出的想法需要挺努力脑补才能跟得上吧

[2.3.5]提供此次结对作业的PSP和学习进度条(每周追加),示例如下(2分)

  • PSP:

PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟)
Planning 计划 40 45
· Estimate · 估计这个任务需要多少时间 20 10
Development 开发
· Analysis · 需求分析 (包括学习新技术) 7200 800
· Design Spec · 生成设计文档 60 80
· Design Review · 设计复审 10 5
· Coding Standard · 代码规范 (为目前的开发制定合适的规范)
· Design · 具体设计 300 300
· Coding · 具体编码 600 620
· Code Review · 代码复审 200 180
· Test · 测试(自我测试,修改代码,提交修改) 40 40
Reporting 报告
· Test Repor · 测试报告 120 90
· Size Measurement · 计算工作量 40 35
· Postmortem & Process Improvement Plan · 事后总结, 并提出过程改进计划 30 30
· 合计 2180 2295
  • 学习进度条:

第N周 新增代码(行) 累计代码(行) 本周学习耗时(小时) 累计学习耗时(小时) 重要成长
1 0 0 15 15 整理思路,讨论分工,对个人能力与学习期限做预计,学习前端设计工具,原型设计工具
2 300 300 20 35 基本熟悉VScode前端开发工具,能够开始用墨刀初步设计网页原型
3 800 1100 15 50 完成一定量的网页雏形,对核心游戏逻辑设计页面开发能够搭建好完整的框架,网页原型制作已经初步完成封装
4 500 1600 10 60 相关内容的加载、调试,登录接口、返回参数的调用,页面连接构建接近尾声,原型完成所有构架,产品做进一步评估规划

三、心得

  • 陈捷祥

    • 这次作业已经把后端做完了,只要做好前端,调用接口就好,客观上应该不会很困难,但是我毕竟从来没有前端学习和制作的基础,所以对我来说还是比较难的。
    • 作业感想的话,就是一开始低估这个作业了,前两周都是慢慢悠悠地看视频教程,国庆放假的时间也没有利用起来,到后面感觉来不及就一边学,一边写,最后一周基本上没课就在写Bug,然后改Bug,眼睛都看疼了。就最后的作业结果来说,虽然功能没达到预计效果、界面不太美观、代码函数没有整合简洁、没有对所有情况进行测试(逐渐没有底气),我还是比较满意的(?)。
    • 当然这次的作业也给我带来不少收获,新学到的知识技能,合理安排时间的重要性,对待任务的态度,在之后的学习中应该也会起到不少作用吧。
  • 杨开彬

    • 相比上一次个人编程作业而言,本次结对编程作业对于代码算法本身的要求基本上没有再提了,但是就我而言难度其实也基本上没变,没到那个水平,看什么都是难的吧,要求点在于软件前后端搭建,而且本次仅仅要求前端搭建。老实说,本次作业的完成度大部分跟我没有直接相关,跟队友两个人一开始都没有相关的概念,但是队友学习的能力和努力程度是远胜于我的,惭愧的一点就是仅仅做了点原型开发和收集素材吧,前端的东西也学了,想帮上队友的忙,但是总觉得跟不上队友进度,只能在旁边听人家给自己提问题,看看人家写的js代码啥的,问题懂了也没办法忙人家解决。只能说跟着人家进度走可以说被人家扛着走。结对作业整个过程下来学到的东西有很多,或者说明晰的概念和过程有很多吧,对个人的进步意义真的蛮大的,可以自学的方向一下子多了不少。另外,对队友真的表示由衷的感谢,真的是一个很负责的人,每时每刻都能见到队友在思考作业技术的问题,如果自己能学的再多一点,工程应该可以做得更让队友更满意。
posted on 2021-10-24 21:39  natsu。  阅读(22)  评论(0编辑  收藏  举报