EE308 Lab4

[flamie]

The Link Your Class	https://bbs.csdn.net/forums/MUEE308FZ
The Link of Requirement of This Assignment	https://bbs.csdn.net/topics/601188617
MU STU ID and FZU STU ID	19104502_831901215
Teammate's MU STU ID and FZU STU ID	19104332_831901214
Teammate's blog link	https://bbs.csdn.net/topics/601422406
GitHub link	https://github.com/Rrooy/EE308_Lab4
Video link	https://www.bilibili.com/video/BV1VQ4y1B78g

 

content

1.PSP From

2.Github

3.Assumption description

4.Difficult functions and programming thinking:

5.Pair programming experience.

6.summary

 

---

1. PSP Form

Personal Software Process Stage	Estimated Time (minutes)	Actual Time (minutes)
Planning	30	20
Estimate	40	55
Development	-	-
Analysis	35	45
Design Spec	20	30
Design Review	35	40
Coding Standard	10	20
Design	60	120
Coding	300	600
Code Review	60	90
Test	20	25
Reporting	50	50
Test Report	20	35
Size Measurement	15	20
Postmortem&Process Improvement	40	50
Total	735	1200

 

2.Github repository：

https://github.com/Rrooy/EE308_Lab4

 

3.description

We use Axure to complete Lab3 design. After determining the direction of Lab4, we quickly determined the design direction of the software by asking seniors and querying information. We decided to use wechat mini program to accomplish this task. Because wechat small program is not only convenient and fast do not need to download, and suitable for us this kind of novice operation.
The basic page of the applet is as follows

Click "Help", the following interface will appear:

When we click "Start the game" in the game hall interface, jump to the number of people selection interface. The image below is the result of Bobing. 

 

 

 

4.Difficult functions and programming thinking:

In the code programming of the experiment we encountered a lot of difficulties such as how to make the specified number to participate in the LAN game and how to implement the dice roll, we through the baidu and CSDN query finally chose the use of custom components and the use of random Numbers to solve, then I will give you our solution results.

1. How to get a specified number of people to participate in the single player game
(1) Effect presentation
Custom components are used and a drop-down list is made.

// components/select/select.js
Component({
  /**
   * 组件的属性列表
   */
    properties: {
        propArray:{
            type:Array,
        }
    },
  /**
   * 组件的初始数据
   */
    data: {
        selectShow:false,//初始option不显示
        nowText:"请选择游戏人数",//初始内容
        animationData:{}//右边箭头的动画
    },
  /**
   * 组件的方法列表
   */
    methods: {
　　　//option的显示与否
        selectToggle:function(){
            var nowShow=this.data.selectShow;//获取当前option显示的状态
            //创建动画
            var animation = wx.createAnimation({
                timingFunction:"ease"
            })
            this.animation=animation;
            if(nowShow){
                animation.rotate(0).step();
                this.setData({
                    animationData: animation.export()
                })
            }else{
                animation.rotate(180).step();                
                this.setData({
                    animationData: animation.export()
                })
            }
            this.setData({
                selectShow: !nowShow
            })
        },
        //设置内容
        setText:function(e){
            var nowData = this.properties.propArray;//当前option的数据是引入组件的页面传过来的，所以这里获取数据只有通过this.properties
            var nowIdx = e.target.dataset.index;//当前点击的索引
            var nowText = nowData[nowIdx].text;//当前点击的内容
            //再次执行动画，注意这里一定，一定，一定是this.animation来使用动画
            this.animation.rotate(0).step();
            this.setData({
                selectShow: false,
                nowText:nowText,
                animationData: this.animation.export()
            })
            var nowDate={
                id:nowIdx,
                text:nowText
            }
            this.triggerEvent('myget', nowDate)
        }
    }
})

(2) Cross-page parameter transfer (how to transfer data from the select number page to the game page)

//将设置的玩家数传递到下一页面
  getDate:function(e){
    let obj=this
    obj.data.people=e.detail.id+1
    console.log(obj.data.people)
  },
  //跳转页面并传递参数
  goToGamePage: function(e) {
    var that = this
    wx.navigateTo({
      url:'/pages/staGame/staGame?people1='+that.data.people,
    })
  },
})

2. How to achieve the roll of dice
An array of pictures is paired with random numbers.
 

 one_img:'../../image/6-point.png',
    two_img: '../../image/6-point.png',
    three_img: '../../image/6-point.png',
    four_img: '../../image/6-point.png',
    five_img: '../../image/6-point.png',
    six_img: '../../image/6-point.png',
    flag:true,
    timer:null,
    msg:'给我摇',
    text:'哈哈',
    txt:'恭喜你摇到了：',
    palyedNum:'0',//已经玩的玩过家数
    people1:null,//一共设置的玩家数
    //图片的素材和效果图会发在最下面
    arrImage:[
      '../../image/1-point.png',
      '../../image/2-point.png',
      '../../image/3-point.png',
      '../../image/4-point.png',
      '../../image/5-point.png',
      '../../image/6-point.png',
    ]

and 

 obj.setData({
          one_img: obj.data.arrImage[arr[0]-1],
          two_img: obj.data.arrImage[arr[1]-1],
          three_img: obj.data.arrImage[arr[2]-1],
          four_img: obj.data.arrImage[arr[3]-1],
          five_img: obj.data.arrImage[arr[4]-1],
          six_img: obj.data.arrImage[arr[5]-1],
          flag:false,
          msg:'停止',
          text: obj.data.text,
          txt:'',
        })

5.Pair programming experience.

This is our second group programming task, and after the last pair collaboration, we have more confidence in pair programming, and the division of labor is clearer than the chaos of last time. However, we still encountered many difficulties this time. The biggest difficulty was that we had to learn new knowledge about software products and programming languages by ourselves, such as front-end and back-end application development. Because we have never learned it, we spent a lot of time on this item to inquire and study independently. Although we encountered many difficulties in learning, we still gained a lot. We have learned how to develop wechat mini programs, which I believe will be of great use in our future work.

 

6.Summary

Although the Lab this time is more difficult than the previous ones, we need to study the fields we have never touched before and develop a new project. However, we also gained a lot from this experiment. My teammates and I went through the process of coding, arguing, code improvement and cooperative learning before we finally completed our experiment. In this experiment, my teammates and I learned from each other's learning experience in the process of communicating with each other, and pointed out each other's shortcomings and assisted each other to improve. When solving puzzles, we gained a great harvest. Although the process of the experiment was not smooth sailing or even difficult, we still felt very happy after seeing the small program we made at last. I hope that the following study can let me gain more knowledge and solve more unknown difficulties.