首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Javascript游戏增量触发不止一次

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

Stack Overflow用户
提问于 2014-08-06 00:21:48
回答 2查看 258关注 0票数 0

我正在用jQuery/HTML构建简单的“发现差异”游戏。有5个回合/阶段,每个回合/阶段都有不同的图片,用户需要从第一轮开始经历所有这些回合/阶段。

我在第二轮的时候遇到了两次增量射击的问题,然后在第三轮的时候又增加了三次,以此类推。这会导致跳跃到双倍/三倍/...而不是简单地跳到1。

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

我想我不需要为此提供HTML,因为仅仅查看JS文件中的逻辑就足够了。对于那些喜欢巴斯德版本的人在这里(http://pastebin.com/ACqafZ5G)。完整代码:

代码语言:javascript
运行
复制
(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);
    };
}
EN

Stack Overflow用户

发布于 2014-08-06 00:26:43

你确定你不是把$('.transparent AREA')从一轮堆到另一轮吗?

这就解释了为什么你会多次得分:

代码语言:javascript
运行
复制
var mapImage = $('.transparent AREA');

    mapImage.each(function(index) {
        // ...
        points++;
        // ...
    });
票数 0
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25143754

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档