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分)
2.4 原型界面图片展示(6分)
(尽可能图文并茂地在此处介绍你们队伍设计的各功能模块,创新点也在此处展示说明)
-
欢迎界面 (Welcome)
-
登录界面 (Login)
- 游戏界面 (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分)
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.6 单元测试(2分)
以下为随机的一局游戏:
对方的棋盘矩阵:( score
= 36 )
[
4
0
4
5
0
5
0
0
0
]
\begin{bmatrix} 4 & 0 & 4\\ 5 & 0 & 5\\ 0 & 0 & 0 \end{bmatrix}
⎣
⎡450000450⎦
⎤
我方的棋盘矩阵:( score
= 11 )
[
0
0
0
3
0
6
0
2
0
]
\begin{bmatrix} 0 & 0 & 0\\ 3 & 0 & 6\\ 0 & 2 & 0 \end{bmatrix}
⎣
⎡030002060⎦
⎤
现在我方得到 figure
= 3. 我方的思路:
现在对方有两个相同的 5
在一行,而我方在对应行还未满格, 且当前摇骰子获得的 figure
并非恰好是对方满格的元素(即得到的是 3
,不是 5
),那么可以考虑先将此次摇到的 figure
放在其他的未满的行中, 在后续的摇骰子的过程中,等待是否能摇到和对方满格相同的元素。
如果成功的话,这样的操作可以使得对方的分数下降比较多,进而提高己方的获胜概率。
即我方的下一步矩阵应该是:( score
= 14 )
[
3
0
0
3
0
6
0
2
0
]
\begin{bmatrix} 3 & 0 & 0\\ 3 & 0 & 6\\ 0 & 2 & 0 \end{bmatrix}
⎣
⎡330002060⎦
⎤
对方的矩阵则相应的变化为:( score
= 16 )
[
4
0
4
0
0
0
0
0
0
]
\begin{bmatrix} 4 & 0 & 4\\ 0 & 0 & 0\\ 0 & 0 & 0 \end{bmatrix}
⎣
⎡400000400⎦
⎤
我方返回的 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的部分更加有挑战性,但没有什么创造,短期内没有带来成就感,没有持之以恒的动力学下去。😪😪😪
兴趣或许是最好的老师,而成就感可能是带来不断前进的动力的源泉吧。