Question

我正在努力为琐事游戏制作一个非常简单的计数器，同时保持高分。除了两个问题外，它的效果还不错：

1）当我点击刷新当前分数以将当前分数恢复为零时，它会正确刷新，但是一旦我开始点击分数按钮，它也会重置高分。

2）我的.animate（）也不适用，我不明白为什么？

这是我的HTML：

<header class="controls">
    <div id="refresh-score"></div>
    <p class="scoreboard">HIGH | <span id="high-score-value"></span></p>
</header>
<h1 class="title-big" id="current-score-value"><div id="overlay"></div></h1>
<div id="score-button">+</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="car-trivia.js"></script>

jQuery的：

$(function(){
    var currentScore = 0;
    var highScore = 0;

    $('#high-score-value').append(highScore);

    $('#current-score-value').append(currentScore);

    $('#refresh-score').click(function(){
        console.log("refresh click");
        currentScore = 0;
        $('#current-score-value').html(currentScore);
        $('#refresh-score').animate({
            transform: "rotate(-360deg)"
        }, 500);
    });

    $('#score-button').click(function(){
        console.log("score click");
        currentScore++;
        $('#current-score-value').html(currentScore);
        if (currentScore > highScore) {
            $('#high-score-value').html(currentScore);
        } else {
            $('#high-score-value').html(highScore);
        }
    };

    $('.overlay').animate({
        width: "200vw",
        height: "200vw"
        }, 500)
    });

})

Answer 1

我已经删除了动画内容，因为如果你不用括号和括号犯错误，那就行了。您从未更新过var highScore，因此在按下刷新按钮后您的逻辑不会再添加，请参阅下面代码中的注释：http://jsfiddle.net/xukh3p3e/2/

$(function(){
        var currentScore = 0;
        var highScore = 0;

        $('#high-score-value').append(highScore);

        $('#current-score-value').append(currentScore);

        $('#ref').click(function(){
            console.log("refresh click");
            currentScore = 0;
            $('#current-score-value').html(currentScore);
            $('#ref').animate({
                transform: "rotate(-360deg)"
            }, 500);
        });

        $('#score-button').click(function(){
            console.log(highScore);
            console.log(currentScore);
            currentScore++;

            $('#current-score-value').html(currentScore);
            if (currentScore > highScore) {
                $('#high-score-value').html(currentScore);
                 highScore++;//MUST UPDATE HIGHSCORE VARIABLE HERE :)
            } else {
                $('#high-score-value').html(highScore);
            }
        });

        $('.overlay').animate({
            width: "200vw",
            height: "200vw"
            }, 500);
        });

如何使用jQuery创建一个同时保持高分的计数器？

1 个答案: