2022软工K班结对编程作业

逍遥骰GitHub链接
哔哩哔哩功能展示

学号姓名作业博客链接具体分工
032002621林灿彬待填写JavaScript编程、AI设计
032002623林达锴待填写原型制作、html页面

一、结对探索

1.1 队伍基本信息

结对编号:3   队伍名称:现在是幻想时间

1.2 描述结对的过程

  • 达:彬组队吗?
  • 彬:好!

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

在这里插入图片描述

二、原型设计

2.1 原型工具的选择

     本次使用的原型设计工具是“墨刀”。
     原因是这款原型设计软件功能比较强大(能模拟PC端网页、手机、iPad等设备的实机预览界面),生态配套也和国内的开发环境更接近。
 自带一些经典的素材库,很方便就可以模拟出微信小程序的样式。
     更重要的是墨刀的入门门槛更低,原生中文的环境使它更容易理解,而且可以在网页端直接操作,不需要下载程序。作为开发软件,它
 足够“轻量”。同时也具有相对完善的基本功能,可以在确保原型质量的同时,给后续的开发腾出足够的时间。相较于Axure等经典原型开发工
 具,墨刀对于更适合作为入门软件。
     但如果后续还需要做更大项目的原型设计的话,Axure可能是更好的选择,墨刀的共享开发功能需要付费,同时也不支持将原型保存到本
 地。对于小项目的开发游刃有余;但面对较大项目时,墨刀这种轻量的原型设计软件就比较捉襟见肘了。

2.2 遇到的困难与解决办法

  • 困难描述:在原型设计软件中比较难以模拟游戏内的互动效果,游戏逻辑可能难以在原型界面中直接反馈;
  • 解决过程:参考了历届学长学姐的优秀原型设计,发现他们的交互性原型都是仅展示固定的操作,在原型这一步体现游戏的反馈效果即可,各种游戏逻辑是后续开发环节考虑的内容;
  • 有何收获:对原型设计有了较为准确的认识。学会了较为合理地规划开发的各个环节——需求分析、原型设计、构建初步模型、模型迭代、完成产品。学会了运用原型设计大概模拟产品的功能,确定基本的美工设计基调。

2.3 原型作品链接

逍遥骰-原型

2.4 原型界面图片展示

游戏的新手引导界面,老玩家可以选择跳过教程
在这里插入图片描述
新手教程的大致内容,采取图片搭配简练文本的方式,教程结束时通过按钮跳转到模式选择界面
在这里插入图片描述

游戏的模式选择界面,选择一种进入游戏
在这里插入图片描述
游戏对局界面,上方的比分条可以实时直观地显示双方的比分,
左下角是规则引导栏,右下角是回合提示栏
在这里插入图片描述
在这里插入图片描述
游戏结束时的弹窗提示,会显示出胜利玩家,可以在弹窗中选择再来一局或回到主菜单
在这里插入图片描述

三、编程实现

3.1 网络接口的使用

null

3.2 代码组织与内部实现设计(类图)

function randomNum():用来产生随机数并限制玩家在自己的回合多次摇骰子
function setNum(x,y,z):已经在下文说明
function attack(x,z):用于消除敌方棋盘同行同点数的数字
function get_id(x,y,z):该函数利用(x,y,z)生成对应的button id
function update_score():计分模块,在每次放置之后进行双方分数的更新,同时通过分数版展示
function game_over():判断游戏是否结束
玩家A点击play按钮,触发 randomNum()函数,产生随机数,选择棋盘位置后点击触发setNum函数,在setNum()函数中嵌套了剩余的其他函数,完成消除,计分,切换回合等功能,这样就完成了一个回合,接着再从玩家B开始,直到游戏结束。

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

在这里插入图片描述

3.4 贴出重要的/有价值的代码片段并解释

setNum()函数,是本次作业的核心函数,考虑了填充数字和掷骰子的多种情况,对玩家可能的误操作做了逻辑上的保护,同时能通过页面的提示框引导玩家进行符合游戏规则的操作,增加玩家的游戏体验。详情请看代码和注释

/* 函数中调用的全局变量说明:
rNum用于储存骰子的数字
round用于切换玩家回合。0代表A的回合,1代表B的回合(A先手),2代表游戏结束
rDone用于限制骰子的投掷,1代表可以投掷骰子,0代表骰子已投掷,防止投掷骰子的函数在同一回合被重复调用
*/
function setNum(x,y,z){
    var Tid;
    if(rNum==0){
        document.getElementById("window").innerHTML = '请先投掷骰子';
        return
    }
    if(z!=round&&round!=2){
        // 下错棋盘
        if(round==0){
            document.getElementById("window").innerHTML = '现在是玩家A的回合,请在A的位置放置';
        }else if(round==1){
            document.getElementById("window").innerHTML = '现在是玩家B的回合,请在B的位置放置';
        }else{
            document.getElementById("window").innerHTML = '游戏结束';
        }
    }else{
        // 棋盘正确,接下来考虑是否可下
        if(round==0){
            // A的回合
            if(A[x][y]==0){
                Tid = get_id(x,y,z)
                document.getElementById(Tid).innerHTML = rNum;
                A[x][y] = rNum;
                round = 1;
                attack(x,z);
                rDone = 1; //确保放置成功后,再解锁对骰子的限制
                rNum = 0; //在放置成功后,将rNum重置为0,此时在调用setNum会触发未投掷的保护机制
                document.getElementById("window").innerHTML = '现在是玩家B的回合';


                computer(A,B);//AI放在setnum()的A的回合里面
                round=0;
            }else{
                document.getElementById("window").innerHTML = '该位置已有骰子';
            }
        }else{
            if(B[x][y]==0){
                //computer(A,B);
                Tid = get_id(x,y,z)
                document.getElementById(Tid).innerHTML = rNum;
                B[x][y] = rNum;
                round = 0;
                attack(x,z);
                rDone = 1; //确保放置成功后,再解锁对骰子的限制
                rNum = 0; //在放置成功后,将rNum重置为0,此时在调用setNum会触发未投掷的保护机制
                document.getElementById("window").innerHTML = '现在是玩家A的回合';
            }else{
                document.getElementById("window").innerHTML = '该位置已有骰子';
            }
        }
        //完成骰子放置之后更新回合数(根据全局变量round)
        if(round==0){
            document.getElementById("playerName").innerHTML = 'A';
        }else if(round==1){
            document.getElementById("playerName").innerHTML = 'B';
        }else{
            document.getElementById("playerName").innerHTML = '';
        }

        // 已完成骰子放置,重新解锁投掷骰子(重新解锁环节可能存在问题,需要确保已放置之后再解锁)
        // todo:rDone的重置需要在放置完成后再进行
        // rDone = 1;
    }

3.5 性能分析与改进

3.6 单元测试

3.7 贴出GitHub的代码签入记录,合理记录commit信息

在这里插入图片描述

四、总结反思

4.1 本次任务的PSP表格

PSP2.1PSPS预估耗时/min实际耗时/min
Planning计划6080
Estimate估计这个任务需要多少时间4050
Development开发9601050
Analysis需求分析 (包括学习新技术)600360
Design Spec生成设计文档12040
Design Review设计复审6030
Coding Standard代码规范 (为目前的开发制定合适的规范)6020
Design具体设计120120
Coding具体编码780420
Code Review代码复审6060
Test测试(自我测试,修改代码,提交修改)360240
Reporting报告180240
Test Report测试报告120200
Size Measurement计算工作量4030
Postmortem & ProcessImprovement Plan事后总结, 并提出过程改进计划12060
total合计36803000

4.2 学习进度条(每周追加)

林灿彬:

第N周新增代码(行)累计代码(行)本周学习耗时(小时)重要成长
1505010了解前端三件套,设计伪函数和主要框架
2100+100+14前端三件套入门,边写边学,着手于主框架的实现和页面设计
3200+300+14基本完成主框架的实现和页面设计

林达锴:

第N周新增代码(行)累计代码(行)本周学习耗时(小时)重要成长
1505010初步掌握墨刀,实现了原型设计
2100+100+14学习了html和CSS,选择了grid布局方式进一步学习,用gird完成了页面主要元素的定位
3200+300+14在CSS-Inspiration等前端素材网站上学习了更丰富的美化和展示特效,对网页进行了美化

4.3 最初想象中的产品形态、原型设计作品、软件开发成果三者的差距如何?

基本能够实现预期的效果,有些缺憾是界面还没能优化得更美观一点,比如设想中直接将摇得的骰子填入棋盘,或者在消除对手骰子的时候加入一些动效,体验感会更好一点,联机对战的功能还尚未实现。但在做的过程中也有比较有亮点的一些特点,比如加入了血条机制。理想很丰满和现实比较匀称,相对还是比较满意的。
因素:技术力和时间的双重限制,归根结底还是太菜了和缺乏经验。

4.4 评价你的队友

林灿彬:我的队友兢兢业业,创造力和想象力十分丰富,我提出构思,他能够想方设法去实现,本次项目的主要逻辑框架是由他一个个代码敲出来的,表示respect,他对新技术的热情和完美主义的追求令我自愧不如。

林达锴:队友的攻坚速度和开发效率强而有力(๑•̀ㅂ•́)و✧。他在开发时的节奏很稳,总是会先确保实现基础的功能,然后在此基础上魔改迭代。他开发的对战AI让舍友们印象深刻,从刚开始的只能进行基本的随机落子完成对局,一直进化到能随着比赛实况变换策略,和宿舍的同学对战得有来有回,在半天内就完成了青春版AI到完全体AI的迭代开发。他用前端三件套让网页里出现可以互动的立体骰子时,我大受震撼。队友总能做出令人眼前一亮的技术突破,他的学习能力和创造力令人惊喜。

4.5 结对编程作业心得体会

林灿彬:
相比于个人编程的枯燥和毫无头绪,结对编程就显得有趣了很多,一方面是本次作业是做小游戏,一方面是做网页的时候修改代码的效果立竿见影,更重要的是在本次作业中我真正体会到合作共赢的重要性,有些bug我修了半天也找不出错误,有些bug队友修半天也找不出错误,而此时如果求助一下对方,问题居然能奇迹般迎刃而解。自己一个人的想法比较具有局限性,两个人的思维火花碰撞后往往能产生意想不到的结果。

林达锴:
结对编程是崭新的体验,在开发过程中和队友的沟通是很重要的一个环节,每次沟通之后都能找到新的突破口,确定下一个目标。在结对编程中也养成了写备注的好习惯,在和队友对接代码时流畅了不少。开发时的分工极大提高了效率,和队友的交流也让开发的思路清晰了不少。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值