使用Javascript檢測按鍵組合系列

Question

對於復活節假期，我想在我開發的網站上有一個小小的驚喜「復活節彩蛋狩獵」。這五個中的兩個復活節彩蛋我隱藏的將是按鍵命令。這不會像「同時按下CTRL和TAB」類型的交易，而是一個「Pres UP三次，然後三次右」類型的事情。這將尋找一系列按鍵，而不是一次只按兩次。我已經設置了這個功能，但出於某種奇怪的原因，它不能像它應該那樣工作。

注：下面的腳本尋找以下按鍵臺系列：
surprise1 - LEFT（三次），RIGHT（三次），UP（三次），DOWN（X3）
surprise2 - SHIFT（X3） ，TAB（x3），CTRL（x3）

$(document.body).keydown(function(e) { 
      surprise1(e); 
      surprise2(e); 
}); 

function surprise1(e) { 
    var ev = (e) ? e : window.event; 
    var k = ev.keyCode; 
    if (k > 36 && k < 41) { 
     typekeys[k] = isNaN(typekeys[k]) ? 0 : typekeys[k]; 
     typekeys[k]++; 
     if (typekeys[37] == 3) { 
      if (typekeys[37] == 3 && typekeys[39] == 3) { 
       if (typekeys[37] == 3 && typekeys[39] == 3 && typekeys[38] == 3) { 
        if (typekeys[37] == 3 && typekeys[39] == 3 && typekeys[38] == 3 && typekeys[40] == 3) { 
         alert("You've found Surprise 1! Contact the site admin ASAP to get your prize!"); 
         typekeys[37] = typekeys[39] = typekeys[38] = typekeys[40] = 0; 
        } 
       } else { 
        typekeys[40] = 0; 
       } 
      } else { 
       typekeys[38] = typekeys[40] = 0; 
      } 
     } else { 
      if (typekeys[37] > 3) { 
       typekeys[37] = 0; 
      } 
      typekeys[39] = typekeys[38] = typekeys[40] = 0; 
     } 
    } else { 
     typekeys[37] = typekeys[39] = typekeys[38] = typekeys[40] = 0; 
    } 
}; 

function surprise2(e) { 
    var ev = (e) ? e : window.event; 
    var k = ev.keyCode; 
    if (k > 8 && k < 18) { 
     typekeys[k] = isNaN(typekeys[k]) ? 0 : typekeys[k]; 
     typekeys[k]++; 
     if (typekeys[16] == 3) { 
      if (typekeys[9] == 3) { 
       if (typekeys[16] == 3 && typekeys[9] == 3 && typekeys[17] == 3) { 
        alert("You've found Surprise 2! Contact the site admin ASAP to get your prize!"); 
        typekeys[16] = typekeys[9] = typekeys[17] = 0; 
       } 
      } 
     } else { 
      if (typekeys[16] > 3) { 
       typekeys[16] = 0; 
      } 
      typekeys[9] = typekeys[17] = 0; 
     } 
    } else { 
     typekeys[16] = typekeys[9] = typekeys[17] = 0; 
    } 
}; 

請正確告訴我爲什麼這不起作用？在我看來，它應該工作。

Answer 1

試試這個：我使用https://github.com/madrobby/keymaster jQuery插件

$(function() { 
    var combination = '' 
    key('left', function(){ 
     combination = 'left'; 
     checkCombination(); 
    }); 
    key('right', function(){ 
     combination+= 'right'; 
     checkCombination(); 
    }); 
    key('up', function(){ 
     combination+= 'up'; 
     checkCombination(); 
    }); 
    key('down', function(){ 
     combination+= 'down'; 
     checkCombination(); 
    }); 

    function checkCombination() { 
     if(combination === 'leftrightupdown') { 
     alert('surprise 1'); 
     } 
    } 
});​ 

演示：http://jsfiddle.net/codef0rmer/BSdCq/

Answer 2

這裏是我的解決方案。我不得不做一些有趣的東西來比較here所描述的陣列。我敢肯定，你能適應這個腳本的一般要點，以滿足您的需求....

var seqs = [ [37,37,37,38,38,38,39,39,39,40,40,40], [9,9,9,16,16,16,17,17,17] ]; 
var seq = []; 

var messages=["You've found Surprise 1! Contact the site admin ASAP to get your prize!", "You've found Surprise 2! Contact the site admin ASAP to get your prize!"]; 

window.addEventListener("keydown", function(e){ 
    seq.push(e.keyCode); 
    var eq = function(a,b){ return !(a<b || b<a); }; 
    for (var i = 0; i < seqs.length; i++) { 
     if (eq(seq, seqs[i].slice(0,seq.length))) { 
      if (eq(seq, seqs[i])) { 
      alert(messages[i]); 
      seq = []; 
      } 
     return; 
     } 
    } 
    seq = []; 
}); 

Answer 3

這是更好的：

$(function() { 
    var combination = '' 
    key('left', function(){ 
    combination = 'left'; 
    checkCombination(); 
}); 
key('right', function(){ 
    combination+= 'right'; 
    checkCombination(); 
}); 
key('up', function(){ 
    combination+= 'up'; 
    checkCombination(); 
}); 
key('down', function(){ 
    combination+= 'down'; 
    checkCombination(); 
}); 

key(!'down' && !'left' && !'right' && !'up',function() { 
    combination = ''; 
}); 

function checkCombination() { 
    if(combination === 'leftrightupdown') { 
    alert('surprise 1'); 
    } 
} 
}); 

Answer 4

以下是我解決了這一...

var nums = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65]; 
var n = nums.slice(); 
$(document).keydown(function(e){ 
    if(e.which == n[0]){ 
    n.shift(); 
    } else n = nums.slice(); 
    if(n.length == 0) { 
    //success! 
    n = nums.slice(); 
    } 
}); 

如果你知道序列是什麼的話。 ;）