EE308 LAB4

The Link Your Class	https://bbs.csdn.net/forums/MUEE308FZ?category=0
The Link of Requirement of This Assignment	https://bbs.csdn.net/topics/601188617
MU STU ID and FZU STU ID	19103891 and 831902218
Teammate's MU STU ID and FZU STU ID	19104553 and 831902205
Teammate's blog link	Teammate's Blog
The Aim of This Assignment	Develop a BoBing Software
Video demo link	EE308 软件工程 lab4 博饼小程序视频演示_哔哩哔哩_bilibili

Directory

GitHub link 

Video Demonstration 

Key and Difficult Functions

Programming thinking

The Big Event 

Git Commit Information Specification 

PSP Form

Photo of the Working Experience 

Learning Progress Bar

Summary

---

 

GitHub link 

GitHub：https://github.com/HuanLeBoBing/Mini2

Video Demonstration 

Link：EE308 软件工程 lab4 博饼小程序视频演示_哔哩哔哩_bilibili

Key and Difficult Functions

1. As a small program, bobing by user click press the button, the most important thing is to let the dice began to turn it up, can stop the dice roll when the user clicks the stop, and then in the final in six dice rotate out of the results of the interface, also requires the user to every click here need to present different dice rotate as a result, and the results of different types.

2. The result of the rotation of the 6 dice is judged by the rule to determine the result type of the roll. Because the rules for blogging are complex, they require a strong logic to judge.

3. Create a multiplayer room that allows multiple players to play pie games simultaneously on a single device. At the same time, at the end of the game also need to display each player's blog pie results .

4.  The final interface in a multiplayer game displays the rankings based on the points scored by different players.

5. Add background music in the game applet, and the user can click the button to play or pause.

Programming thinking

• For key 1: We declare 6 variables to represent 6 different dice. In the wxss file, set the position of each dice represented by these 6 variables so that they just appear in the bowl of the interface. Then with the use of random function, let these six variables randomly generate numbers between 1-6 respectively. In wxml files for each variable Numbers obtained by random, each result corresponds to a dice results figure, such as: variable represents the dice 1, the results obtained from random function is 4, then in the ml document can find pictures 1 dice corresponding results of 4, after the operation, the interface will appear in a number of dice position dice rotate result is 4 pictures.

   The codes are as follows:

this.setData({
      a: Math.ceil(Math.random()*6),
      b: Math.ceil(Math.random()*6),
      c: Math.ceil(Math.random()*6),
      d: Math.ceil(Math.random()*6),
      e: Math.ceil(Math.random()*6),
      f: Math.ceil(Math.random()*6)
    })

.touzi1{
  position:relative;
  height:50px;
  width:50px;
  top:180px;
  right:-150px
}

<image wx:if="{{a==1}}"src="https://i.bmp.ovh/imgs/2021/10/b3624bddf55f8d02.gif"class="touzi1"></image>
<image wx:elif="{{a==2}}"src="https://s3.bmp.ovh/imgs/2021/10/ddcf7ae6f95554b1.gif"class="touzi1"></image>
<image wx:elif="{{a==3}}"src="https://i.bmp.ovh/imgs/2021/10/bf05ea356be0353c.gif"class="touzi1"></image>
<image wx:elif="{{a==4}}"src="https://s3.bmp.ovh/imgs/2021/10/b6086a27597cfd56.gif"class="touzi1"></image>
<image wx:elif="{{a==5}}"src="https://s3.bmp.ovh/imgs/2021/10/013b186fb2103fe0.gif"class="touzi1"></image>
<image wx:else="{{a==6}}"src="https://s3.bmp.ovh/imgs/2021/10/4033ab3657c6b3fe.gif"class="touzi1"></image>

• For key 2: We first store all the result names into a string array according to the rules. Then the six random numbers obtained are stored in an array, and then the array is sorted by the sort function. Then we iterate through the array to find out how many 4. Then write a switch structure statement to judge the number of 4 cases. If there is only one 4, judge how many of the remaining numbers are the same numbers. If the number of the same numbers is greater than or equal to 4, judge which level it belongs to. When there is no same number or the same number is less than 4, it is necessary to judge whether it is "a show" or "right hall". Here, we traverse the array again to find out whether there are the same numbers. If there are, it is "Yixiu", otherwise it is "Dutang". When the number of 4 is a case of 2, you can also find the same element in the array. If there are 4 same results, it will be "quaternion", otherwise, it will be "two hall". Three four cases have only one result: "three red". When there are four 4's, judge how many 1's there are in the array. If there are two, it is "the champion with golden flowers", otherwise it is "the champion". Five four and six four are "five kings" and "six times red" respectively. If there is no 4, judge the number of the same number in the array, and then the corresponding result.

  

• For key 3: This difficulty is the realization of single player multiplayer game. In the prototype, we designed to let users choose the number of people to participate in the game, ranging from 2 to 4. Our solution is to design multiple interfaces. As long as the user clicks to select the number of people, the interface will jump to the corresponding game interface, so that multi player games can be played at the same time. However, this approach is very cumbersome, because it is necessary to create enough interfaces for the program to jump. Then, after each player's blog cake is finished, the system saves the player's blog cake result and transmits it to the next page as a variable, so that there will be the results of all players in the final interface. Then, in the final interface, the corresponding points of all results are stored with the data structure map, and then the corresponding points of each player's results are found through the map, Through simple program judgment, you can get the ranking of each player. This is also very cumbersome. We need to transmit the results page by page, which is easy to make mistakes. I think this is our deficiency. 

    The codes are as follows:

var Mymap1 = new Map([['很遗憾您没有中奖',0],
                 ['恭喜您获得了状元插金花',1000],
                 ['恭喜您获得了六杯红',500],
                 ['恭喜您获得了五子',500],
                 ['恭喜您获得了普通状元',500],
                 ['恭喜您获得了对堂',300],
                 ['恭喜您获得了三红',200],
                 ['恭喜您获得了四进',100],
                 ['恭喜您获得了二举',50],
                 ['恭喜您获得了一秀',10],
                 ['恭喜您获得了五皇',500]]);
 
    this.data.key1=Mymap1.get(this.data.result1);
    this.data.key2=Mymap1.get(this.data.result2);
    this.data.key3=Mymap1.get(this.data.result3);
    this.data.key4=Mymap1.get(this.data.result4);

• For key 4: When making a multiplayer game, we had difficulty getting four players to participate in the game's modules at the same time. For a multiplayer game, we needed to calculate each player's dice roll and the corresponding score, and also compare the score of the four players to list their rank. We started coding with a map, but when we had some players with the same score, the map couldn't store their values, because if some elements had the same key value, their values would be overwritten, overlapping, and not all of them would fit into the map. After a lot of experimentation, we finally decided to put the points in one array, then put each player's name in another array, then determine if there are any elements in the numeric array that are identical, and if they are, add up their strings in the array of names and remove the values. In this way, players with the same score will only have one string stored in the map and will not affect each other.

The codes are as follows:

var array=new Array(this.data.key1,this.data.key2,this.data.key3,this.data.key4);
    var temp=new Array("1号玩家","2号玩家","3号玩家","4号玩家");
		for(var i=0;i<array.length;i++) {
			for(var j=i+1;j<array.length;j++) {
				if(array[i]==array[j]) {
					temp[i]=temp[i]+" "+temp[j];
					temp[j]="";
					array[j]=-1;
				}
			}
		}
    var map1 = new Map([[array[0],temp[0]],[array[1],temp[1]],[array[2],temp[2]], 
                       [array[3],temp[3]]])
    array.sort(this.sortNum);
    var counter=1;
    var r="";
		for(var i = 0; i < array.length; i++) {
        if(counter<=4){
        r=r+"第"+counter+"名: "+map1.get(array[i])+"\n";
        if(map1.get(array[i]).length==4){
          counter++;
        }
        if(map1.get(array[i]).length==9){
          counter=counter+2; 
        }
        if(map1.get(array[i]).length==14){
          counter=counter+3;
        }
      }
      else{
        break;
      }
    }

• For key 5: Adding background music is one of our features. We created a "Settings" button that will pop up if you want music when you click it. Then code the method to open the music in the JS file. This enables the addition of background music.

The codes are as follows:

ctrlMusic: function () {
    const backgroundAudioManager = wx.getBackgroundAudioManager();
    backgroundAudioManager.title = "爱拼才会赢"
    backgroundAudioManager.src = "http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_564059&response=res&type=convert_url&";
    // 播放
    if (!this.data.isplay) {
      this.setData({
        isplay: !this.data.isplay,
      });
      console.log("music playing !");
      // 结束时循环
      backgroundAudioManager.onEnded(() => {
        console.log("music end !");
        this.setData({
          isplay: !this.data.isplay,
        });
        console.log("music replay !");
        this.ctrlMusic();
      });
    }
 
    // 暂停
    else {
      this.setData({
        isplay: !this.data.isplay,
      });
      backgroundAudioManager.pause();
      backgroundAudioManager.onPause(() => {
        console.log("music stop !");
      });
    }
  },

The Big Event 

1. First, in order to realize the prototype we created in the last assignment, we decided to use the "wechat developer" tool. This is a development tool similar to vscode, which also needs JavaScript language. Since we haven't learned JavaScript before, we spent a long time in the preparation stage to learn how to program with JavaScript and how HTML works. At the beginning of development, we immediately encountered difficulties: local pictures cannot be directly added to the ML file. After checking the file path for many times without results, we can only get the URL link of the picture through the drawing bed and add it to the MLL file. Only then can we finally insert the picture successfully.

2. What bothers us most is how to realize the data transmission between different pages. At the beginning of programming, we put the generation of functions and random numbers on the result interface, which leads us to click to stop the rotation of dice and jump to the next interface after running, so we can't get the result. Then we decide to generate and judge random numbers on the previous page of the final interface, and then transfer the results and 6 random numbers to the next page. This involves the transmission between pages. We started with array transfer, but we didn't succeed. Therefore, we finally chose to transmit the six numbers separately, and with the help of our classmates, we successfully completed the transmission between pages. To achieve a single person to roll the dice and get the results of this basic function. After this attempt, we learned how to transfer data between different pages and better understand the use of various parts of the JavaScript language.

3. When making multiplayer games, we take the longest time and are the most cumbersome. Because we realize the user's multiplayer game requirements through page Jump, users can jump to the corresponding interface as many people as they need. The process of making these interfaces is very complex and tiring. Moreover, each page needs to transfer the results of each player to the next page, which is very error prone. As for the final judgment, we initially planned to use the if judgment structure to match the Bo cake result with the corresponding integral, but later we felt very troublesome, so we used the data structure of map to realize this function, which is very fast and effective. Through this attempt, we are more familiar with the JavaScript language.

Git Commit Information Specification 

 

PSP Form

Personal Software Process Stages	Estimated time(mins）	Real Time(mins）
Planning	120	180
Estimate	60	60
Development	60	80
Analysis	60	120
Design Spec	60	60
Design Review	20	30
Coding Standard	20	20
Design	450	520
Coding	240	320
Code Review	80	120
Test	30	40
Test Report	60	60
Postmortem & Process Improvement Plan·	30	30
Total	1290	1640

Photo of the Working Experience 

Learning Progress Bar

The day of N	New code (line)	Cumulative code (line)	Learning time this day (hours)	Total Learning Time (hours)	Important growth
1	50	50	6	6	each Page creation, add background and press button
2	100	150	6	12	Realize the jump between pages
3	100	250	7	19	Make a single player game that has a different outcome every time you roll a die
4	120	370	8	27	Implement multiplayer, recording each player's results
5	120	490	6	33	debug and test

Summary

       This assignment is to undertake the last assignment, in order to realize the prototype created last time, this workload is unprecedented. From the preparation stage, we will start to learn JavaScript and HTML, and understand some basic principles and tools for developing software. In the coding stage, it can be said that we hit a wall everywhere, because it is not easy to understand the development language in a short time, so the code often reported errors, we continued to search the Internet for solutions, while solving the problem bit by bit to learn the development language. After the initial completion of the prototype after coding function, there is a sense of achievement, but the process is tedious, tired. And there are still a lot of shortcomings, such as the implementation of our multiplayer game, only through page conversion to achieve, more complicated. Second, we haven't been able to address the higher demands of online gaming. So, we still have to work hard, continue to learn JavaScript, improve my ability. Finally, this assignment was a brand new experience. It was the first time to develop a small program by ourselves. During the process of completing the assignment, we kept exploring and learning, which was very happy and fruitful.

Or the phrase, "I can do all things！".