1. 使用canvas截取部分精靈圖特咆，并且轉(zhuǎn)成base64
原本使用drawImage()無法獲取單張撲克牌虚吟。發(fā)現(xiàn)錯誤原因：參數(shù)錯誤邀摆。
應(yīng)該采用如下參數(shù)表，才能實現(xiàn)截取圖像功能：
drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth, destHeight)
2.1 牌面取值問題
按順序賦值洁奈，用序號模13得到牌面值
2.2 對牌進(jìn)行排序
出現(xiàn)的問題：序號值模13之后间唉，A~Q的排列沒有問題，但是K的順序有誤利术，因為K模13之后得0呈野。
解決方法：對sort（）中的function進(jìn)行改造
// 目標(biāo)順序: 大王小王在最左, 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. 遮罩層半透明，內(nèi)容不透明
問題：在編寫登錄遮罩層與等待遮罩層到時候氯哮，把兩個div容器的opacity設(shè)置為了0.3际跪，導(dǎo)致內(nèi)容也出現(xiàn)了半透明效果商佛。
解決方法：用div的background: rgba()屬性實現(xiàn)div的半透明效果喉钢。
4.flexbox的隱藏效果
問題：在使用逐級顯現(xiàn)的flexbox時，在類樣式中設(shè)置display：none無效良姆，錯誤原因為與display：flex相沖突肠虽，使得隱藏效果無法實現(xiàn)。
解決方法：給flexbox添加外層div用來實現(xiàn)display：none的效果玛追。
JS打亂數(shù)組最高效的方法
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數(shù)組的有序排列
升序排列
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
狀態(tài)機(jī)的邏輯封裝
對象設(shè)置一個變量 status税课，使用switch判別status的不同值，執(zhí)行不同狀態(tài)下的操作痊剖。
狀態(tài)機(jī)
把一個對象的行為分解成為易于處理的“塊”或狀態(tài)韩玩。
狀態(tài)機(jī)的實現(xiàn)：
判斷當(dāng)前狀態(tài)，執(zhí)行當(dāng)前點(diǎn)擊事件應(yīng)該發(fā)生的動作陆馁；判斷狀態(tài)更改條件是否符合找颓，修改狀態(tài)。
使用switch語句來表達(dá)狀態(tài)的代碼如下：
switch ($state) {
case STATE_RUNAWAY : // 逃跑狀態(tài)
// 躲避敵人
// 若安全叮贩，進(jìn)入巡邏狀態(tài)
break;
case STATE_PATROL : // 巡邏狀態(tài)
// 巡邏
// 若遇到比自己強(qiáng)的敵人击狮，進(jìn)入逃跑狀態(tài)
// 若遇到比自己弱的敵人佛析，進(jìn)入攻擊狀態(tài)
break;
case STATE_ATTACK : // 攻擊狀態(tài)
// 若攻擊比自己強(qiáng)的敵人，進(jìn)入逃跑狀態(tài)
// 否則取其首級
break;
// etc...
}
狀態(tài)變換表
點(diǎn)擊事件
e.target 是目標(biāo)對象彪蓬，e.event是目標(biāo)所發(fā)生的事件寸莫。
target屬性的返回值是Element類型，返回最初觸發(fā)事件的DOM元素档冬。
event.target.tagName 獲取元素標(biāo)簽
event.target.id 獲取元素id
event.target.attr('class') 獲取元素的類名（jquery方式）
event.target[0].className; 獲取元素類名(原生JavaScript方式)
這里調(diào)用this無效.
$(
this
).index() 或者
$('.a').index(this); 獲取當(dāng)前元素在當(dāng)前class下的次序
通過e.target來對文檔元素進(jìn)行操作
e.target返回的類型是一個對象膘茎，{}，而不是一個文檔元素
可以直接調(diào)用該對象的屬性值酷誓，也可以直接修改對象的屬性值辽狈。
通過對屬性值賦值，可以實現(xiàn)對該對象的操作呛牲，間接改變這個文檔元素的css與js操作刮萌。這個對象沒有具體方法。
var tag = e.target ;
var cname = tag.className;
cname += " chosen";
數(shù)組的深度拷貝
1娘扩、使用slice()
可使用slice()進(jìn)行復(fù)制着茸，因為slice()返回也是數(shù)組。
var array1 = new Array("1","2","3");
var array2; array2 = array1.slice(0);
array1.length = 0; alert(array2); //返回1琐旁、2涮阔、3
2、 使用concat()
注意concat()返回的并不是調(diào)用函數(shù)的Array灰殴，而是一個新的Array敬特，所以可以利用這一點(diǎn)進(jìn)行復(fù)制。
var array1 = new Array("1","2","3");
var array2; array2 = array1.concat();
array1.length = 0; alert(array2); //返回1牺陶、2伟阔、3
