2022·K班结对编程任务

DreamMak3r

已于 2022-10-14 19:47:49 修改

阅读量853

点赞数

文章标签：结对编程 javascript 前端 cocos2d typescript

于 2022-10-14 19:21:42 首次发布

本文链接：https://blog.csdn.net/m0_56077619/article/details/127325792

版权

github
bilibili
请添加图片描述

一、结对探索

1.1 队伍基本信息

结对编号：45；队伍名称：啊对对队；

学号	姓名	作业博客链接	具体分工
032002122	姜词杰	https://bbs.csdn.net/topics/608610941	游戏具体实现，游戏风格设计，游戏策划
032002122	林日臻	https://bbs.csdn.net/topics/608610716	AI编写，逻辑编写，ui构思

1.2 描述结对过程

姜词杰：来吗？
林日臻：来

1.3 非摆拍的两人在讨论设计或结对编程过程的照片

请添加图片描述

二、原型设计

2.1 原型工具的选择

我们选择的原型设计工具是墨刀。我们选择该工具的原因是墨刀可以在线进行原型的设计，且设计界面明了，功能异动，使用方便，可以一键分享原型设计。

2.2 遇到的困难与解决办法

没有遇到难以解决的问题，我们原型设计主要实现游戏框架与页面组件的联系

2.3 原型作品链接

墨刀

2.4 原型界面图片展示

请添加图片描述

三、编程实现

3.1 网络接口的使用

var that = this;
    //如果输入框为空,弹窗警告
    if (that.data.userName == "" || that.data.userName == null || that.data.password == "" || that.data.password == null) {
      wx.showModal({
        title: '提示',
        content: 'userName||password can not == null or ""',
      })
    } else {
      wx.request({
        url: 'http://192.168.43.39:8080/Servletgame',
        data: {
          userName1: that.data.userName,
          password1: that.data.password,
        },
        method: 'GET',
        header: {
          'content-type': 'application/json'
        },
        success: function (res) {
          
          if (res.data.create_time !== null) {
            app.globalData.userName=res.data.username
            app.globalData.password=res.data.password
            console.log(app.globalData.userName);
            console.log(app.globalData.password);
            wx.redirectTo({
              url: '/pages/list/list',
            })
          }else{
            console.log(res)
            wx.showToast({
              title:'账号或密码错误',
              icon: 'none',
              duration:1500
            })
          }

        },
        fail: function (res) {
          console.log(res)
          wx.showToast({
            title:'网络错误',
            duration:1500
          })
        }
      })
    }

3.2 代码组织与内部实现设计

游戏部分：
COCO节点图
在这里插入图片描述

代码图
AI部分：
请添加图片描述

3.3 说明算法的关键与关键实现部分流程图

游戏部分：

设置棋盘的每一个格子都监听触摸事件，在被触摸前，向所有没有数字的格子发放待生成的数字，当某方棋盘的方格被触摸后生成被发放的随机数，并将触摸事件冒泡地传递给游戏控制节点，并使控制节点生成下一回合己方的随机数，且切换回合，然后当对手回合结束时，己方所获得的随机数会被显示在盘面上。

在这里插入图片描述
流程图只画了A的，B同理

AI部分：

请添加图片描述

3.4 贴出重要的/有价值的代码片段并解释

游戏部分：

当格子被触摸时发射的事件：
发射事件
棋盘控制节点的处理：
事件的处理

AI部分：

遍历棋盘找当前最佳点

aimap:function(){
    var ans=-100;
    var cur=this.data.nextval;
    var resindex=0;
    for(let i=0;i<9;i++){
      var mat1=this.deepcopy(this.data.mat1),mat2=this.deepcopy(this.data.mat2);
      if(mat2[i]==0){
        mat2[i]=cur;
        var tempans=this.aidecison(mat1,mat2,i);
        if (tempans>ans) {
          ans=tempans;
          resindex=i;
        }
        mat2[i]=0;
      }
    }
    return resindex;
  },

对每个点计算权值

aidecison:function(mat1,mat2,i){
    var x=i/3,y=i%3;
    var cur=mat2[i];
    for(let j=y,k=0;k<3;j=j+3,k++){
      if(cur==mat1[j]){
        mat1[j]=0;
      }
    }
    return this.getsroce(mat2)-this.getsroce(mat1);
  },

3.5 性能分析与改进

将部分图片上传至云端后的改进与评分
请添加图片描述

3.6 单元测试

delplay:function(index){
    var who1=this.data.who;
    var x=index/3,y=index%3;
    if(who1==-1){
      var matm=this.data.mat1;
      var matc=this.data.mat2;
      var cur=matm[index];
      for (let i = y,j=0; j < 3; i=i+3,j++) {
        let now1=0;
        if (cur==matc[i]) {
          matc[i]=0;
          now1=now1+1;
        }
        if (now1==1) {
          this.addkill1();
        }else if (now1==2) {
          this.addkill2();
        }else if(now1==3){
          this.addkill3();
        }
      }
      this.setData({
        mat2:matc
      })
    }else{
      var matm=this.data.mat2;
      var matc=this.data.mat1;
      var cur=matm[index];
      for (let i = y,j=0; j < 3; i=i+3,j++) {
        let now1=0;
        if (cur==matc[i]) {
          matc[i]=0;
          now1=now1+1;
        }
        if (now1==1) {
          this.addkill1();
        }else if (now1==2) {
          this.addkill2();
        }else if(now1==3){
          this.addkill3();
        }
      }
      this.setData({
        mat1:matc
      })
    }
  },

3.7 贴出GitHub的代码签入记录，合理记录commit信息

请添加图片描述

四、总结反思

4.1 本次任务的PSP表格

PSP2.1	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	30	15
· Estimate	· 估计这个任务需要多少时间	30	15
Development	开发	2290	2410
· Analysis	· 需求分析 (包括学习新技术)	1000	1350
· Design Spec	·生成设计文档	60	30
· Design Review	·设计复审	120	80
· Coding Standard	·代码规范	20	20
· Design	·具体设计	10	30
· Coding	·具体编码	900	720
· Code Review	·代码复审	60	60
· Test	· 测试（自我测试，修改代码，提交修改）	120	120
Reporting	报告	120	70
· Test Reportr	· 测试报告	60	20
· Size Measurement	·计算工作量	30	20
· Postmortem & Process Improvement Plan	· 事后总结	30	30
	·合计	2440	2495

4.2 学习进度条

姜词杰：

第N周	新增代码（行）	累计代码（行）	本周学习耗时(小时)	累计学习耗时（小时）	重要成长
1	800	800	24	24	熟悉掌握TypeScript ，入门COCOSCREATOR
2	300	1100	10	34	熟悉掌握COCOSCREATOR

林日臻：

第N周	新增代码（行）	累计代码（行）	本周学习耗时(小时)	累计学习耗时（小时）	重要成长
1	850	850	24	24	复习html，css，js与学习wxml，wxss
2	200	1050	10	34	完成实际棋盘实现，逻辑完善

4.3 最初想象中的产品形态、原型设计作品、软件开发成果三者的差距如何？

最初想象的产品形态中棋盘和骰子为3D的，放置有动画，消除有粒子特效，棋盘也有光影质感。原型设计比较偏向于实现UI界面的设计，理清各界面之间的逻辑关系，棋盘的布局等，没有太多功能上的东西。最后软件开发结果将产品形态中的棋盘降级为2D，放置动画实现了，粒子特效变为简单的帧动画。

4.4 评价你的队友

姜词杰：林日臻coding速度很快，当时第一版用了几天就完成，但那时功能粗糙，所以我觉得，有时候不要太追求速度，也要注重细节和质量。

林日臻：姜词杰学习能力很强，3天学完cocos，原本预想如果他未能在规定时间内完成开发，就将我的第一版进行加工，结果，他没让我失望。

4.5 结对编程作业心得体会

林日臻:在短时间内学习wxml，js语法，重温css样式，学习ps图片修改，虽然过程辛苦是不可避免，但收获还是令人感到尤其的欣慰。在这次的软件设计中不仅检验了我所学习的知识，从编写五子棋棋盘到双人棋盘的实现，对玩家棋盘的落子，删除的监听，到分数计算，提升了自己的逻辑编程能力。队友的需求让我的ps技术得以回春，制作了更多的素材，让棋盘界面的ui更加完善。此外，这次作业也让我明白在编程之前最好先设计一张流程图，方便开发。

姜词杰:一开始看到结对作业的内容就感觉非常有意思，因为这是第一次能够真正的做出一个产品/游戏，并且发布，所以感到很兴奋，就是这股兴奋劲支撑着我度过了三个星期，在这三个星期里，我学会了COCOSCREATOR的使用和TypeScript,一开始什么都不懂，第一次接触COCOSCREATOR这种组件化开发的模式，于是去网上找资料，从最开始的连找什么资料都不知道到渐渐能够精准且快速的找到我想要的东西，感觉自己进步挺大的。同时切切实实的感受到了“人多力量大”，两个人让比较艰难的作业变得不那么有难度，第一次分工合作的感觉非常棒。希望接下来的团队编程作业能够继续PUSH自己达到新的高度。