javascript，超时，按钮，移动。

Question

我在过去的3天里才开始使用javascript，我有一个任务要做。(不要问我为什么他们让我在我的第一个js任务中创建一个游戏)我制作了这个游戏，你可以在这里查看http://nwdevelopment.host56.com/game.html

工作原理:单击start按钮，然后start按钮消失，动画开始在角色上播放。计时器将一直计时到30秒。(当前用于测试的1秒)游戏结束，并在弹出窗口中显示点击量(+ 50表示获胜)。“开始”按钮重新启动，您可以再次播放。

我遇到的问题是：

1:我需要让按钮在被点击时消失，但仍然会继续倒计时，直到游戏结束，但在游戏结束时又回来了。我在哪里可以学到这一点？请带我去一个网站或带我去看。

他说:在所有这些过程中，当你按下开始游戏时，我需要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();