Question

我正在开发一款简单的游戏，您可以点击动态图像并在每次点击时获得积分。我得分的工作在用户点击的时候，分数会上升。我想知道要写什么，以便当用户达到“100”的分数时，他们可以进入下一个级别，图像将加速。或者也许作为一个起点，至少让功能识别用户已达到100分。

$(document).ready(function () {
$('#cursor').animate({
    top: '500px'
    , left: '500px'
});
$('img').click(function () {
    var randomNumber = Math.random();
    $('#score').html(function (i, val) {
        return val * 1 + 10;

       function levelup() {
            if (("#score") >= 10) {
                alert('Level Up');
            }
        }
    });
    $(this).animate({
        top: (Math.random() * window.innerHeight - this.height) + 'px'
        , left: (Math.random() * window.innerWidth - this.width) + 'px'
    })
})

function explode() {
    alert("TIME UP!");
}
setTimeout(explode, 30000);

}）;

这是我到目前为止所做的，当用户点击并且每次点击提供10点时就会识别出来。我无法弄清楚如何获得该分数来回到javascript文件以推进游戏。感谢。

编辑： “

<head>
    <title>jQuery animation</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script     src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="java.js" type="text/javascript"></script>
</head>

<body>   
    <img id="cursor" src="cursor.png" width="100"> 
    <div id="score">0</div>
</body>

</html>'

我觉得我的问题有些混乱。我只想让游戏识别出用户已达到100分。

Answer 1

您将获得跟踪分数的游戏功能。这是实现它的一种方法 - 我省略了动画的东西，因为它使得阅读更清晰。

＆＃13;

function createGame(onScoreChanged, onLevelChanged) {
    let score = 0;
    const scoreIncrement = 10;
    let level = 1;

    const incrementScore = () => {
        score += scoreIncrement;
        onScoreChanged(score);
        if (score >= (level * 100)) {
            onLevelChanged(++level);
        }
    }
    
    return {
        incrementScore
    }
}

$(document).ready(function() {
    // these functions are used to respond when score/level changes
    const scoreSubscriber = function(newScore) {
        $('#score').html('Score: ' + newScore);
    }

    const levelSubscriber = function(newLevel) {
        alert('You reached level ' + newLevel);
    }

    // initialise game
    const game = createGame(scoreSubscriber, levelSubscriber);

    // add the click handler
    $('#cursor').click(function () {
        game.incrementScore();
        // do animation stuff
    })

    // start your animations
});

＆＃13;

#cursor {
  width: 50px;
  height: 50px;
  background: steelblue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="score">Score: </div>
<div id="cursor"></div>

＆＃13;

顺便说一句，将点击处理程序放在所有img元素上可能是不明智的，所以我使用了它的id属性。

Jquery通过“关卡”保持得分和进步

1 个答案: