“Wack”风格游戏的多重jQuery问题

Question

我真的在努力解决这个问题，但不断地遇到问题。这是一种游戏，老鼠突然出现，你击中他们，并获得积分。希望你能在这里看到..。http://thetally.efinancialnews.com/tallyassets/wackamouse/index.html

我最终想要发生的是，老鼠在随机延迟后突然出现，然后再次下降。一旦他们上升，他们就变成了“可点击的”，这是当他们起来的时候会被添加的类。

但是，单击事件并不适用于已动态添加的类。我找到了一个本应回答这个问题的问题，但对我来说却毫无意义。

而且，延迟似乎越来越短。那是我的电脑在缓存和加速吗？有没有办法让延迟时间保持一致。或者至少近几秒钟。

这是目前为止的jQuery代码..。

var score = 0;  

$(document).ready(function() {


function mouseShow(){

    $('.mouse').each(function() {
        var $mouse = $(this);
        var min = 7000, max = 13000;
        var delay = Math.floor(Math.random() * (max - min) + min);
        setTimeout(function(){

            $mouse.animate({
                'background-position-x': '0',
                'background-position-y': '0'
            }, 300, function() {
                $mouse.addClass('clickable');
                mouseHide();
            });

        },  delay);

    });

}

function mouseHide(){

    $('.mouse').each(function() {
        var $mouse = $(this);
        var min = 4000, max = 6000;
        var delay = Math.floor(Math.random() * (max - min) + min);
        setTimeout(function(){
            $mouse.removeClass('clickable');
            $mouse.animate({
                'background-position-x': '0',
                'background-position-y': '40px'
            }, 300, function() {
                mouseShow();
            });

        },  delay);

    });

}

mouseShow();

    $('.clickable').click(function() {


        $('.score p').remove();
        score += 1;
        $('.score').append( "<p>"+score+"</p>" );
        console.log(score);

    });




});

Answer 1

您需要使用附加到鼠标的不改变的祖先元素(例如.mice div)上的委托事件处理程序，例如：

$('.mice').on('click', '.clickable', function() {

它的工作方式是侦听向目标元素冒泡的事件，然后将jQuery选择器应用于气泡链中的元素，然后将函数应用于导致事件的任何元素。最终的结果是.clickable元素只需要在事件时匹配。对于许多项，这只需要一个处理程序，开销相当低(而且由于您只能每秒单击几次，因此性能差异可以忽略不计)

延迟，很难用随机数看到。尝试在固定的持续时间内测试性能，然后切换到随机。