jQuery 检测击键并相应地设置变量答案

【问题标题】：jQuery detect keystrokes and set variables accordinglyjQuery 检测击键并相应地设置变量
【发布时间】：2010-03-02 15:00:47
【问题描述】：

我已经在我的代码中创建了一个基本的 EasterEgg，以便在使用以下代码（不是同时）Enter + c + o + l + o + r + s 进行以下击键时激活：

isEnter = 0; isC = 0; isO = 0; isL = 0; isR = 0; isS = 0;
$(window).keydown(function(e){
    if(e.which==13) isEnter = 1; if(e.which==67) isC = 1; if(e.which==79) isO = 1; 
    if(e.which==76) isL = 1; if(e.which==82) isR = 1; if(e.which==83) isS = 1;
    ColorMap();
});

function ColorMap(){
  if(isEnter==1 && isC==1 && isO==1 && isL==1 && isR==1 && isS==1){
     //DO FUNCTION//
     isEnter = 0; isC = 0; isO = 0; isL = 0; isR = 0; isS = 0; //SET VARS BACK TO 0
  };
};

我需要向 keydown 函数添加重置功能，以重置所有变量，如果按下这些键以外的其他东西......这样他们必须按 Enter + c + o + l + o + r + s 或语句被重置并且他们必须重新开始...... .（这将使'EasterEgg'更难到达[或至少不太可能通过侥幸或随机击键获得]）。

【问题讨论】：

变量太多了！感谢上帝，你的词只有 6 个字符
@sadmicrowave - 我在下面添加了一个解决方案，您根本不需要担心字符代码，您可以轻松使用任何字符串。

标签： jquery variables reset keystroke

【解决方案1】：

您也想按顺序检查这些。现在，您可以按任意顺序按下按键，仍然可以激活复活节彩蛋。以Enter + lorocs 为例。

我会按顺序存储您要查找的值，如下所示：

//       Enter, c, o, l, o, r, s
var keys = [13,67,79,76,79,82,83];

然后，您可以只跟踪用户在序列中的位置：

var nextKey = 0;
$(window).keydown(function(e){
    var key = e.which;
    if (key === keys[nextKey])
        nextKey++;

    ColorMap();
});

每次匹配序列中要查找的下一个键时，nextKey 将递增。 nextKey 变量从 0 索引开始，这意味着我们开始寻找 Enter。现在，我们需要检查 ColorMap 函数中的结束条件。

function ColorMap() {
  var maxKeyIndex = keys.length - 1;
  if(nextKey >= maxKeyIndex) {
     //DO FUNCTION//

     nextKey = 0;
  }
}

此解决方案应允许您更改 keys 变量中的特殊序列，而无需更改代码中的其他位置。

编辑： 如果您希望答案是连续的，就像您可能做的那样，那么您可以在匹配失败时重置 nextKey 变量。

if (key === keys[nextKey])
    nextKey++;
else
    nextKey = 0;

为了获得额外奖励，您可以将其切换为使用字符串来保存复活节彩蛋，然后 String.fromCharCode 将其转换为 e.which 返回的字符代码。

【讨论】：

如果字符不匹配，您可以通过将 nextKey 计数器设置回零来强制复活节彩蛋键必须是连续的。
当然可以。我一开始打算这样做，但忘记了。
@EndangeredMassa - 这正是我正在寻找的。 @Pointy - 我还需要添加该功能......似乎添加： if(key != keys[nextKey]) nextKey = 0;应该可以解决问题，但由于某种原因它不起作用。
@EndangeredMassa 的帖子编辑 - 你不需要 { } 围绕你的 IF 条件的函数来使其工作吗？即 if(key===keys[nextKey]){nextKey++}else{nextKey=0}; ?
If-else 不需要括号。如果您不使用它们，它只会在执行时考虑下一行。不过，您当然可以添加它们。

【解决方案2】：

我最近回答了一个类似的复活节彩蛋问题，所以我只指出那个问题。

它采用与您正在做的不同的方法，并且不需要重置。

Javascript/jQuery Keypress logging

编辑：这是一个更新版本，可防止密钥历史过长。

$(document).ready(function() {

    var easterEgg = 'egg';
    var eggLength = easterEgg.length;
    var keyHistory = '';
    var match;
        $(document).keypress(function(e) {
            keyHistory += String.fromCharCode(e.which)
            match = keyHistory.match(easterEgg); 
            if(match) {
                alert(match);
                keyHistory = match = '';
            } else if (keyHistory.length > 30) {
                keyHistory = keyHistory.substr((keyHistory.length - eggLength - 1));
            }
        });
});

【讨论】：

+1 gr8，我喜欢你在帖子上的回答。唯一的问题是，假设用户按下千键而不按下复活节彩蛋的组合，那么keyHistory 将是巨大的。是吗？
好点。其实我就是这么想的，所以我更新了代码。将在一秒钟内发布它。（这里和那里。）
:)，现在很好。剩下的唯一一点是：keyHistory = keyHistory.substr((keyHistory.length - eggLength - 1)); 我猜，你可以用 30 替换 keyHistory.length ，因为你已经硬编码了。
@Rakesh - 非常正确。您可以对其进行硬编码以防止再次查找长度。 else if (keyHistory.length > 30) { keyHistory = keyHistory.substr((30 - eggLength - 1));}
我喜欢你可以将复活节彩蛋存储在一个字符串中。

【解决方案3】：

好吧，目前您将让您的用户按任意顺序按下魔法键，这不会很有趣。我会将魔术序列放入一个数组中，并且随着成功的击键匹配，您会在数组中向前移动。如果你走到最后，那就是 Egg time。

编辑完全按照@EndangeredMassa 所写。

【讨论】：

【解决方案4】：

这是另一种方法：

<script type="text/javascript">
$(function() {
  $(window).keypress(function(e) {
    var input = $("#input");
    input.val(function(i, v) { return v + String.fromCharCode(e.which) });

    if(input.val().indexOf('colors') > -1) {
      alert('Easter Egg');
      input.val('');
    } 
    else if('colors'.indexOf(input.val())) {
      //Clear value, they've hit another key
      input.val('');
    }        
  });
 });
</script>
<input id="input" type="text" />

它会跟踪您在文本框中输入的当前颜色部分，以便于调试，只需在完成测试后添加 style="display: none;"。

【讨论】：