Javascript 游戏 - 增量触发不止一次

Question

我正在用 jQuery/HTML 构建简单的“Spot the Difference”游戏。有5个回合/阶段，每个阶段都有不同的图片，用户需要从第1轮开始全部完成。

当我在第二轮时，我遇到了这个问题，增量射击两次，然后在第三轮时增加三次，依此类推。这会导致点数上升两倍/三倍/...，而不是仅仅上升 1。

代码是婴儿级别的。我没有做任何东西来重构和改进它。

我认为我不需要为此提供 HTML，因为只需查看 JS 文件中的逻辑就足够了。 对于那些喜欢 pastebin 版本的人来说，这里是 (http://pastebin.com/ACqafZ5G)。完整代码：

(function(){

    var round = 1;
    var points = 0;
    var pointsTotal = 0;

    var pointsDisplay = $(".js-calc");
    var pointsTotalDisplay = $(".js-calc-total");
    var counterDisplay = $(".js-counter");

    var entryPage = $(".entry-page");
    var mainMenu = $(".main-menu");

    var submitNow = $(".js-now");
    var submitResultsFinalBtn = $(".js-submit-results-final");

    // rounds-categories
    var allRounds = $(".round");

    var divRound1 = $(".round1"),
        divRound2 = $(".round2"),
        divRound3 = $(".round3"),
        divRound4 = $(".round4"),
        divRound5 = $(".round5");

    var allPic = $(".js-pic");

    var pic1 = $(".js-pic1"),
        pic2 = $(".js-pic2"),
        pic3 = $(".js-pic3"),
        pic4 = $(".js-pic4"),
        picFinish = $(".js-finish");

        // on the beginning hide all and leave only entry page
        mainMenu.hide();
        allRounds.hide();
        submitResultsFinalBtn.hide();

    // countdown (SEE THE FUNCTION ON THE END)
    var myCounter = new Countdown({
        seconds: 60,  // number of seconds to count down
        onUpdateStatus: function(sec){
            counterDisplay.html(sec); // display seconds in html
        }, // callback for each second
        onCounterEnd: function(){
            console.log('TIME IS OVER!');
            // THIS SHOULD NOT BE HERE, I WOULD PREFER TO MOVE IT SOMEWHERE TO GAME ITSELF
            pointsTotalDisplay.html(pointsTotal);
            round++; // update to next round
            allRounds.hide();  // hide window
            mainMenu.show(); // show back again main menu
        } // final action

    });


    var initiateRound = $(".js-initiate");

    initiateRound.on("click", function(){ // START GAME
        console.log("ROUND " + round + " INITIATED");

        points = 0; // reset the points for this round to 0 - not sure this is the way to do it...

        console.log(points + " points for this round, " + pointsTotal + " in TOTAL"); // say how many points so far

        entryPage.hide();
        mainMenu.hide();
        allPic.hide();

        if( round === 1){
            divRound1.show();
            pic1.show();
        }else if( round === 2){
            divRound2.show();
            pic2.show();
        }else if( round === 3){
            divRound3.show();
            pic3.show();
        }else if( round === 4){
            divRound4.show();
            pic4.show();
        }else if( round === 5){
            divRound5.show();
            picFinish.show();
            initiateRound.hide();
            submitNow.hide();
            submitResultsFinalBtn.show();
        }

        counterDisplay.html("60"); //display 60sec on the beginning
        myCounter.start(); // and start play time (countdown)
        // pointsDisplay.html(points); // display in HTML amount of points for particular round


        // if user start collecting points, add them

        var mapImage = $('.transparent AREA');

        mapImage.each(function(index) {
            // When clicked, reveal red circle with missing element
            $(this).one("click", function(e) { // YOU CAN CLICK ONLY ONCE!! Using .one() to prevent multiple clicks and eventually scoring more points
                e.stopPropagation();

                console.log("FIRED");

                var theDifference = '#'+$(this).attr('id')+'-diff';
                $(theDifference).css('display', 'inline');

                if ($(theDifference).data('clicked', true)){ // found circle
                    // points++;
                    points += 1;
                    pointsTotal++;
                    console.log(points + " points for this round, " + pointsTotal + " in TOTAL");
                    pointsDisplay.html(points); // display in html amount of points
                }

                if (points === 6){ // if all points collected (max 6) for this round
                    myCounter.stop(); // stop countdown
                    console.log("time stopped, you found all");

                    setTimeout(function(){ // give him 2sec delay to see last circle marked
                        allRounds.hide();  // hide window
                        mainMenu.show(); // show back again main menu
                        console.log("round " + round + " is finished");
                        round++; // update to next round
                        console.log("round " + round + " is activated");
                        pointsTotalDisplay.html(pointsTotal); // display in HTML total amount of pints
                    }, 2000);
                };

            });

        });

    });
})();

function Countdown(options) {

    var timer,
    instance = this,
    seconds = options.seconds || 10,
    updateStatus = options.onUpdateStatus || function () {},
    counterEnd = options.onCounterEnd || function () {};

    function decrementCounter() {
        updateStatus(seconds);
        if (seconds === 0) {
            counterEnd();
            instance.stop();
        }
        seconds--;
    }

    this.start = function () {
        clearInterval(timer);
        timer = 0;
        seconds = options.seconds;
        timer = setInterval(decrementCounter, 1000);
    };

    this.stop = function () {
        clearInterval(timer);
    };
}

Answer 1

您确定没有将$('.transparent AREA') 从一轮堆叠到另一轮吗？

这可以解释为什么你得分多次：

var mapImage = $('.transparent AREA');

    mapImage.each(function(index) {
        // ...
        points++;
        // ...
    });

Answer 2

解决了！

mapImage.each 应该在initialRound 之外