1. 使用canvas截取部分精靈圖，并且轉(zhuǎn)成base64
原本使用drawImage()無法獲取單張撲克牌。發(fā)現(xiàn)錯誤原因：參數(shù)錯誤。
應該采用如下參數(shù)表，才能實現(xiàn)截取圖像功能：
drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth, destHeight)
2.1 牌面取值問題
按順序賦值，用序號模13得到牌面值
2.2 對牌進行排序
出現(xiàn)的問題：序號值模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. 遮罩層半透明，內(nèi)容不透明
問題：在編寫登錄遮罩層與等待遮罩層到時候，把兩個div容器的opacity設(shè)置為了0.3，導致內(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)機的邏輯封裝
對象設(shè)置一個變量 status，使用switch判別status的不同值，執(zhí)行不同狀態(tài)下的操作。
狀態(tài)機
把一個對象的行為分解成為易于處理的“塊”或狀態(tài)。
狀態(tài)機的實現(xiàn)：
判斷當前狀態(tài)，執(zhí)行當前點擊事件應該發(fā)生的動作；判斷狀態(tài)更改條件是否符合，修改狀態(tài)。
使用switch語句來表達狀態(tài)的代碼如下：
switch ($state) {
case STATE_RUNAWAY : // 逃跑狀態(tài)
// 躲避敵人
// 若安全，進入巡邏狀態(tài)
break;
case STATE_PATROL : // 巡邏狀態(tài)
// 巡邏
// 若遇到比自己強的敵人，進入逃跑狀態(tài)
// 若遇到比自己弱的敵人，進入攻擊狀態(tài)
break;
case STATE_ATTACK : // 攻擊狀態(tài)
// 若攻擊比自己強的敵人，進入逃跑狀態(tài)
// 否則取其首級
break;
// etc...
}
狀態(tài)變換表
點擊事件
e.target 是目標對象，e.event是目標所發(fā)生的事件。
target屬性的返回值是Element類型，返回最初觸發(fā)事件的DOM元素。
event.target.tagName 獲取元素標簽
event.target.id 獲取元素id
event.target.attr('class') 獲取元素的類名（jquery方式）
event.target[0].className; 獲取元素類名(原生JavaScript方式)
這里調(diào)用this無效.
$(
this
).index() 或者
$('.a').index(this); 獲取當前元素在當前class下的次序
通過e.target來對文檔元素進行操作
e.target返回的類型是一個對象，{}，而不是一個文檔元素
可以直接調(diào)用該對象的屬性值，也可以直接修改對象的屬性值。
通過對屬性值賦值，可以實現(xiàn)對該對象的操作，間接改變這個文檔元素的css與js操作。這個對象沒有具體方法。
var tag = e.target ;
var cname = tag.className;
cname += " chosen";
數(shù)組的深度拷貝
1、使用slice()
可使用slice()進行復制，因為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，所以可以利用這一點進行復制。
var array1 = new Array("1","2","3");
var array2; array2 = array1.concat();
array1.length = 0; alert(array2); //返回1、2、3
