我正在用jQuery/HTML构建简单的“发现差异”游戏。有5个回合/阶段,每个回合/阶段都有不同的图片,用户需要从第一轮开始经历所有这些回合/阶段。
我在第二轮的时候遇到了两次增量射击的问题,然后在第三轮的时候又增加了三次,以此类推。这会导致跳跃到双倍/三倍/...而不是简单地跳到1。
代码是婴儿级别的。我没有做任何东西来重构和改进它。
我想我不需要为此提供HTML,因为仅仅查看JS文件中的逻辑就足够了。对于那些喜欢巴斯德版本的人在这里(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);
    };
}发布于 2014-08-06 00:26:43
你确定你不是把$('.transparent AREA')从一轮堆到另一轮吗?
这就解释了为什么你会多次得分:
var mapImage = $('.transparent AREA');
    mapImage.each(function(index) {
        // ...
        points++;
        // ...
    });发布于 2014-11-26 19:55:10
解决了!
mapImage.each应该在initiateRound之外
https://stackoverflow.com/questions/25143754
复制相似问题