Question

我正在将一个Konami复活节彩蛋加入我的网站进行踢腿;你输入Konami代码，它播放来自街头霸王的hadouken声音和背景中的歌舞伎面具上的眼睛点亮一秒钟。

它有效......有点儿。我有一个问题。输入Konami代码后，每次用户按下某个键时，上述效果都会重复。这并不意味着这样做。我只希望每次用户输入完整代码时立即关闭一次效果。

还有另一种更小的打嗝，可以解决这个问题。通过简单地切换具有所需效果的背景的初始背景，掩模的眼睛实际上亮起。但是，第一次完成此操作时，页面会在加载第二个背景时闪烁，但后续迭代时不会闪烁。我有想法将第二个背景加载为HTML图像，其可见性设置为隐藏，但这不起作用。

    <script>
        function PlaySound(path)
        {
            var audioElement = document.createElement('audio');
            audioElement.setAttribute('src', path);
            audioElement.play();
        }
        function resetBackground()
        {
            document.body.style.backgroundImage = "url('onics.png')";
        }
        function flashBackground()
        {
            document.body.style.backgroundImage = "url('onics_red.png')";
            setTimeout(resetBackground, 830);
        }
        if(window.addEventListener)
        {
            var kkeys=[],konami="38,38,40,40,37,39,37,39,66,65";
            window.addEventListener("keydown",function(e)
            {
            kkeys.push(e.keyCode);
            if(kkeys.toString().indexOf(konami)>=0)
                {
                    PlaySound('hadouken.wav');
                    flashBackground();
                }
            },true);
        }
    </script>

Answer 1

您需要重置kkeys数组：

    if(window.addEventListener)
    {
        var kkeys=[],konami="38,38,40,40,37,39,37,39,66,65";
        window.addEventListener("keydown",function(e)
        {
        kkeys.push(e.keyCode);
        if(kkeys.toString().indexOf(konami)>=0)
            {
                kkeys = [];
                PlaySound('hadouken.wav');
                flashBackground();
            }
        },true);
    }

Answer 2

您可以添加标记

<script>
    var konamiPlayed = false;
    function PlaySound(path)
    {
        var audioElement = document.createElement('audio');
        audioElement.setAttribute('src', path);
        audioElement.play();
    }
    function resetBackground()
    {
        document.body.style.backgroundImage = "url('onics.png')";
        konamiPlayed = false;
    }
    function flashBackground()
    {
        document.body.style.backgroundImage = "url('onics_red.png')";
        setTimeout(resetBackground, 830);
    }
    if(window.addEventListener)
    {
        var kkeys=[],konami="38,38,40,40,37,39,37,39,66,65";
        window.addEventListener("keydown",function(e)
        {
            if (!konamiPlayed) {
                kkeys.push(e.keyCode);
                if(kkeys.toString().indexOf(konami)>=0)
                {
                    konamiPlayed = true;
                    PlaySound('hadouken.wav');
                    flashBackground();
                }
            }
        },true);
    }
</script>

编辑：

对于小问题，我认为这是因为浏览器仅在您要求时加载图像。所以，第一次需要一些时间。

如何让这个Javascript函数正确迭代？

2 个答案: