1.PSP Form

2、Difficulties encountered and solutions

Difficulties encountered：
1.We have never been exposed to Wechat Applet program development applications befor.
2.New programming languages need to be learned and users need to be considered.
3.This task is completed by two people, which requires two people to cooperate through GitHub. It takes time to discuss and coordinate.

Solutions：
1.We quickly learned the development process of Wechat Applet by learning online materials and videos, and used "Wechat Developer tools" to program and develop the prototype we have done in last lab work.
2.We tried to cooperate with each other through offline communication and remote warehouse cooperation on GitHub.
3.In the process, we found that some of the original ideas were difficult to implement or worth improving, so we simplified and optimized the ideas of the prototype.

3.User Interface Presentation

“Game center“

You can choose your game mode here

“Friends”

You can post comments and see what other friends are doing here

“Myself”

You can view and edit personal information

4.Key code and feature demonstrations

Single player mode

This mode allows you to roll dice online and count the results

1. /**

2. *对结果保存到list列表中，并合成每个图片路径保存到listsrc列表，countList用来保存个点数的统计个数

3. */

4. result() {

5. var list = [];//初始化

6. var listsrc = [];//初始化

7. var countList=[0,0,0,0,0,0,0];//初始化

8. for (var i = 0; i < 6; i++) {

9. var t = this.random(1,6);

10. list.push(t);

11. countList[t]++;

12.  

13. }

14. this.setData({

15. result: list

16. })

17. for (var i = 0; i < 6; i++) {

18. var dicesrc = "/assets/images/dice/d" + this.data.result[i] + ".png"

19. listsrc.push(dicesrc)

20. }

21. this.setData({

22. dicelist: listsrc,

23. })

24. var flag = 0;

25. if ( countList[1] == 1 && countList[2] == 1 && countList[3] == 1 && countList[4] == 1 && countList[5]== 1 && countList[6] == 1) {

26. this.setData({

27. determine: "对堂！",

28. })

29. flag = 1

30. } else {

31. if ( countList[1] == 6){

32. this.setData({

33. determine:"遍地锦！",

34. })

35. }

36. if ( countList[4]== 1) {

37. this.setData({

38. determine: "一秀！",

39. })

40. flag = 1

41. }

42. if ( countList[4]== 2) {

43. this.setData({

44. determine: "二举！",

45. })

46. flag = 1

47. }

48. if ( countList[4] == 3) {

49. this.setData({

50. determine: "三红！",

51. })

52. flag = 1

53. }

54. if ( countList[4] == 5) {

55. this.setData({

56. determine: "五王！",

57. })

58. flag = 1

59. }

60. if ( countList[4] == 4) {

61. if ( countList[1] == 2) {

62. this.setData({

63. determine: "状元插金花！",

64. })

65. flag = 1

66. } else {

67. this.setData({

68. determine: "状元！",

69. })

70. flag = 1

71. }

72. }

73. if ( countList[4] == 6) {

74. this.setData({

75. determine: "六杯红！",

76. })

77. flag = 1

78. }

79. if ( countList[1] == 4 || countList[2]== 4 || countList[3] == 4 || countList[5] == 4 || countList[6] == 4) {

80. this.setData({

81. determine: "四进！",

82. })

83. flag = 1

84. }

85. if ( countList[1] == 5 || countList[2] == 5 || countList[3] == 5 || countList[5] == 5 || countList[6] == 5) {

86. this.setData({

87. determine: "五子登科！",

88. })

89. flag = 1

90. }

91. if ( countList[2] == 6 || countList[3] == 6 || countList[5] == 6 || countList[6]== 6) {

92. this.setData({

93. determine: "六杯黑！",

94. })

95. flag = 1

96. }

97. }

98. if (flag == 0) {

99. this.setData({

100. determine: "可惜",

101. })

102. }

103. console.log("输出投掷结果:", this.data.determine)

104. },

105.  

Mutiple player mode

“start game” button

1.  
2.  

3. //开始游戏

4. click(){

5. console.log("确定房间人数：", num)

6. if(!this.data.num){

7. this.setData({

8. infoMess:'请选择玩家人数！',

9. })

10. }else{

11. this.setData({

12. infoMess:'',

13. statu:1

14. })

15. console.log("创建成功！")

16. }

17. },

“start” and “stop” button

1. click1(){

2. console.log("点击投掷")

3. this.setData({

4. statu: 2,

5. finallydetermine:[]

6. })

7. },

8.  

9. click2(){

10. console.log("停！")

11. this.setData({

12. statu: 3

13. })

14. this.result();

15. },

16.  

next player and come out result fuctions

1. next2(){ //轮到玩家2

2. this.setData({

3. p:2,

4. statu:1,

5. determine1:determine,

6. })

7. },

8. next3(){ //轮到玩家3

9. this.setData({

10. p:3,

11. statu:1,

12. determine2:determine,

13. })

14. },

15. next4(){//轮到玩家4

16. this.setData({

17. p:4,

18. statu:1,

19. determine3:determine,

20. })

21. },

22.  

23. finish(){ //点击生成结果

24. this.setData({

25. p:0

26. })

27. if(num=='2人'){

28. this.setData({

29. determine2:determine,

30. })

31. }

32. if(num=='3人'){

33. this.setData({

34. determine3:determine,

35. })

36. }

37. if(num=='4人'){

38. this.setData({

39. determine4:determine,

40. })

41. }

42. console.log("排名完成")

43. },

44. }

45.  

5.Learning progress bar

6.Demonstration Video Link

7.Teamwork photo

8.Summary

This applet development is undoubtedly is a challenge for us, we paid a lot of time also harvest a lot, such as: WeChat small program development process, programming, front-end design, etc., the most important thing is that we implemented a from idea to prototype to program the whole process of implementation, also learned how to communicate and cooperate, and his team-mates to overcome various difficulties and challenges. The work also improved our capabilities and our understanding of software development！