javascript，超時，按鈕，移動。

Question

在過去的3天里，我僅使用javascript進行工作，並且需要完成一項任務。 （不要問我為什么他們要我在我的第一個js任務上創建游戲）我制作了這個游戲，您可以在這里查看它http://nwdevelopment.host56.com/game.html

工作原理：單擊開始按鈕，然后開始按鈕消失，動畫在角色上開始。 計時器仍會持續到30秒為止。 （當前1秒用於測試）游戲結束並在彈出窗口中顯示點擊量（+ 50獲勝）。 重新出現“開始”按鈕，您可以再次播放。

我遇到的問題是：

1：單擊時我需要使按鈕消失，但仍然要繼續遞減計數直到游戲結束，但是在游戲結束時又要重新計數。 我在哪里可以學到呢？ 將我定向到一個站點或向我顯示。

2：在所有這些過程中，當您按開始游戲時，我需要加農在您單擊他的同時緩慢移動，以提高分數。 我的分數提高了，但我無法讓他動彈，甚至不知道從哪里開始。 另外，當您單擊他時，我需要它在屏幕上隨機移動10個像素。

我需要最簡單的形式，您可以使用javascript給我。 您能指出我正確的教程方向嗎？ 到目前為止，這里是代碼，很抱歉，CSS和腳本當前位於一個文件中。 （省去CSS，因為我認為您不需要它。）

    <div id="textWrapper">
<h1>Try to Defeat<br /> Ganon!</h1>
<p class="description">Click on Ganon and watch your score rise! If you hit     Ganon enough times before the time runs out, you win!</p>
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="unit3a.html">UNIT3A</a></li>
    <li><a href="unit3b.html">UNIT3B</a></li>
    <li><a href="game.html">Game</a></li>
</ul>
<br />
<!-- Counter -->
<div id="numberCounter">
<p>0</p>
</div>
</div>


<div id="backgroundImageWrapper">
<div id="ganonWrapper">
<img src="ganon.png" alt="ganon" onclick="myFunction()"/>
</div>

<div id="buttonWrapper">
<button id="button" onclick="myTimer()">Start Game</button>
</div>
</div>

<!-- START JAVASCRIPT -->
<script>
var counter = 0;

function add() {
return counter += 1;
}

function myFunction(){
document.getElementById("numberCounter").innerHTML = add();
}
function myTimer() {
setTimeout(function(){ alert("Game over!"); }, 1000);
}


</script>

Answer 1

也許這個小提琴可以幫助您使計時器正常工作。

http://jsfiddle.net/2zfdLf0q/2/

// lets put everything in our game object
var game = {

    //this is the init function (we call this function on page load (see last line))
    init: function(){
        //we attach a click event on the button
        document.getElementById('start').addEventListener('click', function(){
            //we hide the button
            document.getElementById('start').style.display = "none";
            //on click we start the timer
            game.timer.start();
        });
    },

    //this is the timer object
    timer: {
        startTime: 5,   //the time we start with (used to reset)
        currentTime: 5, //the counter used to remember where the counter is
        interval: null, //the interval object is stored here so we can stop it later
        start: function(){

            //when we start the timer we set an interval to execute every 1000 miliseconds
            game.timer.interval = setInterval(function(){
                game.timer.currentTime -= 1;  //we minus 1 every second to the timer current time

                //update the textbox to show the user what the time is
                document.getElementById('counter').value = game.timer.currentTime + ' seconds'; 

                //if timer hits 0 we show the game is over and reset the game, we also clear the timer
                //so it wouldn't count below zero
                if(game.timer.currentTime == 0){
                    alert('game over'); 
                    game.reset();
                    clearTimeout(game.timer.interval);
                }

            },1000);
        }

    },

    //this is the reset function
    reset: function(){
        document.getElementById('start').style.display = 'inline-block';
        game.timer.currentTime =  game.timer.startTime; 
        document.getElementById('counter').value = game.timer.currentTime + ' seconds';
    }

}

//we start the game on page load
//you should wrap this in
//window.onload = function(){}
//but jsFiddle does this automaticly
game.init();