一、结对探索
1.1 队伍基本信息
结对编号: 36 队伍名称: 博智
学号 | 姓名 | 作业博客链接 | 具体分工 |
---|---|---|---|
102002102 | 高浩楠 | 博客链接 | 原型设计、前端页面设计、博客 |
102002103 | 饶杰 | 博客链接 | 前端页面设计、后端算法实现、视频制作 |
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 评价你的队友
评价\姓名 | 高浩楠 | 饶杰 |
---|---|---|
值得 学习 | 做事认真负责 主动查阅资料 | 学习能力强 有一定的编程能力 |
时间观念强 任务规划较好 | 认真学习相关技术 有毅力 | |
主动沟通任务进度 效率高 | 积极沟通任务进度 合作很愉快 | |
需要 改进 | 别太优秀 | 提前规划任务目标 安排任务进度 |
别太卷哈 | 合理规划任务时间 |
4.5 结对编程作业心得体会
高浩楠:
- 刚开始看到项目的介绍和要求时,我处于很懵的状态,既害怕不能完成项目,又担忧自己能力不足,感觉项目难度很大。
- 和队友一起讨论项目后,我对逍遥骰的游戏有所了解,让我对游戏功能、游戏界面、游戏模式有了初步定义。多次讨论之后,我们确定了基本功能,并根据自己所擅长的技能进行了初步分工。我对界面进行原型设计、前端界面设计,队友进行算法设计、后端设计。
- 在遇到代码模块异常时,我现在已经不记得我们一起查阅了多少资料、学习了多少新知识、尝试了多少方法,只为解决一个又一个的问题。看着功能一点一点的实现,我们都很欣慰,渐渐也没有了对作业的恐惧感。
- 一次一次的测试功能,一次一次寻找Bug,一次一次寻找解决方法,一次一次尝试新方法,一次一次更新,一次一次完善,我很庆幸我们没有放弃。看着我们一点一点的成果,我们也很有成就感。
- 开发一个游戏不容易,实现一个功能不容易,这次的实践对我的身心都有很大挑战。第一次接触开发,锻炼了我的毅力,也让我感受到了团队合作的效率。我相信有了这次实践体验,以后的开发类实践我会收获更多。
饶杰:
- 本次结对编程我感觉说难不难,说简单也不简单。最开始负责人讲游戏规则时,没感觉这游戏的亮点在哪。
- 后来集体发力骰子,我与队友试玩一下,感觉还是挺有意思的。后期队友的原型设计,直接把我深深的吸引了,果然只有实践才是真理,才会明白内在关系。
- 我们前期准备用小程序开发,需要一门新的语言开发,对于我们的能力、技术要求还是挺高的。在队友的劝说下,我们改为前端设计开发。
- 在这期间我也学习了一些小程序知识,我相信会给后期团队编程出点微薄之力。
- 虽然前期学过web,但在真正实践时候,我们还是遇到很多问题,我已经数不清两个人在教室一起讨论了多久,一起在电脑前趴了多久。讨论过程中,我们也有过小摩擦,但看到我们的程序跑起来的时候,我们也就都没什么了
- 从每天改Bug到看到它实现一个一个功能再到我们完善页面完善功能,我觉得这是一件不错的事情。- 我也很开心能够有一个一起并肩奋斗的队友,不仅让我想到战狼中的一句话:狼,是群体动物。一头狼,打不过一头狮子或一头老虎,可是一群狼,可以天下无敌!团队合作,我们就需要齐心协力,共同奋进!