2022软工K班结对编程任务

github
哔哩哔哩视频

一、结对探索

• 1.1 队伍基本信息（1分）
  结对编号：29；
  队伍名称：相依为命队；

学号	姓名	作业博客链接	具体分工
102001101	王若婷	作业博客链接	前端UI设计，人机交互算法设计、博客撰写、美工
102001102	杨雨轩	作业博客链接	原型设计，分数结算，人机交互等规则的算法设计、博客撰写

• 1.2 描述结对的过程 （1分）
  我们两个是同一个学校过来交流访学的学生，又住在一个宿舍，所以就自然而然的进行了组队，彼此都比较熟悉会更容易交流，加之和课程其他同学都不是很了解，所以就这样组成了相依为命队。

• 1.3 非摆拍的两人在讨论设计或结对编程过程的照片（2分）
  

二、原型设计

（本游戏中所用到的素材部分来源于网络，仅作为交流使用，侵权即删）

• 2.1 原型工具的选择（2分）
  在本次作业中选择了Mockitt原型设计工具，选择这一款原型软件是因为经过各种资料查找之后觉得可能比较适合初学者去应用。

• 2.2 遇到的困难与解决办法（3分）

• 困难和解决方法：最开始做的时候有点不知道该做什么，背景摆放，元素的获取摆放都有点懵，交换页面多了之后交互的路径总是容易乱掉，这个没连，那个连错了，这些就需要多做几次然后多演示几次后才能慢慢熟练，慢慢改正。有一点没有事先考察好的是这款软件的收费规则，没有想到只能免费设计20页，所有没办法做的很饱满，有点遗憾。

• 收获：第一次接触原型设计，从完全不知道这是个什么东西，要怎么设计，在什么软件实现到设计出了本次作业的原型设计感觉获得了很大的满足感，人生中的第一个原型设计，每当这么想就觉得很开心，很满足。

• 2.3 原型作品链接（5分）
  https://modao.cc/app/VeOL6XSrjkxdqWFCGQmWB

• 2.4原型界面图片展示（6分）

游戏开始首页的界面，点击start开始游戏
进入到选择页面，可以选择双人对战和人机对战。因为软件页数原因只做了双人对战的原型设计。
点击双人对战后产生2个棋盘格，每个棋盘格下有两个小骰子，点击小骰子后会出现一个大骰子显示点数并把分数计入棋盘格。
大骰子是动态翻转最后停在点数上的，左边玩家先开始投掷，投掷后右边玩家点击棋盘格下小黑骰子进行投掷。
按照这样的方式左右边轮流投掷，以此类推。
最后左边玩家填满棋盘格，游戏结束。
左边玩家获得胜利界面。

三、编程实现

• 3.1 网络接口的使用（2分）
  由于时间以及自身能力的原因，我们只做了本地部分，没有涉及到网络接口。
• 3.2 代码组织与内部实现设计（类图）（2分）
• 3.3 说明算法的关键与关键实现部分流程图（2分）
  机器的算法我们用到的是遍历，流程图如下
  
• 3.4 贴出重要的/有价值的代码片段并解释（2分）
  (1)点击骰子，生成随机数，这是游戏的关键部分。
  我分别设置了四个函数，来进行骰子位置放置、骰子消除、判断棋盘格是否放满、计算分数的功能，可见代码注释，流程可参考3.2

        dicebtn.onclick = function () {
            document.getElementById("dicemusic").play();
            //随机生成一个数
            var num = Math.ceil(Math.random() * 6);
            dicebtn.style.backgroundImage = "url(../resource/img/" + num + ".gif"; //按照生成的数显示对应的骰子数
            gamestar_robot(play1, play2, num);
            //消除对方相同的骰子数
            remove_score2(play1,play2);
            //检索行列是否有相等的值以及是否满格
            var full = get_full();
            //计算分数
            get_score(full);
            //交换玩家
            play1 = change(play1);
            play2 = change(play2);

        }

(2)机器的算法部分，详细可见代码注释，流程可参考3.3

 //设置一个循环，如过生成的位置上已经有了点数，则重新生成随机位置，用break跳出循环
            x = Math.floor(Math.random() * 3);
            y = Math.floor(Math.random() * 3);while (okplay1) {
            //检索对方是否有相同的点数
            for(var i=0;i<=2;i++){
                for (var j=0;j<=2;j++){
                    for (var k=0;k<=2;k++){
                        if ((player2[i][j]==num) && (player1[i][k]==0)){
                            var play_grid = document.querySelector("#grid1-" + i + "-" + k);
                            play_grid.style.backgroundImage = "url(../resource/img/" + num + ".png";
                            player1[i][k] = num;
                            return ;
                        }
                    }
                }
            }
            //检索我是否有相同的点数
            for(var i=0;i<=2;i++){
                for (var j=0;j<=2;j++){
                    for (var k=0;k<=2;k++){
                        if ((player1[i][j]==num) && (player1[i][k]==0)){
                            var play_grid = document.querySelector("#grid1-" + i + "-" + k);
                            play_grid.style.backgroundImage = "url(../resource/img/" + num + ".png";
                            player1[i][k] = num;
                            return ;
                        }
                    }
                }
            }
            //以上两种情况都没有，则进行随机位置的选择与摆放
            if (player1[x][y]==0) {
                var play_grid = document.querySelector("#grid1-" + x + "-" + y);
                play_grid.style.backgroundImage = "url(../resource/img/" + num + ".png";
                player1[x][y] = num;
                break;
            }
            else {
                x = Math.floor(Math.random() * 3);
                y = Math.floor(Math.random() * 3);
            }
        }

(3)结算分数的算法部分，也是用遍历来进行计算分数，双方玩家的分数结算规则都相同，在这里就只展示玩家2的部分啦

function get_score(full) {
    var i1, j1, i2, j2;
    var sum1 = 0;
    var sum2 = 0;
    var num1 = 0, num2 = 0;
    var score1 = 0, score2 = 0;
    for (i1 = 0; i1 < 3; i1++) {
        //结算玩家2的分数
        if (player2[i1][0] == player2[i1][1] && player2[i1][0] != player2[i1][2])
            score1 = score1 + (player2[i1][0] * 4) + player2[i1][2];
        if (player2[i1][0] == player2[i1][2] && player2[i1][0] != player2[i1][1])
            score1 = score1 + (player2[i1][0] * 4) + player2[i1][1];
        if (player2[i1][0] == player2[i1][2] && player2[i1][0] == player2[i1][1])
            score1 = score1 + (player2[i1][0] * 9);
        if (player2[i1][2] == player2[i1][1] && player2[i1][2] != player2[i1][0])
            score1 = score1 + (player2[i1][2] * 4) + player2[i1][0];
        if (player2[i1][0] != player2[i1][1] && player2[i1][0] != player2[i1][2] && player2[i1][1] != player2[i1][2])
            score1 = score1 + player2[i1][0] + player2[i1][1] + player2[i1][2];
    }
   .......
 }

• 3.5 性能分析与改进（2分）（描述你改进的思路，展示性能分析图和程序中消耗最大的函数）
  
• 3.6 单元测试（2分）（展示出项目部分单元测试代码，并说明测试的函数，构造测试数据的思路）
  测试的函数为计分规则的算法。在测试中，分成四种情况，使用两个数组，对每个数组进行赋值，检测结算结果是否正确。
  测试结果如下图
  
• 3.7 贴出GitHub的代码签入记录，合理记录commit信息（2分）
  

四、反思总结

• 4.1 本次任务的PSP表格 （2分）

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

• 4.2 学习进度条（每周追加）（2分）

第N周	新增代码（行）	累计代码（行）	本周学习耗时(小时)	累计学习耗时（小时）	重要成长
1	109	109	15	15	沟通交流后确定了选题，进行了相关学习和初步尝试
2	532	641	20	35	完成了前端UI设计，但还有一些小问题仍需要改进
3	368	1009	25	60	完成了算法与游戏的融合，增加了一些小功能，修改了发现的bug

• 4.3 最初想象中的产品形态、原型设计作品、软件开发成果三者的差距如何？ （2分）
  1.最初想象的产品是个小程序，有完备功能，和市面上小程序相似的那种感觉，页面动画完备
  2.原型设计的时候考虑了能实现的功能进行了设计，基本与开发结果相同，但是比最初想象的产品形态要简化很多
  3.开发结果基本做到了原型设计的效果，在功能上进行了更多的添加
• ​ 4.4 评价你的队友（2分）
  王若婷：
  雨轩温柔和蔼可亲，和她全程交流没障碍无矛盾。在做项目的过程中，我们一起解决了很多问题，修改了一些代码的bug。她积极主动负责，还会问我是否有地方需要帮忙，这一点是我需要学习的地方。总之就是非常的戳我心巴，很不错！
  杨雨轩：
  若婷同学的行动力很强，对刚学会的工具和语言的运用很好，这是我觉得很应该学习的地方，有若婷同学在就会感觉踏实很多，很多地方很想帮她忙但没有帮上，感觉有点愧疚。
  不足的地方：感觉没什么不足的地方
• 4.5 结对编程作业心得体会（3分） ​
  王若婷：
  对我来时，本次结对编程作业也依旧让我成就感与疲惫感并存。由于我负责的部分是前端UI设计，所以我需要去学习很多新的知识，html、css、JavaScript这三门语言都是我很少接触甚至没有学习过的。从一开始到处收集、绘制所需要的素材，到开始着手制作web界面，一点一滴都收获了很多东西。最痛苦的地方莫过于项目中有bug的地方不报错，你还不知道错在哪里（哭泣），但是最后还是尽全力做好了属于我们的游戏，幸福感满满!
  杨雨轩：
  1.刚听到选题的时候很迷茫，一直在想“认真的吗？真的能做吗？做完还能活着吗？”，当时真的有点崩溃。不知道能不能做完，能不能做好
  2.然后我和若婷同学一起进行了关于这个项目的查找资料，讨论和学习，有了方向之后感觉可能没有想象的那么令人崩溃。
  3.在开发过程中一步一步落实，解决出现的问题，有过怎么也想不出来无比崩溃的情况，然后冷静冷静去吃个饭回来感觉就有了思路，嘿嘿
  4.最后的最后，从一开始的完全找不到方向到现在的成果，付出了很多的努力，最大的收获就是要去想，要去学。如果不是这次的学习，我可能想到做游戏就会觉得我不行，我做不到。但其实没什么做不到，只要去学都会有成果。要敢于尝试，敢于去痛苦，然后才能看见更高的山峰。