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

最新推荐文章于 2024-10-05 16:57:58 发布

biabiubong

最新推荐文章于 2024-10-05 16:57:58 发布

阅读量455

点赞数

文章标签：微信 javascript

本文链接：https://blog.csdn.net/qq_45702055/article/details/120663118

版权

这个作业属于哪个课程	构建之法-2021秋-福州大学软件工程
这个作业要求在哪里	2021秋软工实践第二次结对编程作业
学号	031902134
结对小伙伴学号	031902138
结对小伙伴博客地址	031902138的博客地址
GitHub 仓库地址	博饼小程序仓库地址
视频演示链接	视频链接（提取码：7jia）

一、PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	60
· Estimate	· 估计这个任务需要多少时间	2060	2610
Development	开发	2060	2610
· Analysis	· 需求分析 (包括学习新技术)	200	300
· Design Spec	· 生成设计文档	30	30
· Design Review	· 设计复审 (和同事审核设计文档)	30	30
· Coding Standard	· 代码规范 (为目前的开发制定合适的规范)	60	70
· Design	· 具体设计	60	100
· Coding	· 具体编码	1200	1520
· Code Review	· 代码复审	180	200
· Test	· 测试（自我测试，修改代码，提交修改）	300	360
Reporting	报告	310	360
· Test Report	· 测试报告	100	130
· Size Measurement	· 计算工作量	30	30
· Postmortem & Process Improvement Plan	· 事后总结, 并提出过程改进计划	180	200
合计		2400	3030

二、学习进度条

第N周	新增代码（行）	累计代码（行）	本周学习耗时（小时）	重要成长
3	216	216	50	巩固了c/c++语言，学习了GitHub、VS等的使用
4	0	216	31	结对初体验、初步了解原型设计、学习摹客的使用
5	2387	2630	45	学习微信开发者工具等的使用，完成小程序页面设计代码

三、代码重难点

本次作业以小程序的形式展示游戏，采用的制作工具为微信开发者工具，采用的代码是JavaScript。

1.六个骰子随机产生数字

由于是新手，直接使用JS原创摇骰子的代码难度确实比较大，所以我们查阅了资料，最终代码参考：微信小程序开发一个简单的摇骰子游戏，经过修改之后，呈现的六个骰子的代码如下：

data: {
//开始游戏前的静态界面
      txt:'快开始吧~~',
      one_img:'https://img-blog.csdnimg.cn/20181116192114783.png',
      two_img: 'https://img-blog.csdnimg.cn/20181116192223207.png',
      three_img: 'https://img-blog.csdnimg.cn/20181116192249314.png',
      four_img: 'https://img-blog.csdnimg.cn/20181116192305231.png',
      five_img: 'https://img-blog.csdnimg.cn/20181116192320187.png',
      six_img: 'https://img-blog.csdnimg.cn/20181116192332897.png',
      flag:true,
      timer:null,
      msg:'摇一摇',
      total:0,
      arr:[
        'https://img-blog.csdnimg.cn/20181116192114783.png',
        'https://img-blog.csdnimg.cn/20181116192223207.png',
        'https://img-blog.csdnimg.cn/20181116192249314.png',
        'https://img-blog.csdnimg.cn/20181116192305231.png',
        'https://img-blog.csdnimg.cn/20181116192320187.png',
        'https://img-blog.csdnimg.cn/20181116192332897.png',
      ]
    },
 //用户点击摇骰子之后，生成随机数
    enter:function(event){
      let obj = this;
    var idx=0;
    var that=this;    
     if(obj.data.flag==true){
         obj.data.timer = setInterval(function () {     
          var one = that.randomNum(1, 6);
          var two = that.randomNum(1, 6);
          var three = that.randomNum(1, 6);
          var four = that.randomNum(1, 6);
          var five =that.randomNum(1, 6);
          var six = that.randomNum(1, 6);
  idx++;
  var tmp1=one;var tmp2=two;var tmp3=three; var tmp4=four ;var tmp5=five; var tmp6=six;           
  obj.setData({
            one_img:  one + ".png",
            two_img: two + ".png",
            three_img: three + ".png",
            four_img: four+ ".png",
            five_img:five+".png",
            six_img:six+".png",
            flag:false,
            msg:'等待中...',
  
           // total:18,
          })

参考的文章中实现的是3个骰子的随机摇动，修改后实现了题目要求的6个。在开发者工具的startgame文件夹中，分别了存放了点数为1-6共六张骰子的图片，代码中的“.png”是对该图片的引用。

2.判断摇骰子的结果

这一块代码的实现请教了好心的同学（//(^v)\\）简单的思路是：摇骰子时先用一个数组把每个骰子最上面的点数存储起来，在switch(isfour)结构中进行判断，分类的依据为数组中骰子点数为4的个数，接着在当前分类下用if-elseif-else语句列举当前4的个数可能出现的所有博饼结果。比较列举选项时，设置了一个ContrastArr数组，存放相同点数的骰子，通过数组长度length得知本组骰子中相同点数的骰子数，从而进行本组数据level的判断，后续根据ContrastArr中存放的点数来判断具体输出结果。

var NumberArr = [];
    NumberArr.push(tmp1,tmp2,tmp3,tmp4,tmp5,tmp6);//设置一个等级方便后续输出判断结果
    var level = {
      one: '状元插金花',
      two: '满堂红', // 六子
      two1: '遍地锦',
      two2: '六勃黑',
      three: '五王', // 五
      three1:'五子',
      four: '状元',
      five: '对堂',
      six: '三红',
      seven: '四进',
      eight: '二举',
      nine: '一秀',
      ten: '太遗憾啦'
   },
   this_level; 
      NumberArr.sort();
    var isfour = 0;
    for (var i = 0; i < NumberArr.length; i++) {
      if (NumberArr[i] == 4) {
          isfour = isfour + 1;
      }
  } 
  switch (isfour) {
    case 1:
        for (var i = 0; i < NumberArr.length; i++) {
            //存储当前相同的数量，判断是否为四进
            var ContrastArr = [];
            for (var j = 0; j < NumberArr.length; j++) {
                if (NumberArr[i] == NumberArr[j]) {
                    ContrastArr.push(NumberArr[j]);
                }
            }
        }
        // 等到上面遍历执行完再进行判断属于哪个级别
        if (ContrastArr.length === 4 && ContrastArr[0] == 2) {
            this_level = level.seven; //四进
            break;
        } else if (ContrastArr.length === 5 && ContrastArr[0] == 2) {
            this_level = level.three1; //五王       
            break;
        } 
        else {
            // 判断一下，是 "对堂"" or ”一秀“，对堂就是顺子，123456，一秀就是一个只有4；
            var isContinuityArray = false;
            var array = NumberArr;
            var arrayCount = array.length;
            for (var i = 0; i < arrayCount; i++) {
                var currentArr = Number(array[i]) + 1;
                var nestArr = Number(array[i + 1]);
                if (i + 1 == arrayCount) {
                    currentArr = Number(array[i]);
                    nestArr = Number(array[i]);
                }
                if (currentArr != nestArr) {
                    isContinuityArray = false;
                    break;
                } else {
                    isContinuityArray = true;
                }
            }
            if (isContinuityArray) {
                this_level = level.five;                
                break;
            } else {
                this_level = level.nine;              
                 break;
            }
        };
        break;
    case 2:
        for (var i = 0; i < NumberArr.length; i++) {
            var ContrastArr = [];
            for (var j = 0; j < NumberArr.length; j++) {
                if (NumberArr[i] == NumberArr[j]) {
                    ContrastArr.push(NumberArr[j]);
                }
            }
            // 判断是 4进 or 二举
            if (ContrastArr.length === 4 && ContrastArr[0] == 2) {
                this_level = level.seven;              
                break;
            } else {
                this_level = level.eight;                
            }
        };
        break;
    case 3:
        this_level = level.six;   
        break;
    case 4:
        // 判断是 "普通状元" or "状元插金花"，普通就是4个四，插金花就是  4个四 + 2个1 ；
        var one = 0;
        for (var i = 0; i < NumberArr.length; i++) {
            if (NumberArr[i] === 1) {
                one = one + 1;
            }
        }
        if (one == 2) {
            this_level = level.one; // 插金花            
        } else {
            this_level = level.four; //状元           
        }
        break;
    case 5:
        this_level = level.three; // 五王        
        break;
    case 6:
        this_level = level.two; //满堂红
                break;
    default:
        // 就是页面都没有四,来判断是否属于 “五子” 和 “六子” 和 “四进” 中的哪一种;
        for (var i = 0; i < NumberArr.length; i++) {
            var ContrastArr = [];
            for (var j = 0; j < NumberArr.length; j++) {
                if (NumberArr[i] == NumberArr[j]) {
                    ContrastArr.push(NumberArr[j]);
                }
            }
            if (ContrastArr.length === 4 && ContrastArr[0] == 2) {
                this_level = level.seven; //四进               
                break;
            } else if (ContrastArr.length === 5 && ContrastArr[0] == 2) {
                this_level = level.three1; //五子                
                break;
            } else if (ContrastArr.length === 6 && ContrastArr[0] === 1) {
                this_level = level.two1; //遍地锦                
                break;
            } else if (ContrastArr.length === 6 && ContrastArr[0] === 2) {
                this_level = level.two2; //六勃黑                
                break;
            } else {
                this_level = level.ten;
            }
        };
        break;  }
        that.setData({
          l:this_level,
          });
        }
        }, 50);}      
    }

3.小程序的弹窗设置

初次接触微信开发者工具，如何做到点击按钮弹出弹窗并且实现蒙版效果花费了我们许多时间，参考微信小程序各种弹窗操作，具体实现如下：
.wxml中（按钮样式设置代码省略)：主要是在页面和弹窗上分别设置按钮

<!--弹窗-->
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<view class="modalDlg" wx:if="{{showModal}}">
    <text>历史记录</text>
    <button bindtap="go" style="background-color: rgb(255, 255, 255);">返回</button>
 <!--弹弹窗的按钮--> 
</view>
<button bindtap="submit" style="position:absolute; ">历史记录</button>

.wxss中：主要是设置弹窗的样式，略去一部分样式设置的代码

<!--mask是蒙版的样式设置-->
.mask{
  width: 100%;
  position: fixed;
  background: #000;//设置当前背景页面为黑色
<!--省略部分样式设置-->
}
.modalDlg{
<!--省略样式设置-->
}

.js中：主要应用了自带的showModal

data: {
    showModal: false
},
submit: function() {
    this.setData({
    showModal: true
    })
},
preventTouchMove: function() {
},
go: function() { 
    this.setData({
    showModal: false
    })
}

四、GitHub部分

1.GitHub中的仓库地址

博饼的仓库地址

2.commit记录

在这里插入图片描述

五、结对编程经历与心得

1.结对经历

工作过程及创建GitHub组织照片：
在这里插入图片描述

2.个人心得

这一次的结对编程作业，起初以为这周只要补上摇骰子的代码，后来发现是要写实现整个小程序页面的代码，有些震惊。也是在两三天里面查阅资料，翻遍csdn和百度，然后确认了使用的工具，接着就开始学习怎么操作软件和使用JavaScript，软工作业的困难，对我来说大部分在于是一些从来没有接触过的东西，认识和学习新技术的过程花费了大量的时间。这次小程序代码的实现，从空白的一张页面连文字都不会添加到最后有一个好看的页面和各种跳转按钮弹窗等等，页面的所有组成都是我们查遍资料，一点一点的借鉴修改做出来的，熬夜到四五点，很累但是很有成就感。最终的小程序有很多不完善的地方，需要连接服务器的地方我们能力有限无法实现，在能力范围内已经尽可能的使它接近原型模型，总的来说还是非常有收获，挺满足的。

六、团队收获

编码的时候对于文字、图片一些视觉上的效果调整花了较多时间，特别是按钮的背景颜色设置，有一些效果的实现是我们没有掌握的，只能通过不断的查找相关内容并不断模拟来实现。经过整个的修改，我们认识了许多从未见过的设置，比如渐变色、按钮的背景、左留白等。
编码的时候对于骰子是否中奖的判断一直无法显示，和热心同学交流过以后明白我们设的计时器内部的数据会随着计时结束而清楚，因此不能在计时器里面来进行判断。
复审的时候在骰子中奖的分类上花费事件比较长，有一些情况在开始写的时候没有考虑到，是多次尝试后才发现有错误。我们明白了在写有关判断的代码的时候，我们要先把各种判断条件设置好，这次运气好还能摇出错误，下次可能还发现不了。