2022软工K班结对编程作业

reader 可靠阅历~忌*懈怠

已于 2022-10-14 21:24:50 修改

阅读量848

点赞数

分类专栏：软件工程文章标签：结对编程 ui 前端

于 2022-10-14 19:29:34 首次发布

本文链接：https://blog.csdn.net/qq_53766624/article/details/127326170

版权

软件工程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

GitHub
Bilibili
我们小组的微信小程序已经成功发布，微信搜索：潇洒骰

一、结对探索（4分）

1.1 队伍基本信息（1分）

结对编号：42；队伍名称：组名待定；

学号	姓名	作业博客链接	具体分工
032002317	李超洋	2022软工K班结对编程任务_奋斗变强的博客	原型UI的实现
032002321	林英杰	2022软工K班结对编程作业_reader 可靠阅历~忌*懈怠的博客	小程序的实现

1.2 描述结对的过程（1分）

当时我坐在英杰旁边，就直接询问了英杰有没有意向，然后就顺理成章地组队了。

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

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

二、原型设计（16分）

2.1 原型工具的选择（2分）

（在此处说明选择了什么原型设计工具？为什么选择这一款原型软件？）

Pixso.

Pixso，是由国内专注创意软件研发的万兴科技孵化的新一代设计协作工具，被誉为中国版的 Figma，功能方面目前已和 Figma 基本对齐，且提供了诸多本土化的特色功能，包含全中文界面、内置免费可商用字体、团队字体库、素材插件、拥有海量模板的资源社区等，个人用户完全免费，小团队使用也合适，无需支付任何费用~

最重要的一点，Pixso 对新手相当友好！！！

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

（原型设计过程中的困难描述、解决尝试、是否解决、有何收获）

虽然这款原型设计工具比较容易上手，但是刚开始的时候还是一头雾水：图层、组合、自动布局、高斯模糊、icon、径向渐变，等等，一系列以前基本没有听过的新的专业术语，真的让人头大。

但是，好在 Pixso 有比较简洁的官方教程，还有非常强大的社区资源，让我们能直接从现有的资源模板开始学习，这大大减轻了我初学时的焦虑和紧张。

通过自己的不断摸索，以及社区资源的强大帮助，我渐渐了解了 Pixso 所提供的各项工具应该怎么使用，应该怎样实现自己希望实现的效果。

2.3 原型作品链接（5分）

（静态原型作品得2分，交互性强的原型作品得5分）

第一次结对编程原型设计-Pixso

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

（尽可能图文并茂地在此处介绍你们队伍设计的各功能模块，创新点也在此处展示说明）

欢迎界面 (Welcome)
登录界面 (Login)

游戏界面 (Game)

Game

设置界面 ( 设置 )

三、编程实现（14分）

3.1 网络接口的使用（2分）

游戏更多地是在前端实现，以 JS交互 为主。

网络接口指的网络设备的各种接口，我们现今正在使用的网络接口都为以太网接口。

常见的以太网接口类型有RJ-45接口，RJ-11接口，SC光纤接口，FDDI接口，AUI接口，BNC接口，Console接口。

使用了 RJ-45 接口…

3.2 代码组织与内部实现设计（类图）（2分）

通过 HBuilderX 使用了各种 .json 配置文件, 主页 home 中的 home.vue , 分包 subpkg 中的分页面人机界面，多人（双人）游戏，规则介绍完成游戏总体结构。

以分页面多人游戏为例，首先是界面布局部分，大体上分为上中下部分。 top 、 bottom 分别是相应玩家所点击的骰子。 middle 部分包含了左右两个计分板，中间的双重可触发点击事件的九宫格棋盘。结合 style 中的 “scss” 进行页面修饰，通过 script 中的 data 传输动态数据， method 方法定义触发的事件。结构框图如图所示，

其中method方法中定义了各类方法。

//产生随机数
rand(min,max)
// 点击骰子
diceClick(i) 
// 点击棋盘
getDice(index,i)  // 摇过骰子切未选择位置才能点击选择位置
// 消除规则
eliminate(index,i) // js除出来是浮点数,需用 parseInt取整数
// 分数结算
getScore(arr) 
// 胜负判断
winer(arr)
// 重置棋盘
reset()
// 选择先手
julioCruz()

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

next Step()函数

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

首先是代码布局总体的组件框架:

<template>
	<view class="singlePlayer">
		<!-- 我方的骰子 -->
		<view class="top">
			<view class="dice" @click="diceClick(1)">
				<image class="dice-img" :src="mySrc"></image>
			</view>
			<view class="my">甲方</view>
		</view>
		<!-- 棋盘 -->
		<view class="middle">
			<view class="score score-left">{{ myScore }}</view>
			<view class="score score-right">{{ yourScore }}</view>
			<view class="game-body">
				<view class="dice-item" v-for="(item,index) in myDice" :key="index" @click="getDice(index,1)">
					<!-- <image class="dice-item-img" src="../../static/img/dice_static_2.png"></image> -->
					<!-- 数据格式为 __ob__: Observer 
						 原因:异步问题,数据未加载完成就进行渲染
						 解决方法: 1.获取数据的时候用promise.then解构
							      2.用JSON.parse(JSON.stringify())进行转码并重新解码可以使用数据 -->
					{{ JSON.parse(JSON.stringify(myDice))[index] }}
				</view>
			</view>
			<view class="game-body">
				<view class="dice-item" v-for="(item,index) in yourDice" :key="index" @click="getDice(index,2)">
					{{ JSON.parse(JSON.stringify(yourDice))[index] }}
				</view>
			</view>
		</view>
		<!-- 对方的骰子 -->
		<view class="bottom">
			<view class="dice" @click="diceClick(2)">
				<image class="dice-img" :src="yourSrc"></image>
			</view>
			<view class="your">乙方</view>
		</view>
		<!-- 选择先手弹出层 -->
		<uni-popup ref="popup" :mask-click="false" type="center">
			<view class="choose-item">
				<button @click="julioCruz(1)">
					<image class="choose-img" src="/static/img/jia-bout.png"></image>
				</button>
				<button @click="julioCruz(2)">
					<image class="choose-img" src="/static/img/yi-bout.png"></image>
				</button>
			</view>
		</uni-popup>
	</view>
</template>

相应 SCSS 布局略.页面效果如图所示:

首页:

首页图片

其次是游戏界面:

双人对战

胜利结算界面

3.5 性能分析与改进（2分）

（描述你改进的思路，展示性能分析图和程序中消耗最大的函数）

小程序：主要是减少程序包的体积，以便上传。

AI接口函数：即 nextStep() 函数，我们小组实现该函数较为简洁，可优化的部分相当少。（result. png）

Fri Oct 14 19:49:06 2022    result.out

         804 function calls in 0.001 seconds

   Ordered by: cumulative time, function name

   ncalls  tottime  percall  cumtime  percall filename:lineno(function)
        1    0.000    0.000    0.001    0.001 {built-in method builtins.exec}
        1    0.000    0.000    0.001    0.001 <string>:1(<module>)
        1    0.000    0.000    0.001    0.001 v2.py:217(main)
      100    0.000    0.000    0.001    0.000 v2.py:13(nextStep)
      200    0.000    0.000    0.000    0.000 v2.py:159(count_kex)
      100    0.000    0.000    0.000    0.000 v2.py:175(second_max)
      300    0.000    0.000    0.000    0.000 {built-in method builtins.max}
      100    0.000    0.000    0.000    0.000 {built-in method builtins.min}
        1    0.000    0.000    0.000    0.000 {method 'disable' of '_lsprof.Profiler' objects}

3-5性能分析result

3.6 单元测试（2分）

以下为随机的一局游戏：

对方的棋盘矩阵：（ score = 36 ）
$\begin{bmatrix} 4 & 0 & 4\\ 5 & 0 & 5\\ 0 & 0 & 0 \end{bmatrix}$
我方的棋盘矩阵：（ score = 11 ）
$\begin{bmatrix} 0 & 0 & 0\\ 3 & 0 & 6\\ 0 & 2 & 0 \end{bmatrix}$
现在我方得到 figure = 3. 我方的思路：

现在对方有两个相同的 5 在一行，而我方在对应行还未满格，且当前摇骰子获得的 figure 并非恰好是对方满格的元素（即得到的是 3，不是 5），那么可以考虑先将此次摇到的 figure 放在其他的未满的行中，在后续的摇骰子的过程中，等待是否能摇到和对方满格相同的元素。

如果成功的话，这样的操作可以使得对方的分数下降比较多，进而提高己方的获胜概率。

即我方的下一步矩阵应该是：（ score = 14 ）

$\begin{bmatrix} 3 & 0 & 0\\ 3 & 0 & 6\\ 0 & 2 & 0 \end{bmatrix}$
对方的矩阵则相应的变化为：（ score = 16 ）
$\begin{bmatrix} 4 & 0 & 4\\ 0 & 0 & 0\\ 0 & 0 & 0 \end{bmatrix}$

我方返回的 nextStep = 0 ( 1 或 2 也是可以的 ) 。

3.7 贴出GitHub的代码签入记录，合理记录commit信息（2分）

英杰的 git commit :

请添加图片描述

超洋的 git commit :

请添加图片描述

四、总结反思（11分）

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

PSP 2.1	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	10	20
Estimate	估计这个任务需要多少时间	10	20
Development	开发	24*60	54*60
Analysis	1. 需求分析(包括学习新技术)	7*60	24*60
Design Spec	2. 生成设计文档	1*60	2*60
Design Review	3. 设计复审	1*60	1*60
Coding Standard	4. 代码规范(为目前的开发指定合适的规范)	2*60	2*60
Design	5. 具体设计	1*60	2*60
Coding	6. 具体编码	6*60	14*60
Code Review	7. 代码复审	2*60	3*60
Test	8. 测试（自我测试，修改代码，提交修改）	4*60	6*60
Reporting	报告	5*60	9*60
Test Report	1. 测试报告	2*60	4*60
Size Measurement	2. 计算工作量	1*60	1*60
Postmortem & Process Improvement Plan	3. 事后总结, 并提出过程改进计划	2*60	4*60
	合计	1750	3800

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

第N周	新增代码（行）	累计代码	本周学习耗时(小时)	累计学习耗时（小时）	重要成长
1	200	200	5	5	熟悉微信小程序的基本框架
2	200	400	12	17	通过在线练习，熟悉微信小游戏的基本框架；设计原型UI
3	200	600	10	27	完善原型UI，设计 `nextStep` 函数

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

（也就是谈一谈本次任务中“理想与现实的差距”，是哪些因素造成了这些差距？）

最初想象中的产品形态（参考一些比较成熟的网络游戏）
- 画风要精美或者有独特的风格，要有人物可以选择（有立绘之类）
- 玩法要多样，并且要有趣
- 应该有社交系统（增加玩家黏性）
原型设计作品（参考一些模板）
- 欢迎界面要有
- 登录界面要有
- 游戏界面应该要大力制作一番
- 有个性化的自定义设置
软件开发成果
- 终于做出来了，真不容易
三者的差距
- 最主要的原因是我们平常接触到的都是一些相对比较成熟的小游戏，或者 APP ，而当自己去尝试实现的时候，就会发现里面的细节的东西非常多：页面、登录、联网、打包，等等。
- 需要有一定的经验和技术，也需要有良师益友为我们指点迷津。

4.4 评价你的队友（2分）

（分别评价队友值得学习的地方和需要改进的地方）
（本部分需要包含队伍内所有成员的心得体会，若缺少一人，则队伍总分减少2分，减满4分为
止）

林英杰：超洋同学非常认真，细心，虽然刚开始我们没有即时沟通，但到了最后关头，还是同舟共济，勇往直前。

李超洋：英杰非常好沟通，而且编程能力比较强大，乐于助人；在完成了自己的编写任务后，还有时间帮我修改一下原型设计；是一位非常不错的队友。

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

（可包含但不限于评价作业难度、完成后的感受、遇到的代码模块异常或结对困难及解决方法、对
之后学习或软件开发的启发）
（本部分需要包含队伍内所有成员的心得体会，若缺少一人，则队伍总分减少3分，减满6分为
止）

首先，在前期一定要好好沟通一番，确定一下最终期望实现的效果，双方都应该对自己应该学习的知识有一个大致的把握；

其次，在实现过程中，也要定期地沟通，交换进度，互相督促；

最后，一定一定要保持学习的热情，这非常重要！！！

林英杰：

人生到处何所似，恰似飞鸿踏雪泥。这段大学生活，大三生活中短暂却又看长路漫漫的三周，通过本次结对编程作业，我又一次从懵懂无知~~（一脸懵逼~~）开始逐步接触到了前端工程师，生活中的，真实的人们，在真实世界里，真实的程序猿可能的一种工作。做人不易，个体力量、精力、自制力终究还是有极限，总会碰到一些自己暂时无法解决的事，量力而为。当然，就像老板不会看你工作了多久，只会看你最后的结果如何，能不能给他带来收益创造价值一样，咱暂且不论这个过程多么艰辛困苦，多么令人抓狂，多么令人寝食难安，让人在打球、放松娱乐的时候总感觉有重重压在肩上的铅球，让人放不开手脚，得要有成果展现出来，对得起一段时间以来的努力，对得起搭档的信任。因此，我还找了中学的玩伴帮忙完善一些功能，尽量有较为良好的体验。在此特意感谢老伙计Mr. Yang。😁

至于技术层面，揠苗助长式地学了许多方面的知识，诸如前端三件套简易地入门，使用微信开发工具，使用组件，使用Uniapp中的部分框架，但学的不深，估计没有再接触的话，一段时间就会忘光光了。可惜的是最开始几天看的机器学习入门，连门槛都没有跨过就，不了了之了。感觉这训练游戏AI的部分更加有挑战性，但没有什么创造，短期内没有带来成就感，没有持之以恒的动力学下去。😪😪😪

兴趣或许是最好的老师，而成就感可能是带来不断前进的动力的源泉吧。