结对编程作业
| 成员 | 博客链接 | 具体分工 |
|---|---|---|
| 杨潮湧 | 博客链接 | 主要负责原型设计、博客园博文编写、人人在线对战部分程序设计和开发 |
| 陈松庆 | 博客链接 | 主要负责人人本地对战、人机对战部分的程序设计和开发 |
一、原型设计
1.1对本次结对作业的设计说明
（1）本次作业所采用的设计工具
- 本组本次采用的原型设计工具为墨刀。
（2）设计说明
- 本次作业的原型主要分为四个场景，分别是首页选择模式场景，人人本地对战场景，人机本地对战场景以及人人在线对战场景
（3）设计页面
- 原型展示
- 在线登录认证页面
- 在线对战游戏大厅状态1（查看房间使用情况）
- 在线对战游戏大厅状态2（提示用户选择创建房间类型）
- 在线对战游戏大厅状态3（提示用户即将进入房间）
- 在线对战状态1
- 在线对战状态2
- 在线对战状态3
- 在线对战状态4
1.2遇到的困难及解决方法
困难描述：
困难一：首次使用原型模型工具，一开始上手十分生涩，有些举步维艰
困难二：时间紧迫，大部分时间用于学习开发语言以及开发项目
困难三：由于起初对于工具的不熟练，缺乏设计理念和灵感。
解决方法：通过b站上网课的学习，各大社区论坛查阅资料，以及向身边一些进度较快的同学询问。
收获：和一些同学建立了友好的关系，对墨刀以及原型设计有了掌握和了解
二、原型设计及实现
2.1代码实现思路
利用js脚本语言，在cocos creator上实现。双人和人机对战上，我们采用对相似的组件配置同样的js文件，例如手牌区里的四种花色牌用的是同一种js文件和相同功能的按钮是同一种js文件。游戏一开始，默认选边为左边，将52张牌默认设置为牌组节点的子节点，一旦按钮触发摸牌，就将对应牌的节点移动至判定区。与此同时，将此牌的父节点改变为判定区域节点。由于cocos子节点的逻辑，后加入的子节点会放在子节点数组的后面，且同级之后放置在越后面的节点优先级越高，显示得越上层。利用这个逻辑，实现了牌堆顶放置最新抽出得卡牌。当卡牌移至判定区时，还得对卡牌与先前牌堆顶的卡牌进行花色判断，判断成功后，就将牌移动至对应的手牌区。当一系列动作完成后，游戏的变量side将会发生变化，检测到side发生变化后，游戏的操作方也会变化。以此达到双方回合制出牌的效果。
贴出你认为的重要有价值的代码片段
let children = this.node.children;
let games = this.node.parent;
let lbutton = cc.find("Canvas/Draw_button2");
let lclub = cc.find("Canvas/L_CLUB");
let lspade = cc.find("Canvas/L_SPADE");
let lheart = cc.find("Canvas/L_HEART");
let ldiamond = cc.find("Canvas/L_DIAMOND");
choice = games.getComponent("games");
if (choice.side == 1){//left
let choice_button = cc.find("Canvas/Draw_button2");
choice_button.getComponent(cc.Button).interactable = false;
lbutton.getComponent(cc.Button).interactable = false;
lclub.getComponent(cc.Button).interactable = false;
lspade.getComponent(cc.Button).interactable = false;
lheart.getComponent(cc.Button).interactable = false;
ldiamond.getComponent(cc.Button).interactable = false;
cc.log(choice_button.name,"关闭左键");
}
var rand = Math.random();
num = Math.floor(rand * this.range);
if(num%4==0){
this.diamond+=1;
}
else if(num%4==1){
this.club+=1;
}
else if(num%4==2){
this.spade+=1;
}
else if(num%4==3){
this.heart+=1;
}
let judge = cc.find("Canvas/judge");
cc.log("cardgroup:",children.length);
cc.log("random card id:",num);
children[num].active = true;//???????
// children[num].x = -400;
cc.log(children[num].name);
let bt_node = children[num];
bt_node.parent = judge;
bt_node.x = -400;
let finished = cc.callFunc(function (target){
this.range -= 1;
cc.log("range:",this.range);
let msgForDispatchEvent = new cc.Event.EventCustom("card", true);
msgForDispatchEvent.detail = bt_node.cardid;
bt_node.dispatchEvent(msgForDispatchEvent);
if (choice.side == 1){//left
let choice_button = cc.find("Canvas/Draw_button2");
choice_button.getComponent(cc.Button).interactable = true;
cc.log(choice_button.name,"打开左键");
}
else{//right
let choice_button = cc.find("Canvas/Draw_button");
choice_button.getComponent(cc.Button).interactable = true;
cc.log(choice_button.name,"打开右键");
}
if (choice.side == 1){
lbutton.getComponent(cc.Button).interactable = true;
lclub.getComponent(cc.Button).interactable = true;
lspade.getComponent(cc.Button).interactable = true;
lheart.getComponent(cc.Button).interactable = true;
ldiamond.getComponent(cc.Button).interactable = true;
}
let side = new cc.Event.EventCustom("side", true);
side.detail = "over";
this.node.dispatchEvent(side);
cc.log(bt_node.parent.name);
if (children.length == 0){
let msgover = new cc.Event.EventCustom("over",true);
msgover.detail = "Game Over";
this.node.dispatchEvent(msgover);
}
}, this);
let spawn = cc.spawn(cc.fadeIn(0.5),cc.rotateBy(0.5,360));
let action = cc.sequence(spawn, cc.moveTo(0.5, 0, 0), cc.scaleTo(1.25,1.25), cc.scaleTo(1,1), finished);
bt_node.runAction(action);
上述代码实现了创建随机数，然后通过随机数抽取一张卡牌的过程
2.4评价你的队友
1.陈松庆评价杨潮湧
- 值得学习的地方
做事有条理，心态很好，有时候我自己实在坚持不下去想要摆烂的时候，一直在鼓励我能实现一步是一步，能做到一点是一点，能得多少分是多少。而且在设计原型时也给了我不少的思路，比如背景的图案等等。因为我自己有些急躁，看到其他组都完成一部分，自己还在学习HTML,CSS,JS就有些着急，就开着2倍数急急忙忙的看完了，但是根本记不住，幸好一步一个脚印慢慢理解领悟JS和CoCos Creator的操作，我在一旁帮助实现部分的代码和实现的思路扑克牌的优先级等问题。
- 需要改进的地方
代码的格式不太好，有些看不懂，有时候文件的名字取名也不太规范
2.杨潮湧评价陈松庆
- 平时经常摸鱼，但该认真做事的时候还是会拿出应有的态度面对
提供此次结对作业的PSP和学习进度条
| PSP2.1 | Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | 120 | 120 |
| · Estimate | · 估计这个任务需要多少时间 | 1800 | 2400 |
| Development | 开发 | 1800 | 2400 |
| · Analysis | · 需求分析 (包括学习新技术) | 1800 | 2400 |
| · Design Spec | · 生成设计文档 | 150 | 180 |
| · Design Review | · 设计复审 | 120 | 140 |
| · Coding Standard | · 代码规范 (为目前的开发制定合适的规范) | 30 | 30 |
| · Design | · 具体设计 | 120 | 120 |
| · Coding | · 具体编码 | 1800 | 1800 |
| · Code Review | · 代码复审 | 300 | 300 |
| · Test | · 测试（自我测试，修改代码，提交修改） | 360 | 420 |
| Reporting | 报告 | 30 | 60 |
| · Test Repor | · 测试报告 | 30 | 20 |
| · Size Measurement | · 计算工作量 | 30 | 60 |
| · Postmortem & Process Improvement Plan | · 事后总结, 并提出过程改进计划 | 30 | 30 |
| · 合计 | 8520 | 10480 |
学习进度条
| 第N周 | 新增代码（行） | 累计代码（行） | 本周学习耗时(小时) | 累计学习耗时（小时） | 重要成长 |
|---|---|---|---|---|---|
| 1 | 0 | 0 | 10 | 10 | 学习了HTML、CSS、js的基本语法 |
| 2 | 0 | 0 | 10 | 20 | 学习了CoCos Creator的多种使用技巧和脚本文件的编写 |
| 3 | 100 | 100 | 10 | 30 | 学习了CoCos Creator的多种使用技巧和脚本文件的编写还有墨刀原型设计 |
| 4 | 1500 | 1600 | 40 | 70 | 实现了双人对战，在线对战，人机对战 |
三、心得
陈松庆
这作业不提前规划是真的痛苦，前期全在摸鱼学习，最后一个星期爆肝编程是真tmd痛苦。
杨潮湧
- 在完成作业的过程中逼着自己学习了很多以前想接触却一直没有真正去认识的技术和知识。
- 作业的规划安排很关键，我们组的时间安排不当，导致后期进度非常赶。
- 代码的更新备份非常重要，这是在这次的结对编程中学到的血的教训。github就是一个很好的代码更新备份工具。
