2021秋软工实践第二次结对编程作业

一、PSP表格

二、重点或难点功能、编程思考

两次结对项目的大致流程是：想法 -> 实现 -> 优化
1、重点：

• 摇骰子过程的复现

  • 对于此项问题我们没有通过算法实现，而是设计了一个图片交替出现的逻辑过程，实现了骰子的晃动。
  • 例如：wxml文件代码如下：

    <view wx:if="{{p==1}}">
              <view class='start' wx:if="{{statu==1}}">
                  <image class='p21' src="/image/p2.jpg">
                      <text class='p21text'>{{userName[0]}}</text>
                  </image>
                  <image class='p22' src="/image/p1.jpg">
                      <text class='p22text'>{{userName[1]}}</text>
                  </image>
                  <image class='bowl' src="/image/bowl.png"></image>
                  <button class='press' bindtap='click1'>请玩家{{userName[p-1]}}点击投掷</button>
              </view>
              <view class='shake' wx:if="{{statu==2}}">
                  <image class='bowl' src="/image/bowl.png"></image>
                  <image class='playDice' src="/image/playDice.gif"></image>
                  <button class='press' bindtap='click2'>点击停止投掷</button>
              </view>
              <view class='result' wx:if="{{statu==3}}">
                  <image class='bowl' src="/image/bowl.png"></image>
                  <image class='img1' src="{{dicelist[0]}}"></image>
                  <image class='img2' src="{{dicelist[1]}}"></image>
                  <image class='img3' src="{{dicelist[2]}}"></image>
                  <image class='img4' src="{{dicelist[3]}}"></image>
                  <image class='img5' src="{{dicelist[4]}}"></image>
                  <image class='img6' src="{{dicelist[5]}}"></image>
                  <view class='rank'>{{rank}}</view>
                  <button class='press' bindtap='next2'>点击轮到下一位</button>
              </view>
          </view>
    

  • js文件代码如下：

    click1(){
      console.log("点击投掷")
      this.setData({
        statu: 2,
        finallyRank:[]
      })
    },
    

    click2(){
    console.log("点击停止投掷")
    this.setData({
      statu: 3
    })
    this.result();
    },
    

• 实现结果自动判定

  • 参照博饼规则，我们设计了一系列的if-else通过统计相应骰子的点数实现了结果的判定。
  • 例如对堂结果的判定：

    if(one==1&&two==1&&three==1&&four==1&&five==1&&six==1){
        this.setData({
          rank:"对堂！",
          score:"+300"
        })
        flag=1
      }
    

• 单机或联机形式的多人参与博饼

  • 通过创建或加入房间的形式容纳多人参与博饼。但由于未能实现网络连接，此处的加入房间本质上是随机创建。

  • 创建房间的wxml如下：

    <view class="container" wx:if="{{statu==0}}">
    <image class="bgImg"
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F05%2F64%2F56%2F795b6712ffa1723.jpg%21r650%2Ffw%2F800&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635861213&t=9dfe2acfda3e8057196d2585a0452471">
    </image>
    <other-widget class="other-widget">
      <view class='input_ID'>
          <input class="input" name="roomID" placeholder-style="font-size:15px" placeholder="请输入房间名称"
              bindinput="bindKeyInput" />
      </view>
      <button class='in' bindtap="click">确定</button>
      <view class='tishi'>{{infoMess}}</view>
    
      <view class='top'>
          <view class='top-selected' bindtap='bindShowMsg'>
              <text>{{num}}</text>
    
          </view>
          <!-- 下拉需要显示的列表 -->
          <view class="select_box" wx:if="{{select}}">
              <view wx:for="{{nums}}" wx:key="unique">
                  <view class="select_one" bindtap="mySelect" data-name="{{item}}">{{item}}</view>
              </view>
          </view>
      </view>
    </other-widget> <!-- other widget希望是放在背景图片之上的 -->
    </view>
    

2、难点：

• 想法在第一次结对编程时已经设计完成，这次任务的难点在于对想法的实现；
• 对博饼小程序功能的创新；
• 实现小程序进阶功能：支持网络连接，能够在线多人参与博饼。

三、在编码、争论、复审等活动中花费时间较长，给你较大收获的事件

• 着手准备的过程：第一次接触到微信小程序的开发工作，一切都要从头学起，包括js,css,json等前端知识。
• 讨论页面设计的过程：由于不知道好的页面和构思应该是什么模样，只是通过感官判断觉得好看，参考主流小程序界面设计并意见达成一致。
• 追寻代码优化的过程：复审中认为小程序并没有创新点，讨论后决定将博饼结果改变为积分制。

四、结对编程体验

• 我觉得编程就是在不断否定自己的过程中获得成长的，代码需要一遍又一遍的审视。结对编程就更加需要审视的这个过程，一方面需要借助同伴的观点来帮助自己提升对代码结构上的认知，一方面也需要敦促自己不断优化细节，达到更好的合作效果；
• 借助工具进行团队合作，会让工作更有效率，比如使用Github ，通过 git 协作方式完成编码；
• 本次编程重新审视了有关「结对」的概念，双方都参与到了开发的各个过程，受益匪浅。

五、学习进度条

大致任务流程如下：

附：commit记录

结对照片