EE308 Lab4

22！！ 2021-10-09 23:37:57

The Link Your Class	https://bbs.csdn.net/forums/MUEE308FZ?typeId=17692
The Link of Requirement of This Assignment	https://bbs.csdn.net/topics/601188617
MU STU ID and FZU STU ID	19103293&831901306
Teammate's MU STU ID and FZU STU ID	19104669&831901311
Teammate's blog link	https://blog.csdn.net/m0_61790062
GitHub link	https://github.com/hzh22/lab4
Video demo link	https://v.douyin.com/dGfDBQj/

1.PSP FORM

2.Progress of the record

3.Key or difficult functions, programming thinking

The picture

There are fruitful events

Pair programming experience

GitHub repository address

Video demo link

1.PSP FORM

Personal Software Process Stage	Estimated time (mins)	real time(mins)
Planning	-	-
Estimate	2000	1260
Development	-	-
Analysis	180	600
Design Spec	120	180
Design Review	10	30
Coding Standard	10	60
Design	15	30
Coding	1440	1080
Code Review	10	30
Test	10	15
Reporting	-	-
Test Report	30	30
Size Measurement	10	20
Postmortem&Process Improvement	10	30

2.Progress of the record

N day	New code (line)	Cumulative code (line)	Learning Time (hours/day)	Accumulated Time (hours/day)	Important growth
1	63	63	6	6	Learned the development method of small program, using the front-end development method to complete the page layout
2	241	304	7	13	Learned how to distribute applets

3.Key or difficult functions, programming thinking

1.For this experiment, the first problem is that I need to learn languages by myself, such as JavaScript or Python. It is not easy to use a language that I am not familiar with. The second problem is the front end template design, the page layer does not work on some models
2.Judgment of results

3.Shake the implementation of the function shake

2.During the programming process, click the relevant icon to realize the page jump, which is the most basic function of the small program.
3.The game needs to reflect the dice roll and simulate the real situation, so a random number generating function (range 1-6) and a judgment and selection program are designed. Each random number generated will call the corresponding dice picture, so as to achieve the same situation as the real dice roll.

Generate 1~6 random numbers and call the corresponding dice picture


function RandomNumBoth(Min,Max){
  var Range = Max - Min;
  var Rand = Math.random();
  var num = Min + Math.round(Rand * Range); //四舍五入
  return num;
} //随机数生成
 function dicejudge(dice) {
  var n;
  if(dice=="../img/1.png")
  n=1;
  else if(dice=="../img/2.png")
  n=2;
  else if(dice=="../img/3.png")
  n=3;
  else if(dice=="../img/4.png")
  n=4;
  else if(dice=="../img/5.png")
  n=5;
  else if(dice=="../img/6.png")
  n=6;
  return n;
 }

WXSS file

.add_btn{
width: 100%;
position: fixed;
bottom: 200rpx;
}
.btn{
margin-top: 30rpx;
width: 450rpx;
background: #14a1fd ;
color: #fff;
border-radius: 0%;
}
.circle{
width: 100rpx;
height: 300rpx;
border-radius: 100%; 
background: rgb(231, 247, 18);
color: rgb(224, 60, 60);
}
.add_btn1{
width: 150%;
size: 10rpx;
position: fixed;
bottom: 1300rpx;
}
.btn1{
margin-top: 30rpx;
width: 450rpx;
background: #d8fa16 ;
color: rgb(12, 12, 12);
border-radius: 10%;
}

WXML file

<view class="add_btn">
<button class="circle"  bindtap="handletap"  style="width: 211rpx; height: 218rpx; display: block; box-sizing: border-box; left: -20rpx; top: 16rpx; position: relative">
</button>
</view>
<view class="add_btn">
<image  src="/images/{{num1}}.png" style="width: 100rpx; height: 100rpx; display: inline-block; box-sizing: border-box; position: relative; left: 148rpx; top: -616rpx"></image>
</view>
<view class="add_btn">
<image  src="/images/{{num2}}.png" style="width: 100rpx; height: 100rpx; display: inline-block; box-sizing: border-box; position: relative; left: 314rpx; top: -524rpx"></image>
</view>
<view class="add_btn">
<image  src="/images/{{num3}}.png" style="width: 100rpx; height: 100rpx; display: inline-block; box-sizing: border-box; position: relative; left: 472rpx; top: -626rpx"></image>
</view>
<view class="add_btn">
<image  src="/images/{{num4}}.png" style="width: 100rpx; height: 100rpx; display: inline-block; box-sizing: border-box; position: relative; left: 471rpx; top: -773rpx"></image>
</view>
<view class="add_btn">
<image  src="/images/{{num5}}.png" style="width: 100rpx; height: 100rpx; display: inline-block; box-sizing: border-box; position: relative; left: 314rpx; top: -880rpx"></image>
</view>
<view class="add_btn">
<image  src="/images/{{num6}}.png" style="width: 100rpx; height: 100rpx; display: inline-block; box-sizing: border-box; position: relative; left: 148rpx; top: -774rpx"></image>
</view>

Judge the level of reward earned


function judge(dic1,dic2,dic3,dic4,dic5,dic6) {
 var dicarr=[0,0,0,0,0,0];
 dicarr[dicejudge(dic1)-1]++;
 dicarr[dicejudge(dic2)-1]++;
 dicarr[dicejudge(dic3)-1]++;
 dicarr[dicejudge(dic4)-1]++;
 dicarr[dicejudge(dic5)-1]++;
 dicarr[dicejudge(dic6)-1]++;
if((dicarr[0]==2&&dicarr[3]==4)||dicarr[3]==6||dicarr[0]==6||dicarr[5]==6||dicarr[3]==5||dicarr[3]==4)
return "状元";
else if((dicarr[0]==1&&dicarr[1]==1&&dicarr[2]==1&&dicarr[3]==1&&dicarr[4]==1&&dicarr[5]==1))
return "榜眼";
else if(dicarr[3]==3)
return "探花";
else if(dicarr[5]==4)
return "进士";
else if(dicarr[3]==2)
return "举人";
else if(dicarr[3]==1)
return "秀才";
else
return "落榜";
 
}

4.The picture

5.There are fruitful events

(1). In terms of coding, front-end knowledge and back-end Python knowledge have been harvested, and then events of front-end URL provided by back-end.
In the end, I asked my classmates to adopt the flask framework. After knowing that the return information would be displayed on the default website, but the return could only return strings but not the number of dice, which made me very upset.
(2), the debate is mainly about whether the back-end code should be implemented in the back-end, because the back-end logic code of this experiment is very simple, but it is difficult for us to provide port and upload server, mainly because there is no server, so we finally decided to abandon the python code of the back-end and use JS 'to implement in the front-end.

（3）After thinking about the interface and the production of functions, there were no big problems in the front and back ends. The second problem my teammates and I encountered was the interaction between the front and back ends. The back end did not know how to provide functions to the front end. I searched a lot of materials and learned the Flask framework of Python. However, due to the lack of server and the lack of time, I could only provide the local server URL to the front end, which used the local URL to invoke functions. The disadvantage of this is that it can only be accessed under a LOCAL area network. Finally, after a long time of thinking, due to the small amount of back-end code, my teammates and I implemented the functions in the front end.

6.Pair programming experience

Promote the improvement of myself involved in the project, a pair of programmers can learn something new while working. I organized my thoughts by constantly speaking them out. Verbal communication made us familiar with the modules, the development process became more interesting, and we had a lot of communication and a much better relationship. Higher quality code is done. Programs are less bug-prone, and the code is more elegant and compact. Pair programming forces programmers to work more efficiently. When I encounter difficulties, I may not immediately actively solve the problem, then I may surf the Internet to chat with friends, look at irrelevant websites and so on. Most of the day may be lost because of interruptions. But pair programming has a mutual urging effect on us, when one side of the work is tired and bad, the other side will play a role of encouraging and stimulating morale. And two people share a computer, slightly personal chat activities will be very conscious not to carry on. Feeling inexplicable on a lot of tired, efficiency is also high.