javascript，超時，按鈕，移動。

Question

我一直在使用JavaScript過去3天，我有一個任務要做。 （不要問我爲什麼他們讓我在第一個js任務中創建一個遊戲）我已經制作了這個遊戲，你可以在這裏查看它http://nwdevelopment.host56.com/game.html

它應該如何工作：點擊開始按鈕，然後開始按鈕消失，動畫從角色開始。計時器仍然會持續到30秒。 （目前1秒用於測試目的）遊戲結束並顯示彈出點擊量（+ 50贏）。開始按鈕重新開始，您可以再次播放。

我遇到的問題是：

1：我需要單擊時按鈕消失，但仍繼續計數，直到比賽結束，但回來了，當比賽結束。我在哪裏可以學會這樣做？請指引我到一個網站或請給我看看。 2：在所有這些，當你按下開始遊戲時，我需要Ganon慢慢移動，而你點擊他並且分數上升。我得到了分數上升，但我不能讓他移動，我甚至不知道從哪裏開始。另外，當你點擊他時，我需要在屏幕上隨機移動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();