结对编程作业

https://github.com/oldmoney-lana/031902441

队员	博客链接	分工
许茹婷	https://www.cnblogs.com/xxxrt/p/15452196.html	游戏逻辑以及代码编写
夏明旻	https://www.cnblogs.com/oldmoney-lana/p/15451956.html	原型设计以及前端界面

一、原型设计

https://modao.cc/app/3a2a5d7b120af0b7394fc8cd8832b63c601f688b

1. 说明你所采用的原型开发工具

墨刀
以前没有接触过原型设计，于是问了舍友用的是什么原型开发工具，她向我推荐了墨刀。但是我一开始看作业要求中列出的一些工具，于是我下了一个Axure RP 9，由于操作不熟练，我第一次做出来的界面不是很能看，而且全英文的界面看得我非常晕，所以转用墨刀。

2. 原型图

• 开始界面
  

• 游戏帮助界面
  

• 游戏模式选择界面
  

• 对战界面
  

• 游戏结束界面
  

3. 遇到的困难及解决方法

• 困难描述
  第一次原型设计，操作并不是很熟练，各个部件功能不清楚，没有实现想要的设计。
• 解决过程
  网上搜索墨刀教程。
• 有何收获
  对使用墨刀完成原型设计有初步了解，希望可以做出更美观、逻辑更清晰的原型设计。

二、原型设计实现

1. 代码实现思路

(1) 说明算法的关键与关键实现部分流程图

• 算法关键
  利用Math.random()函数生成随机数并相应显示出相应图片；用将随机数整除得到的结果区分不同卡牌的花色，以此判断上下卡牌花色是否一致。
• 流程图
  

(2) 贴出你认为重要的/有价值的代码片段，并解释
以下代码为玩家放牌后判断玩家的牌与最上面卡牌的花色是否一致，判断语句均写在玩家点击卡牌处发牌按钮的函数中

handleTap(){
    this.setData({
      sum:this.data.sum-1,
      fangzhiquFlag: true,
      order:this.data.order+1,//轮到A玩家时order值为偶数，轮到B玩家时order值为奇数
      flag:false, 
      // 生成随机数
      random: Math.floor(Math.random()*52),
      ['random_array['+ this.data.number + ']']:this.data.random,
    })
    if((this.data.colour==Math.floor(this.data.random/13))&&this.data.number!=0)//若翻开的花色与上一张牌相同
    {
      if(this.data.order%2==0){//如果此时轮到A
        this.setData({
          flag:true,
          colour:Math.floor(this.data.random/13),
          flag_a:true,
          flag_a2:true,
          count_a:this.data.number+this.data.count_a+1,
          fangzhiquFlag: false,
          number:0})
      }//A玩家收走放置区所有牌
      else {//如果此时轮到B
        this.setData({
          flag:true,
          colour:Math.floor(this.data.random/13),
          flag_b:true,
          flag_b2:true,
          count_b:this.data.number+this.data.count_b+1,
          fangzhiquFlag: false,
          number:0})
      }
    }
    else {this.setData({//若翻开的花色与上一张牌不相同
      colour:Math.floor(this.data.random/13),number:this.data.number+1,})}
  },

(3) 性能分析与改进

由于水平有限，我们只实现到了人人对战，该小程序还有很多改进空间，比如ai的实现还有不同设备的联机对战。

(4) 描述你改进的思路

可以试着用普通的判断语句实现简单的ai

2. 贴出Github的代码签入记录，合理记录commit信息。

3. 遇到的代码模块异常或结对困难及解决方法。

困难描述：

• 由于没有考虑到不同编译软件的不同，横屏函数错误导致小程序编译无结果

• 在用this.data.random/13判断卡牌花色时，由于对JavaScript语言的不够熟悉，由于random是整数，自动带入了别的语言的语法，认为this.data.random/13也是整数，导致判断上下花色是否相同函数一致不能正确实现；

• 用数组储存收入A、B玩家手中的卡牌时失败；

解决方法：

• 正确使用横屏函数 "pageOrientation": "landscape"后程序可以正常运行

• 在this.data.random/13外加了math.floor（）函数使其取整

• 用['random_array['+ this.data.number + ']']：这样的形式就可以顺利将数组储存了

有何收获：

• 更加地了解了JavaScript与其他语言的差别。

4. 评价你的队友

• 许茹婷

• 值得学习的地方：学习能力强，执行力强，而且内心非常强大，非常豁达，十分有责任心，乐于助人，耐心解答队友的每一个问题。

• 需要改进的地方：应该早点开始任务，不到ddl不动（和我一样）。

• 夏明旻

• 值得学习的地方：具有规划能力，愿意学习，对于界面的布局和审美很好。

• 需要改进的地方：遇到困难时心态容易爆炸。

5. 提供此次结对作业的PSP和学习进度条（每周追加）

PSP

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

学习进度条

第N周	新增代码（行）	累计代码（行）	本周学习耗时(小时)	累计学习耗时（小时）	重要成长
1	500	500	10	10	前端简单实现
2	700	1200	15	25	后端实现

三、心得

许茹婷：由于之前没有类似的作业经历，所以刚拿到作业时拖延症患者的惯性和畏难情绪让我们并没有早点开始思考本次作业该如何实现，刚开始我考虑用unity写程序，下载了相关软件后向同学请教，同学建议我使用微信开发者工具这个软件来编写小程序对新手比较友好，这是我们作业能有切入点的重要转折，在此感谢大佬们的帮助和解答。在微信小程序代码的编写中我学习了wxml，wxss，JavaScript语言，在边做作业边学习的过程中对做游戏和小程序有了更清晰的概念，虽然前期作业的开始让我数次崩溃，但是找到合理的学习方法后这次作业完成下来让我着实收获颇丰。

夏明旻：首先看到这次作业我是崩溃的，特别是看到实现方法里有apk、小程序等等这样软件化的要求，我就头大，因为我大一大二的学习无非就是老师给出题目，学生编写代码，通过控制台输入输出问题答案，于是我把这次作业设想得很难很难，整个心态就很自暴自弃。但这次是结对作业，是和同学一起完成任务，我总不能拖累队友吧，于是“很难”和“拖累”的想法占据了我整个大脑，心态也逐渐崩溃，特别是到了ddl，之前看了一点的前端教程也全部忘光光，整个人陷入一种死机状态。不过还好组长心理比较强大，及时的沟通让我的状态稍微恢复了一些，真的非常感谢组长（dbq一直都在写感性的东西但是本人就是非常感性）。组长的话也让我明白勇敢牛牛不怕困难，希望前端可以运用得再熟练一些！