2017-03-24 74 views
0

我正在一個簡單的遊戲,你點擊一個運動圖像,並獲得積分,每次點擊。當用戶點擊時,我的得分排序會上升。我想知道該寫什麼,以便當用戶達到「100」分數時,他們可以進入下一個級別,圖像會加速。或者,作爲一個起點,至少該功能可以識別用戶已達到100分。jquery保持分數,並通過「水平」

$(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分。

+0

您可能包含JavaScript文件嗎?如果我們能夠檢查文件是如何進行遊戲以及它是如何構建的,那將會很有幫助。 – MasterBob

+0

包含HTML [mcve] – zer00ne

+0

@MasterBob這是整個JavaScript文件。我期望讓它認識到分數已經達到100,所以我可以開始進一步增加水平。 –

回答

1

您將得到一個跟蹤分數的遊戲功能。這是實現它的一種方式 - 我省略了動畫的內容,因爲它使得閱讀沒有更清晰。

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屬性代替。