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...
}
状态变换表
点击事件
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
