我正在开发一个简单的游戏，您可以单击移动图像并在每次单击时获得积分。我有一种分数工作方式，当用户点击时，分数就会上升。我想知道要写什么，以便当用户达到“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分。
最佳答案
跟踪分数的游戏功能将为您提供帮助。这是实现它的一种方法 - 我省略了动画内容，因为它可以使阅读更清晰。
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
});#cursor {
width: 50px;
height: 50px;
background: steelblue;
}<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>顺便说一句，将点击处理程序放在所有 img 元素上可能是不明智的，因此我使用了它的 id 属性。
关于javascript - Jquery 保持分数并通过 "levels"取得进展，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42989399/