结对编程作业

https://github.com/CNllb/pig_end

学号	姓名	分工	博客链接
031902610	刘凌斌	前端界面，模型设计，游戏逻辑	https://www.cnblogs.com/CNLLB/p/15456141.html
131901121	肖清江	AI算法	https://www.cnblogs.com/xiao-qingjiang/p/15456122.html

一、原型设计

（1.1）原型作品链接为：https://app.mockplus.cn/s/WSoYi3myuw7c

（1.2）原型开发工具：在本次结队编程作业中，我们小组采用了操作起来较为简单的Mockup工具对原型进行设计。

（1.3）原型简单说明：

（1）缺点和不足：

① 本次原型设计是由两位直男协同完成的，在审美方面或许还有较大的欠缺，希望大家批评指正。

② 作品链接中的原型作品的原型组件未进行及时更新，较为简陋，下文博客提供实现前后对比。

（2）主要页面原型和实际效果对比：、

原型和小程序实现的机型：iPhone X(812*375)

主要效果的区别产生在原型设计未导入相关字体库和相关图标，实际界面与原型在实现上存在计算误差。

登录页

① 原型：

② 实际效果：

首页：

① 原型：

② 实际效果：

对战界面：

① 原型：

② 实际效果：

（1.4）遇到的困难和解决方法：

困难：本次制作原型是我们小组第一次使用原型制作工具，在这过程中最难熬的就是想出一个好的idea，并做好颜色搭配。这对于两个理工男来说并不友好。我们也想过直接使用暴发户气息爆棚的传统斗地主风格，或者直接竖屏实现按钮点击，带出汽配城风格，但还是想着，既然要自己从0开始做一个小程序，那么不管结果如何，总要尽自己的可能，尽可能实现效果好一些。

解决方法：多次讨论之后，我们决定背道而行，将棋牌游戏打出养生的感觉，所以，在图片方面，选择了色调较为柔和的水墨山水画，再结合莫兰迪色系，调出了属于我们小组的软件设计风格。

收获：在原型开发的过程中，我们成员之间可以天马行空，可以一次次地进行犯错，颜色搭配有问题就马上更改颜色，再进行分析，这是软件开发中极为有趣的一部分，我们也开始能够理解UI小姐姐没有灵感时候的痛楚。在这过程中，我们又掌握了一个对软件开发非常有帮助的开发工具。

二、原型设计实现

简易思维导图：

（2.1）代码实现思路：

（1）网络接口的使用

• 登录接口的使用

  • 在实现过程中，使用input进行账号和密码的输入，点击登录实现网络通信，成功获取用户信息

  • 登录函数设置了常规输入检测，保证用户名和密码内容不为空，并对登录返回的status进行了判断。

        login: function (e) {
                var that = this;
                let formData = e.detail.value;
                this.setData({
                    student_id:formData.student_id,
                    password:formData.password
                })
                console.log(formData);
                if (that.data.student_id == ""||that.data.password == "") {
                  wx.showModal({
                    title: "错误",
                    content: "用户名或密码不能为空"
                  });
                  that.isname = false;
                  that.ispass = false;
                } else {
                  that.isname = true;
                  that.ispass = true;
                }
                if (that.ispass && that.isname){
                    wx.request({
                        url: 'http://172.17.173.97:8080/api/user/login',
                        header:{
                            "Content-Type":"application/x-www-form-urlencoded"
                        },
                        data: formData,
                        method: "POST",
                        success: function (res) {
                            console.log(res.data);
                            if (res.data.status == 200) {
                                that.setData({
                                    id_token: res.data.data.token,
                                    response: res
                                }),
                                wx.setStorageSync('id_token', that.data.id_token),
                                wx.navigateTo({
                                    url: '../../pages/home/home',
                                })
                            }else{
                                wx.showModal({
                                    title: "错误",
                                    content: "密码或账号错误"
                                  });
                            }
                            
                        },
                        fail: function (res) {
                            console.log(res.data);
                            console.log('is failed');
                            console.log('获取信息失败');
                        }
                    })
                }
            }
  

• 获取房间信息的实现

      getHome:function (params) {
          var that = this;
          wx.request({
            url: 'http://172.17.173.97:9000/api/game/index',
            method: "get",
            data:{
              page_size:that.data.page_size,
              page_num:that.data.page_num,
            },
            header:{
              "Authorization": wx.getStorageSync('id_token'),
            },
            success: function (res) {
              console.log(res);
              that.setData({
                home_detail:res.data.data.games,
                isOpenHome:false,
                total_home:res.data.data.total,
                total_pages_num:res.data.data.total_page_num
              })
              console.log(that.data.home_detail);
              console.log(that.data.total_pages_num);
            },
            fail:function(err){
              console.log(err)
            }
          })
        }

• 加入房间接口实现

      joinHome: function (e) {
          var that = this;
          console.log(e.currentTarget.dataset.uuid);
          wx.request({
            url: 'http://172.17.173.97:9000/api/game/'+this.data.uuid,
            method: "POST",
            header:{
              "Authorization": wx.getStorageSync('id_token'),
              "content-type":'application/json'
            },
            data:{
              uuid:e.currentTarget.dataset.uuid
            },
            success: function (res) {
              that.setData({
                Gaming:true
              })
            },
            fail:function(err){
              console.log(err)
            }
          })
        },

• 创建房间的接口实现

      createHome: function () {
            var that = this;
            wx.request({
              url: 'http://172.17.173.97:9000/api/game',
              method: "POST",
              data:{
                "private":that.data.private
              },
              header:{
                "Authorization": wx.getStorageSync('id_token'),
              },
              success: function (res) {
                that.setData({
                  uuid: res.data.uuid
                })
                console.log(res);
                console.log(that.data.uuid);
              },
              fail:function(err){
                console.log(err)
              }
            })
        },

（2）代码组织与内部实现设计

（3）贴出你认为重要的/有价值的代码片段，并解释

​ 人机对战之中，AI的实现感觉比较有意思，我们小组是采用设置延时进行实现。在实现的时候，经过2000ms之后，自动实现AI的步骤，模拟较为有效

      setTimeout(() => {
            // 延迟后操作
            that.selectWay()
          }, 2000)

（4）描述你改进的思路

• 在本来的代码中，对战过程只使用一个界面进行展现，但是在传参过程中，多次造成传参错误，或者逻辑混乱的问题。
• 在这样的前提下，我们决定了重构代码，一个界面实现两次刷新，这样每个数据都能够单独处理，大大降低了发生逻辑错误的概率。

（5）展示出项目部分单元测试代码，并说明测试的函数，构造测试数据的思路。

• 本次结队编程项目，我们小组采用的是微信小程序进行实现，出于微信小程序的局限性，并未进行小程序代码的单独单元测试。但对各个函数进行了单独封装，并进行多次单例测试。

      // 封装的抽牌函数
      POP_Get_pork_1: function () {
          var that = this;
          this.data.last_value = this.data.now_value;
          this.data.now_pork = this.data.get_pork_set.pop();
          this.data.now_value = this.data.now_pork.value;
          this.data.set_pork_set.push(this.data.now_pork)
          switch (Math.floor((this.data.now_pork.value - 1) / 13)) {
            case 0:
              this.setData({
                get_pork_black_peach_count: this.data.get_pork_black_peach_count - 1,
              })
              break;
            case 1:
              this.setData({
                get_pork_red_heart_count: this.data.get_pork_red_heart_count - 1,
              })
              break;
            case 2:
              this.setData({
                get_pork_black_flower_count: this.data.get_pork_black_flower_count - 1,
              })
              break;
            default:
              this.setData({
                get_pork_red_block_count: this.data.get_pork_red_block_count - 1
              })
              break;
          };
          that.check_card_1();
          that.check_winner();
          this.setData({
            now_pork: this.data.now_pork,
            now_index: (this.data.now_index + 1) % 2,
            set_pork_block: this.data.set_pork_set.length == 0 ? false : true,
            get_pork_block: this.data.get_pork_set.length == 0 ? false : true,
            player1_black_peach_count: this.data.player1_black_peach.length,
            player1_red_heart_count: this.data.player1_red_heart.length,
            player1_black_flower_count: this.data.player1_black_flower.length,
            player1_red_block_count: this.data.player1_red_block.length
          });
          that.set_top_card_1();
          if (this.data.get_pork_set.length == 0) {
            this.setData({
              get_pork_block: true
            })
          }
        },

      // 封装的检查牌堆函数
      check_card_1: function () {
          if (Math.floor((this.data.now_value - 1) / 13) == Math.floor((this.data.last_value - 1) / 13)) {
            while (this.data.set_pork_set.length != 0) {
              var pork_1 = this.data.set_pork_set.pop();
              console.log(pork_1);
              switch (Math.floor((pork_1.value - 1) / 13)) {
                case 0:
                  this.data.player1_black_peach.push(pork_1);
                  break;
                case 1:
                  this.data.player1_red_heart.push(pork_1);
                  break;
                case 2:
                  this.data.player1_black_flower.push(pork_1);
                  break;
                default:
                  this.data.player1_red_block.push(pork_1);
                  break;
              }
            }
            this.data.last_value = null;
            this.data.now_value = null;
          }
        },

      // 封装的设置牌顶的函数
      set_top_card_1: function () {
          this.setData({
            player1_top_black_peach: this.data.player1_black_peach.pop(),
            player1_top_red_heart: this.data.player1_red_heart.pop(),
            player1_top_black_flower: this.data.player1_black_flower.pop(),
            player1_top_red_block: this.data.player1_red_block.pop()
          })
          if (this.data.player1_top_black_peach != null) {
            this.data.player1_black_peach.push(this.data.player1_top_black_peach)
          }
          if (this.data.player1_top_red_heart != null) {
            this.data.player1_red_heart.push(this.data.player1_top_red_heart)
          }
          if (this.data.player1_top_black_flower != null) {
            this.data.player1_black_flower.push(this.data.player1_top_black_flower)
          }
          if (this.data.player1_top_red_block != null) {
            this.data.player1_red_block.push(this.data.player1_top_red_block)
          }
        },

      // 封装的检查对局胜利的函数
      check_winner: function () {
          if (this.data.get_pork_set.length == 0) {
            this.setData({
              Gaming: false
            })
            if (this.data.player1_black_peach_count + this.data.player1_red_heart_count + this.data.player1_black_flower_count + this.data.player1_red_block_count > this.data.player2_black_peach_count + this.data.player2_red_heart_count + this.data.player2_black_flower_count + this.data.player2_red_block_count) {
              this.setData({
                winner: this.data.player_2
              })
            } else {
              this.setData({
                winner: this.data.player_1
              })
            }
          }
        }

（2.2）贴出Github的代码签入记录，合理记录commit信息。

小组的很大的不足：小组成员欠缺日常对Github的使用习惯，没有养成及时push代码的习惯，我们的commit记录并不好

小组有设置todo的习惯，以下是我们小组的todo记录截图（使用的是“敬业签”APP）：

（2.3）遇到的代码模块异常或结对困难及解决方法。

（1）在代码模块异常方面，前期的网络通信采用Postman进行模拟网络通信，和实际实现校园网通信有很大的不同，微信小程序对局域网通信的不支持也是一个很大的问题。在刚接入校园网的时候，各种报错，是真的头大。

解决办法：微信开发者工具强行不检查网络的证书和合法性，再接入校园网，成功获取信息。

（2）结队困难：首先，这是和队友的第一次合作，在实现代码的过程中，没有那么的默契。其次，两个人对各自负责的领域，了解得都不够深刻，前端对微信开发者工具的相关合法性不够了解，后端对框架不够熟练，这就造成了到处碰壁。

解决方法：通过制定todo进行计划，保证项目顺利地进行。

（2.4）评价你的队友。

• 值得学习的地方：

  学习能力很强，也很热衷学习新事物，今后我也要做到这一点，无论是在软件开发领域还是其他领域。

• 需要改进的地方：

  有时候联系不上哈哈，希望之后可以保持更紧密的联系哈哈。

（2.5）提供此次结对作业的PSP和学习进度条（每周追加）

第N周	新增代码（行）	累计代码（行）	本周学习耗时(小时)	累计学习耗时（小时）	重要成长
1	0	0	12	12	前端：学习安卓开发和微信小游戏的开发；后端：考虑使用Java进行后端编程，对Java基础知识进行巩固
2	1000	1000	12	24	前端：学了一周的游戏引擎和微信小游戏开发后，果断放弃，短时间把握不住，做了无用功，第2周，对原型进行设计，并实现微信小程序界面；后端：学习使用flask框架的python后端开发；
3	2500	3500	8	32	前端：实现微信小程序打牌逻辑，制作简易的人机对战；后端：完成AI的百分80代码。
4	1000	4500	10	42	前端：对代码进行封装，使得游戏的逻辑清晰明了，遗憾是，在线对战代码重构还未全部完成；后端：完成AI，并制作接口

三、心得

刘凌斌：

作业难度：本次作业给我带来的最大的困难应该是在游戏逻辑的实现，犯了专业性的错误，对各个操作的代码并未实现有效的封装。造成了后期代码需要重构，浪费了很多的时间；其次是对时间的规划不够合理，前期想要实现很多附属功能，后面发现附属功能还未完成，主要功能来不及实现，只能草草的实现，效果很差，这是犯的很致命的错误。

作业感想：即使本次作业完成的并不完善，但我们小组仍然会在后期将这个项目实现完全，也会开始学会习惯使用GitHub进行代码的pull和push，也借此提高自己的代码能力。

启发：制定项目需求一定要合理，要与实力相互匹配，不能好高骛远，要一直学下去，我们不会的还有很多东西。

肖清江：

作业难度: 这次作业难度我个人感觉较大，因为之前没有开放一个可以联网的功能（在线对战），只做过命令行小游戏，并且也没有做过前后端分离的工作（之前甚至分不清前后端），所以这次的作业对我挑战还是相当大的。
作业感想: 即使这次作业难度较大，但我还是尽量根据完成作业的需要去学相对应的内容。虽然起步的时候相当困难，但好在b站大学有各种各样的学习资料嘿嘿，终于还是学会了flask框架来实现后端，总而言之，完成这次作业还是相当有满足感的，尤其是看到自己的代码能给成功应用的时候！
启发: 这次给我最大的启发就是，要勇于尝试新事物，之前一直害怕学来不及，但不管如何，尽力而为，最终一定能得到收获，相信自己，勇于尝试新事物！