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();