双人扑克-技术文档(2)11.7-11.11.md

1. 使用canvas截取部分精灵图，并且转成base64

原本使用drawImage()无法获取单张扑克牌。发现错误原因：参数错误。
应该采用如下参数表，才能实现截取图像功能：

drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth, destHeight)

2.1 牌面取值问题

按顺序赋值，用序号模13得到牌面值

2.2 对牌进行排序

出现的问题：序号值模13之后，A~Q的排列没有问题，但是K的顺序有误，因为K模13之后得0。
解决方法：对sort（）中的function进行改造

// 目标顺序: 大王小王在最左, A~K依次排列
function compare(value1, value2) {
 if((value2%13) == 0){
   return -1;
 } else if ((value1%13) == 0){
   return 1;
 } else if(value1 == 53 || value1 == 54){
   return -1;
 } else if(value2 == 53 || value2 == 54){
   return 1;
 } else if ((value1)%13 < (value2)%13 ) {
   return -1;
 } else if ((value1)%13 > (value2)%13) {
   return 1;
 } else {
   return 0;
 }
}

3. 遮罩层半透明，内容不透明

问题：在编写登录遮罩层与等待遮罩层到时候，把两个div容器的opacity设置为了0.3，导致内容也出现了半透明效果。
解决方法：用div的background: rgba()属性实现div的半透明效果。

4.flexbox的隐藏效果

问题：在使用逐级显现的flexbox时，在类样式中设置display：none无效，错误原因为与display：flex相冲突，使得隐藏效果无法实现。
解决方法：给flexbox添加外层div用来实现display：none的效果。

JS打乱数组最高效的方法

var arr=[];
for(var i=0;i<100;i++){
arr[i]=i;
}
arr.sort(function(){ return 0.5 - Math.random() })
var str=arr.join();
alert(str);

js数组的有序排列

升序排列

function compare(value1, value2) {

   if (value1 < value2) {

       return 1;

   } else if (value1 > value2) {

       return -1;

   } else {

       return 0;

   }

}

var values = [0, 1, 2, 5, 10, 15];

values.sort(compare);

alert(values);  //15,10,5,1,0

状态机的逻辑封装

对象设置一个变量 status，使用switch判别status的不同值，执行不同状态下的操作。

状态机

把一个对象的行为分解成为易于处理的“块”或状态。
状态机的实现：
判断当前状态，执行当前点击事件应该发生的动作；判断状态更改条件是否符合，修改状态。
使用switch语句来表达状态的代码如下：

switch ($state) {
    case STATE_RUNAWAY : // 逃跑状态
        // 躲避敌人
        // 若安全，进入巡逻状态
        break;
    case STATE_PATROL :  // 巡逻状态
        // 巡逻
        // 若遇到比自己强的敌人，进入逃跑状态
        // 若遇到比自己弱的敌人，进入攻击状态
        break;
    case STATE_ATTACK : // 攻击状态
        // 若攻击比自己强的敌人，进入逃跑状态
        // 否则取其首级
        break;
    // etc...
}

状态变换表

屏幕快照 2016-11-18 下午11.27.30.png

参考资料：有限状态机的实现

点击事件

e.target 是目标对象，e.event是目标所发生的事件。
target属性的返回值是Element类型，返回最初触发事件的DOM元素。
event.target.tagName 获取元素标签

event.target.id 获取元素id
event.target.attr('class') 获取元素的类名（jquery方式）

event.target[0].className; 获取元素类名(原生JavaScript方式)
这里调用this无效.
$(
this
).index() 或者
$('.a').index(this); 获取当前元素在当前class下的次序

通过e.target来对文档元素进行操作

e.target返回的类型是一个对象，{}，而不是一个文档元素

可以直接调用该对象的属性值，也可以直接修改对象的属性值。

通过对属性值赋值，可以实现对该对象的操作，间接改变这个文档元素的css与js操作。这个对象没有具体方法。

var tag = e.target ;

var cname =  tag.className;

cname += " chosen";

数组的深度拷贝

1、使用slice()
可使用slice()进行复制，因为slice()返回也是数组。

var array1 = new Array("1","2","3"); 
var array2; array2 = array1.slice(0); 
array1.length = 0; alert(array2); //返回1、2、3  

2、 使用concat()
注意concat()返回的并不是调用函数的Array，而是一个新的Array，所以可以利用这一点进行复制。

var array1 = new Array("1","2","3"); 
var array2; array2 = array1.concat(); 
array1.length = 0; alert(array2); //返回1、2、3