2022软工K班结对编程任务

最新推荐文章于 2025-05-23 23:44:23 发布
最新推荐文章于 2025-05-23 23:44:23 发布
阅读量478 收藏 1
点赞数 1
文章标签： 结对编程 ui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Hypocrite_1003/article/details/127325798
版权
本博客记录了一次游戏开发项目，从结对编程、原型设计到编程实现的全过程。团队使用Mockitt设计原型，通过JavaScript实现了游戏逻辑，包括随机数生成、棋盘互动及得分计算。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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.1Personal Software Process Stages预估耗时(分钟）实际耗时（分钟）
Planning计划60120
· Estimate· 估计这个任务需要多少时间10001200
Development开发12001500
· Analysis· 需求分析 (包括学习新技术)600900
· Design Spec· 生成设计文档90120
· Design Review· 设计复审120120
· Coding Standard· 代码规范 (为目前的开发制定合适的规范)60120
· Design· 具体设计240180
· Coding· 具体编码12001440
· Code Review· 代码复审3060
· Test· 测试（自我测试，修改代码，提交修改）180120
Reporting· 计算工作量2040
·· Postmortem & Process Improvement Plan· 事后总结, 并提出过程改进计划3050
· 合计5930

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

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

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

  • （1）最初想象的产品是个小程序，有完备功能，和市面上小程序相似的那种感觉，页面动画完备
  • （2）原型设计的时候考虑了能实现的功能进行了设计，基本与开发结果相同，但是比最初想象的产品形态要简化很多
  • （3）开发结果基本做到了原型设计的效果，在功能上进行了更多的添加

​4.4 评价你的队友（2分）

王若婷： 雨轩温柔和蔼可亲，和她全称交流没障碍无矛盾。在做项目的过程中，我们一起解决了很多问题，修改了一些代码的bug。她负积极主动负责，还会问我是否有地方需要帮忙，这一点是我需要学习的地方。总之就是非常的戳我心巴，很不错！
杨雨轩： 若婷同学的行动力很强，对刚学会的工具和语言的运用很好，这是我觉得很应该学习的地方，有若婷同学在就会感觉踏实很多，很多地方很想帮她忙但没有帮上，感觉有点愧疚。
不足的地方：感觉没什么不足的地方

4.5 结对编程作业心得体会（3分）

王若婷： 对我来时，本次结对编程作业也依旧让我成就感与疲惫感并存。由于我负责的部分是前端UI设计，所以我需要去学习很多新的知识，html、css、JavaScript这三门语言都是我很少接触甚至没有学习过的。从一开始到处收集、绘制所需要的素材，到开始着手制作web界面，一点一滴都收获了很多东西。最痛苦的地方莫过于项目中有bug的地方不报错，你还不知道错在哪里（哭泣），但是最后还是尽全力做好了属于我们的游戏，幸福感满满!
杨雨轩：
1.刚听到选题的时候很迷茫，一直在想“认真的吗？真的能做吗？做完还能活着吗？”，当时真的有点崩溃。不知道能不能做完，能不能做好
2.然后我和若婷同学一起进行了关于这个项目的查找资料，讨论和学习，有了方向之后感觉可能没有想象的那么令人崩溃。
3.在开发过程中一步一步落实，解决出现的问题，有过怎么也想不出来无比崩溃的情况，然后冷静冷静去吃个饭回来感觉就有了思路，嘿嘿
4.最后的最后，从一开始的完全找不到方向到现在的成果，付出了很多的努力，最大的收获就是要去想，要去学。如果不是这次的学习，我可能想到做游戏就会觉得我不行，我做不到。但其实没什么做不到，只要去学都会有成果。要敢于尝试，敢于去痛苦，然后才能看见更高的山峰。

Hypocrite_1003
关注
程序人生里的结对编程：助力职业生涯学习成长
AI天才研究院
05-07 716
在软件开发领域，结对编程（Pair Programming）作为极限编程（XP）的核心实践之一，已从早期的敏捷开发方法论延伸为开发者职业成长的关键赋能工具。本文聚焦结对编程如何通过系统化的协作机制，帮助开发者突破技术瓶颈、优化知识结构、提升团队协作能力，最终实现职业生涯的螺旋式上升。内容覆盖结对编程的核心原理、实施框架、数学模型、实战案例及不同职业阶段的应用策略，适用于从初级开发者到技术管理者的全角色群体。本文采用从原理到实践的递进式结构：首先解析结对编程的核心概念与协作模型，通过数学模型量化其价值；
2022K班结对编程任务
slor_的博客
10-14 1033
软工结对作业
2022软工K班结对编程任务(wxy)
m0_51198184的博客
10-14 298
PSP2.1预估耗时（分钟）实际耗时（分钟）Planning计划3072· Estimate· 估计这个任务需要多少时间1010开发600700· Analysis· 需求分析 (包括学习新技术)12001200· 生成设计文档1055· 设计复审1055· 代码规范 (为目前的开发制定合适的规范)6055· Design· 具体设计60120· Coding· 具体编码300720· 代码复审5050· Test。
敏捷软工结对编程博客
BUAA_Wander的博客
04-05 477
敏捷软工结对编程博客 项目 内容 这个作业属于哪个课程 2022春季软件工程（罗杰 任健） 这个作业的要求在哪里 结对编程项目-最长英语单词链 我在这个课程的目标是 学习软工的项目合作管理知识，提升软件开发技术 这个作业在哪个具体方面帮助我实现目标 学习敏捷开发中的PSP与结对编程的思想并付诸实践 Part0 准备 1.必要信息 教学班级：周五班 项目地址：https://github.com/BUAADreamer/Longest-English-word-chain 2.
第一次和AI结对编程的感受
Dean Chen的专栏
03-12 261
和AI结对编程的方式探讨
如何在element ui中el-select的选择项目中添加自定义图标
u010782109的博客
05-21 178
该代码片段展示了一个使用Vue.js和Element UI库实现的下拉选择组件。通过<el-select>和<el-option>标签，用户可以从选项列表中选择一个值。每个选项前都有一个SVG图标，根据选项的值（1或2）显示不同的图标。第一个图标为绿色圆形加箭头，第二个图标为红色圆形加叉号。这些图标通过v-if指令动态显示，确保用户选择不同选项时，图标会相应变化。此外，选择框的前缀部分也根据当前选择的值显示相应的图标，增强了用户体验。
Kotlin协程优化Android ANR问题
wykyl的专栏
05-23 696
黄金法则：主线程只做UI更新和轻量操作调度器选择：UI更新、LiveData观察：文件、网络、数据库：复杂计算生命周期管理Activity/Fragment使用ViewModel使用异常处理：结合try-catch与CoroutineExceptionHandler性能监控：定期使用Profiler工具分析主线程负载通过合理应用协程，不仅能有效避免ANR，还能让异步代码保持简洁优雅。立即重构您的阻塞代码，为用户提供丝滑流畅的体验！
基于Browser Use + Playwright 实现AI Agent操作Web UI自动化
fantasy_4的博客
05-21 719
基于Browser Use + Playwright 实现AI Agent操作Web UI自动化
前端状态管理介绍（React状态管理）（通过管理状态来控制UI的呈现，确保数据的一致性和可维护性）（界面与数据分离、可预测性、组件化、响应式更新）
最新发布
Dontla的博客
05-23 523
在复杂应用中，可能会使用Redux、MobX等专门的状态管理库，但核心理念相同：通过管理状态来控制UI的呈现，确保数据的一致性和可维护性。状态管理是前端开发中的核心概念，尤其在React等现代框架中更为重要。示例代码展示了React中最基本的状态管理。
vue+springboot+element-ui实现table的树懒加载
路飞船长的博客
05-20 616
本文介绍了使用Vue2、Element-UI和Spring Boot实现表格树形懒加载的整体架构流程。前端使用Element-UI的<el-table>组件，通过lazy和tree-props属性实现树形数据的懒加载，并通过封装好的axios请求获取后端数据。后端使用Spring Boot框架，通过@RestController和@RequestMapping注解处理前端请求，查询数据库并返回树形结构数据。具体实现包括：前端通过递归处理树形数据并绑定到表格，后端通过递归和映射处理数据，最终返回过滤后的树形结
elementui初学1
jerry的博客
05-21 298
当然可以！下面是从零开始创建一个最简单的程序的完整流程，基于 Vue 2 + Element UI（如果你想用 Vue 3，请告诉我，我可以给你 Element Plus 的版本）。
兰亭妙微・UI/UX 设计・全链路开发
05-20 425
( 蓝蓝设计)一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计。兰亭妙微（蓝蓝设计），自 2008 年深耕 UI/UX 领域，以清华团队为核心，16 年专注软件与互联网产品的界面设计开发，为 300 + 客户打造 640 + 优质项目，用专业与匠心架起技术与体验的桥梁。🌟简约模块化风格：采用经典蓝色主色调，搭配精美图标与插图，既保证视觉统一，又强化功能区分。
DeerFlow安装配置及使用案例
何以问_的博客
05-19 821
DeerFlow旨在提供一个多智能体（Multi-Agent）系统框架，自动化处理复杂的研究任务。通过整合语言模型与网页搜索、爬虫、Python代码执行等多种专用工具，实现端到端自动化的信息采集、分析与报告生成。目标用户包括科研人员、开发者及学生，适合学术研究、市场分析和代码分析等多场景应用。项目力求减少人工干预，提高研究效率，支持动态规划和人机协作。
PyQt学习系列11-综合项目:多语言文件管理器
https://github.com/foxpup11?tab=repositories
05-23 668
本系列课程到此结束！通过本课程的学习，您将掌握如何构建一个完整的多语言桌面应用，并为后续开发复杂软件打下基础！（原课程规划中的第十五课，按用户要求调整为第十一课）打开Qt Designer，创建。保存UI文件后，使用。
掌握iOS UI测试：KataSuperHeroesIOS实战指南
- **kata**：Kata一词源自武术，代表一系列的编程练习，旨在通过重复练习特定的编程任务来提升技能。 - **dependency-injection**：理解并实践依赖注入，帮助开发者写出更加松耦合的代码。 - **marvel**：虽然本项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值