一、结对探索
1.1 队伍基本信息
结对编号： 36
队伍名称： 博智
| 学号 | 姓名 | 作业博客链接 | 具体分工 |
|---|---|---|---|
| 102002102 | 高浩楠 | https://blog.csdn.net/m0_64750119/article/details/127323105 | 原型设计、前端页面设计、博客 |
| 102002103 | 饶杰 | https://blog.csdn.net/qq_57268251/article/details/127317811 | 前端页面设计、后端算法实现、视频制作 |
1.2. 描述结对的过程
就近原则，同专业同学，相对了解，课下时间相似，方便讨论。
1.3 非摆拍的两人在讨论设计或结对编程过程的照片
二、原型设计
2.1 原型工具的选择
原型工具：
- 墨刀 —— 相对简单，容易上手，节约时间；有免费使用时间，减少成本。
- PS —— 处理图片，调整相关图片大小、像素、清晰度。
2.2 遇到的困难与解决办法
| 困难描述 | 原型工具的选择、费用问题 |
|---|---|
| 解决尝试 | 多了解相关原型工具，比较其使用难度、学习时间、设计效果等因素，选择难度较低易上手的墨刀，在免费时间内利用墨刀功能实现原型界面设计。 |
| 是否解决 | 成功克服 |
| 有何收获 | 了解了原型设计的相关工具，学习了墨刀的使用方法，利用墨刀功能实现了逍遥骰基本页面的设计，达到了自已的预期目标。 |
2.3 原型作品链接
墨刀原型界面链接： 墨刀
2.4 原型界面图片展示
1）游戏规则
此游戏主要有四大规则，初始化骰子盘面、玩家轮流投掷骰子、同一线内消除相同骰子、计算玩家某线得分以及总得分。一开始简单将游戏规则的图片放入页面，添加背景，效果如下：
了解完墨刀工具，决定将四张规则图片以轮播图形式自动播放，在轮播图下方加入数字序列图标，装饰页面。截图如下，具体效果见墨刀原型设计链接。
2) 游戏模式
设置逍遥骰有人机对战模式、双人对战两个模式。
3) 游戏界面
设置游戏界面有玩家A、玩家B/电脑两个九宫格、骰子一个，供玩家投掷使用。
4) 人机对战界面
玩家与电脑进行对战，双方一边一次进行投掷，投完骰子后，将投掷后的点数放入自己的三线内，实现消除对方相同点数骰子，自己得分、对方失分的功能。效果如下：
游戏结束后，可选择再玩一局、双人对战、退出游戏等选项。
5）双人对战
玩家A与玩家B进行对战，双方一边一次进行投掷，投完骰子后，将投掷后的点数放入自己的三线内，实现消除对方相同点数骰子，自己得分、对方失分的功能。效果如下：
游戏结束，可选择再玩一局、人机对战、退出游戏等选项。
6）链接跳转
在人机对战页面下方的双人对战按钮设置超链接，链接到双人对战页面，实现页面跳转。
在双人对战页面下方的人机对战按钮设置超链接，链接到人机对战页面，实现页面跳转。
动态实现原型设计，是一个小创新点，效果如下：
原型设计
7）视频演示
插入游戏演示视频，观看游戏功能，截图如下，具体见墨刀原型设计链接：
三、编程实现
3.1 网络接口的使用
利用前端页面实现逍遥骰游戏相关功能，未进行网络接口。
3.2 代码组织与内部实现设计（类图 ）
3.3 说明算法的关键与关键实现部分流程图
流程图：
关键：
玩家B获得该点数，判断该点数有没有必要删除玩家A的分数，如果A的某线有>=2的该点数，就把该点放入B去对应A区的该线上，否则就把该点放到与该点数相同点数最多的线上（没有就是从最下面开始往上放）。
3.4 贴出重要的/有价值的代码片段并解释
遍历A的每条线，且每条线相同的点数>=2,判断B该线是否有空，条件满足，投掷此线，消除A线与该点相同的骰子；第二个if,判断B某线是否存在该点数的骰子，条件满足，投掷此线，消除A线与该点相同的骰子；如果该点数与上面两种情况不符，随机掷。
for (var i = 0; i < 3; i++) {
if(l_All[i].indexOf(index) !=-1 && r_All[i].indexOf(0) != -1 && index >= 3){
document.getElementById("r" + (i+1) + "." + (r_All[i].indexOf(0) + 1)).src = rightArrays[index]
remove("r" + (i+1) + "." + (r_All[i].indexOf(0) + 1))
return
}else if (r_All[i].indexOf(index) != -1 && r_All[i].indexOf(0) != -1 ) {
document.getElementById("r" + (i+1) + "." + (r_All[i].indexOf(0) + 1)).src = rightArrays[index]
remove("r" + (i+1) + "." + (r_All[i].indexOf(0) + 1))
return
}else{
//如果该点数与上面两种情况不符，随机掷
for (var i = 2; i >= 0; i--){
if(r_All[i].indexOf(0) != -1){
document.getElementById("r" + (i+1) + "." + (r_All[i].indexOf(0) + 1)).src = rightArrays[index]
remove("r" + (i+1) + "." + (r_All[i].indexOf(0) + 1))
return
}
}
}
}
3.5 性能分析与改进
人机对战：
好友对战：
3.6 单元测试
//判断游戏是否结束
function end(site){
// 若各自骰子为0，退出函数
for(var x = 1; x < 4; x++){
for(var y = 1; y < 4; y++){
if(((document.getElementById(site + x + "." + y).src).match (/images\/.?([0-6])\.png/i)[1]) == "0") {
return
}
}
}
// 若骰子不为0，触发弹窗结束游戏
leftState = 1
centreState = 1
rightState = 1
var result
if(leftScore > rightScore) {
result = "玩家胜"
}else if(leftScore < rightScore) {
result = "电脑胜"
}else{
result = "平局"
}
contentString = leftScore + ":" + rightScore
const obj = {
titile: 'GameOver',
content: contentString,
res: result,
showConfirmBtn: true,
showCancelBtn: true,
}
var modal = document.getElementById('myModal'); // 获取弹窗
modal.style.display = "block";
function init() {
const b = [];
for (const key in obj) {
b.push(obj[key]);
}
function shijian(){
document.querySelector(".modal-header").innerHTML = `<h1>${b[0]}</h1>`;
document.querySelector(".modal-body").innerHTML = `<p>${b[1]}</p>`;
document.querySelector(".modal-result").innerHTML = `<p>${b[2]}</p>`;
b[2] === true ?"":firm.style.display = "none";
b[3] === true ?"":cel.style.display = "none";
}
setTimeout(shijian,1000);
}
init();
}
3.7 贴出GitHub的代码签入记录，合理记录commit信息
四、总结反思
4.1 本次任务的PSP表格
PSP2.1
| Personal Software | Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | 15 | 30 |
| · Estimate | 估计这个任务需要多少时间 | 15 | 20 |
| Development | 开发 | 2400 | 3600 |
| · Analysis | 需求分析 (包括学习新技术) | 2400 | 3400 |
| · Design Spec | 生成设计文档 | 20 | 40 |
| · Design Review | 设计复审 | 20 | 30 |
| · Coding Standard | 代码规范 (为目前的开发制定合适的规范) | 120 | 180 |
| · Design | 具体设计 | 2000 | 3500 |
| ·Coding | 具体编码 | 3000 | 4300 |
| · Code Review | 代码复审 | 180 | 260 |
| · Test | 测试（自我测试，修改代码，提交修改） | 100 | 190 |
| Reporting | 报告 | 100 | 240 |
| · Test Report | 测试报告 | 30 | 60 |
| · Size Measurement | 计算工作量 | 30 | 45 |
| · Postmortem & Process Improvement Plan | 事后总结, 并提出过程改进计划 | 30 | 50 |
| 合计 | 10640 | 15585 |
4.2学习进度条
高浩楠
| 第N周 | 新增代码（行） | 累计代码（行） | 本周学习耗时(小时) | 累计学习耗时（小时） | 重要成长 |
|---|---|---|---|---|---|
| 1 | 500 | 500 | 10 | 10 | 了解墨刀使用方法 使用墨刀进行原型设计 |
| 2 | 1500 | 2000 | 20 | 30 | 熟悉Web知识，复习CSS、HTML、JS使用方法，学习新知识，通过前端设计游戏界面。 |
| 3 | 2600 | 4600 | 25 | 55 | 设计相关界面，辅助后端开发，测试游戏，完善功能。 |
饶杰
| 第N周 | 新增代码（行） | 累计代码（行） | 本周学习耗时(小时) | 累计学习耗时（小时） | 重要成长 |
|---|---|---|---|---|---|
| 1 | 800 | 800 | 12 | 12 | 熟悉前端语言，设计相关界面。 |
| 2 | 1600 | 2400 | 25 | 37 | 学习后端语言，掌握相关函数用法，编写具体代码。 |
| 3 | 4000 | 6400 | 28 | 65 | 反复编写具体代码，改正Bug,完善功能。 |
4.3 最初想象中的产品形态、原型设计作品、软件开发成果三者的差距如何？
最初想象中的产品形态：
- 了解完结对编程的任务，我们最初想象的产品形态是小程序。本想通过前端、后端知识在微信小程序中设计逍遥骰，实现游戏功能。原型设计之初，我们按照小程序的形式设计了相关界面。后因对小程序了解知识过少，需要学习的知识较多，技术较难，考虑到时间问题，我们放弃了最初的小程序，改用Web网页形式。
原型设计作品:
- 更改完产品形态，我们重新对界面进行了原型设计。利用墨刀工具功能，基本实现了游戏相关界面的设计。软件开发的过程很难很漫长，对我们的自身算法、技术带来了考验，一边学习一边编写代码，只为实现游戏功能。
软件开发成果:
- 从开始的小程序到最后的Web,从一筹莫展到最后的完善功能，我们的身心都受到了挑战，最大的影响因素还是自身技术水平，编程能力真的很重要。
4.4 评价你的队友
| 评价\姓名 | 高浩楠 | 饶杰 |
|---|---|---|
| 值得 | 做事认真负责 主动查阅资料 | 学习能力强 有一定的编程能力 |
| 学习 | 时间观念强 任务规划较好 | 认真学习相关技术 有毅力 |
| 主动沟通任务进度 效率高 | 积极沟通任务进度 合作很愉快 | |
| 需要 | 测试出现Bug时容易着急 | 提前规划任务目标 安排任务进度 |
| 改进 | 心态易受影响 | 合理规划任务时间 |
4.5 结对编程作业心得体会
高浩楠：
- 刚开始看到项目的介绍和要求时，我处于很懵的状态，既害怕不能完成项目，又担忧自己能力不足，感觉项目难度很大。
- 和队友一起讨论项目后，我对逍遥骰的游戏有所了解，让我对游戏功能、游戏界面、游戏模式有了初步定义。多次讨论之后，我们确定了基本功能，并根据自己所擅长的技能进行了初步分工。我对界面进行原型设计、前端界面设计，队友进行算法设计、后端设计。
- 在遇到代码模块异常时，我现在已经不记得我们一起查阅了多少资料、学习了多少新知识、尝试了多少方法，只为解决一个又一个的问题。看着功能一点一点的实现，我们都很欣慰，渐渐也没有了对作业的恐惧感。
- 一次一次的测试功能，一次一次寻找Bug,一次一次寻找解决方法，一次一次尝试新方法，一次一次更新，一次一次完善，我很庆幸我们没有放弃。看着我们一点一点的成果，我们也很有成就感。
- 开发一个游戏不容易，实现一个功能不容易，这次的实践对我的身心都有很大挑战。第一次接触开发，锻炼了我的毅力，也让我感受到了团队合作的效率。我相信有了这次实践体验，以后的开发类实践我会收获更多。
饶杰：
- 本次结对编程我感觉说难不难，说简单也不简单。最开始负责人讲游戏规则时，没感觉这游戏的亮点在哪。
- 后来集体发力骰子，我与队友试玩一下，感觉还是挺有意思的。后期队友的原型设计，直接把我深深的吸引了，果然只有实践才是真理，才会明白内在关系。
- 我们前期准备用小程序开发，需要一门新的语言开发，对于我们的能力、技术要求还是挺高的。在队友的劝说下，我们改为前端设计开发。
- 在这期间我也学习了一些小程序知识，我相信会给后期团队编程出点微薄之力。
- 虽然前期学过web,但在真正实践时候，我们还是遇到很多问题，我已经数不清两个人在教室一起讨论了多久，一起在电脑前趴了多久。讨论过程中，我们也有过小摩擦，但看到我们的程序跑起来的时候，我们也就都没什么了
- 从每天改Bug到看到它实现一个一个功能再到我们完善页面完善功能，我觉得这是一件不错的事情。- 我也很开心能够有一个一起并肩奋斗的队友，不禁让我想到战狼中的一句话：狼，是群体动物。一头狼，打不过一头狮子或一头老虎，可是一群狼，可以天下无敌！团队合作，我们就需要齐心协力，共同奋进！
189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
